育児と投資と節約と

いつの間にやら3児の父親になってました。気づいたことや思ったことなどを書いていきたいと思います。

はてなブログの見出しをカスタマイズ(装飾)してみました

どうも。

やまこうです。

 

前回に引き続き、ブログカスタマイズネタです。

今回は、見出しに対するカスタマイズです。

今利用しているテンプレートはシンプルでかっこいいのですが、見出しに設定しても、あまり差が分からないので、カスタマイズすることにしました。

 

 

 

カスタマイズの対象は

はてなブログには、3つの見出しが設定されています。

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

この3種類の見出しをカスタマイズしていくことになります。

 

そもそも、h3を大見出しにすることには、SEO上問題ではないかとの記事がありました。

はてなブログの大見出しが<h2>ではなく<h3>なのか?SEO対策の為にも変更すべき! - 晴れ時々晴天なり

SEOとかは、まだまだ早い感じですので、いずれ読み返したいと思います。

 

カスタマイズの方法

実際のカスタマイズの方法については、下記のサイトを参考にさせて頂きました。

mudaide.hatenablog.com

 

大見出しh3のカスタマイズ

背景を青で塗りつぶして、文字を白抜きにします。

.entry-content h3{
color: #ffffff;
background: #000080;
padding: 10px 10px;
}

 

中見出しh4のカスタマイズ

見出しの左に太めの線を引き、下線を引きます。

この見出しのやつですね。

.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-left: 10px solid #000080;
border-bottom: 3px solid #000080;
}

 

まとめ

これで、更にそれっぽくなりましたね。

更に見やすいブログを目指して、カスタマイズを継続していきたいと思います。