はてなブログの中見出しをシンプルデザインにカスタマイズしました

前回は大見出しのデザインをカスタマイズしました。

今回は中見出しのデザインをカスタマイズしたときに参考にした記事と、実際に貼り付けしたコードを紹介します。

目次

中見出しをオシャレにする

大見出しの次に大事な「中見出し」

中見出しで設定した部分は、HTML編集で見ると<h4>で指定されています。

今回のカスタマイズをすることで、ブログの全記事の<h4>で設定されたところが、一括でカスタマイズできます^^

参考にした記事

「はてなブログ　見出し　カスタマイズ」で検索すると、おしゃれなデザインがたくさんでてきますが、中見出しはシンプルにしたかったのでなかなか気に入るものがみつかりませんでした。

そんな中みつけたのがこちらの記事。

[CSSデザインの基本] H(見出し)の作り方 | 田中勇輔のブログ

この中の、「cssで作る　見出しサンプル点線系2」を採用することに。

h2 {
border-bottom:2px dashed #48832C;
padding:4px 6px;
}

このコードを使います。

コードを修正する

まず今回は中見出し<h4>のカスタマイズなので、一行目のh2を“h4”に書き換えます。

色も、大見出しの色に合わせて桃色（#E8868F）に変更。

※色コードの確認はこちら

完成したコードが以下です。

h4 {
border-bottom:2px dashed #E8868F;
padding:4px 6px;
}

ＰＣ版・スマホ版へ設定する

それぞれコードをはりつける場所が違います。

こちらの記事で画像付きで解説がありますのでわからなくなったら要確認！

ＰＣ版へ設定

デザイン→カスタマイズと進んで行って、“デザインｃｓｓ”の箇所に完成したコードを貼り付けます。

すでに大見出しなどのカスタマイズコードが貼られていると思うので、その下に貼りつけましょう。

スマホ版へ設定

デザイン→スマートフォン→記事、と進んでいき、“記事上”の箇所に完成したコードをはりつけるのですが、ここで注意！

スマホ版のカスタマイズの場合は、<style></style>タグで囲います。

つまり、

<style>
h4 {
border-bottom:2px dashed #E8868F;
padding:4px 6px;
}
< /style>

このコードを貼り付けます。

先に大見出しのデザインコードが張り付けられている場合はすでに<style>タグで囲まれていると思うので、一緒に囲んでもｏｋ！

※締めの<style>タグには、スラッシュ（/）をつけるのを忘れずに！

ビフォーアフター

画像はスマホ版のみですが、同じデザインコードを貼ったのでｐｃ版も同じようにデザインされています。

なんてったっ、このカスタマイズで、このブログの中にある見出しがぜーんぶ一括でおしゃれになっちゃうから便利！

さいごに

いよいよブログが好きになってくる瞬間！（今まで好きじゃなかったのかよ！ｗ）

最初は難しいと感じるかもしれませんが、一度やってみるとすんなり理解できるはず。カスタマイズはチャレンジしたもの勝ちです^^