Gimlet

見出しのカスタマイズ

 

そもそも見出しとは? 

上のように、文章の間に置いて文章をブロックごとに分けることで

読みやすくする物を見出しと言います。

デフォルトの物だと微妙な仕上がりなので、自分の好きなようにカスタマイズしましょう。

 

「ダッシュボードのデザイン→スパナマーク(カスタマイズ)→デザインCSS 」の部分をクリックして、デザインCSSに英数字の文字列(コード)を書き込むとデザインが変更され、ブログに反映されます。

 

はてなブログでは、見出しが3種類あって、

  • h3=大見出し
  • h4=中見出し
  • h5=小見出し

という風に対応しているので、中見出しの設定をしたければ、

 .entry-content の後の部分のh3をh4に変えれば大見出しから中見出しに変更されます。

 

 

大見出し

 一番目立つところなので変にこだわらずにシンプルなものを選びました。

こちらのブログの「よくあるや~つ」のコードを使わせて頂いています。

こちらのデザインは見出しの部分が下の線だけでなく、

左にも線があるので、どこをみればよいのか瞬時にわかるのがお気に入りです。

www.yukihy.com

/*-- 大見出し --*/
.entry-content h3{   color: #444444;    /*-- 文字色 --*/
  margin-top:15px;   /*-- 枠の外側の余白 --*/
  padding: 10px 15px;  /*-- 枠の内側の余白 --*/ border-left: 10px solid #008b8b;/*-- 左の線の色 --*/ border-bottom: 1px solid #008b8b;/*-- 下の線の色 --*/ }

表示要素の内側に設ける余白部分のことをパディング(padding)と言います。

枠線(要素の境界)からテキストなどの内部の表示領域までの距離を表し、CSS(スタイルシート)などで任意の値に設定できます。 

境界の外側の余白(他の要素との距離)のことは「マージン」(margin)と言います。

 

詳しくはこちらのブログへ

taneppa.net

 

そして、#で指定されたコードはカラーコードといって、そこのコードを変えると色を変えることができます。

色に対応するコードは下記サイト等で調べられます。

めんどくさい時は#を使わずにblackとかorangeとかでも可能です。

 

 WEB色見本 原色大辞典 - HTMLカラーコード

 

中見出し

中見出しは大見出しの左の部分を0pxにして表示しないようにかえてあります。

 

/*-- 大見出し --*/
.entry-content h3{   color: #444444;    /*-- 文字色 --*/
  margin-top:15px;   /*-- 枠の外側の余白 --*/
  padding: 10px 15px;  /*-- 枠の内側の余白 --*/ border-left: 0px solid #008b8b;/*-- 左の線の色 --*/ border-bottom: 1px solid #008b8b;/*-- 下の線の色 --*/ }

 

 

 

小見出し

 小見出しはこちらのブログの小見出しを使わせて頂いています。

www.okotono.net

全体的にブログデザインが黄色で統一されていて、まとまっているのでとても見やすいので参考にしてます。

 

 

見出しの文字の大きさを、少しずつ小さく 

/*-- 見出しの文字の大きさを、少しずつ小さく --*/
.table-of-contents ul{
   font-size: 90%;
}

 

 このコードを追加すると大見出し→中見出し→小見出しの順番で文字が小さく表示される様になります。

使ってみると視覚的に見出しのちがいがわかるので、入れてみてよかったなと思っています。