この記事は、はてなブログ初心者のごまたまごが、自分のブログをカスタマイズする経過を載せた記事です。ごまたまごと同じような、はてなブログ初心者の参考になれば幸いです。

今日は、はてなブログの見出しのカスタマイズをしようと思います。

今日は見出しをカスタマイズしよう

完成形

目指す完成物は、これです。

「見出しタイトルに背景色をつける」

もう上の見出しで完成形が表されていますね。笑。

さて、次はコードをデザインCSSにコピペしましょう。

.entry-content h3 {
  padding: 4px 8px;
  color: #333;
  line-height: 1.5;
  background-color: #d9f7f5;
}

今回は「h3」の中見出しに背景色をつけたかったので、一行目が「h3」になっています。「h4」に背景色をつけたかったら、一行目を「h4」としてください。

また、上記引用コードではbackground-colorは「#d9f7f5」（緑色）ですが、目次に合わせ、ピンクにしたかったので「#ffccff」にしました。

上の表示ならば、<h3>HTMLへのコード</h3>です。

以上のことは、以下のサイトを参考にさせていただきました！ありがとうございました。