【はてなブログ】見出しをカスタマイズしてみる（CSS対応）

数日前から適用していますが、見出しを少しカスタマイズしてみました。

今回のカスタマイズは既存のデザイン（デザインテーマ）に変更が入っています。

実はこれまで記事にしてきたブログカスタマイズは

など、既存のデザイン変更というよりは、パーツ追加というか、付け加える感じのカスタマイズが多かったです。
※カテゴリーリンクのデザイン変更は既存デザインの変更ですが、小さな変化でした。

ということで今回の見出しカスタマイズはちょっと抵抗があったのですが、試しにデザイン変更してみたら、やっぱり適用してみたくなりました。

とはいえ大きくデザイン変更したわけではないです。
ですが、ブログにおいて見出しのデザインはけっこう印象が変わる部分かなと。

長々とアレコレ書きましたが、どんな対応をしたか書いていきます。

変更内容（画像）
適用したCSS
デザインの適用手順
注意事項
おわりに
関連記事

変更内容（画像）

まずは手っ取り早く、変更前後の画像を載せます。

変更前

変更後

こんな感じです。

変更前のデザインに関して「大見出し」と「中見出し」に大きく差がないなと若干思っておりました。（個人の好みですが。）

そこで今回は「大見出し」と「中見出し」でもう少し差がつくようなデザインに変更しています。

「大見出し」の背景色を薄いグレーにして、下ボーダーをなくしてみました。

「大見出し」の変更のみで、「中見出し」「小見出し」に変更はないです。

これから貼る画像は、今回適用を見送ったデザインです。
とはいえ適用する可能性も捨てきれないなということでここに貼ります。

見送った案１

「大見出し」は変更せず、「中見出し」の左ボーダーを濃い目のグレーにしてみました。

あまり変化がないですね。
ただ「中見出し」のグレーを更に薄くすると、今度は「小見出し」との差がなくなってしまうので見送りとなりました。

見送った案２

「大見出し」の背景色をグレーにしてみました。

今度は「大見出し」の下ボーダーが余計に感じてしまいました。
この案から、今回採用した案につながります。

見送った案３

「大見出し」の背景色を薄めのグレーにし、下ボーダーを濃い目グレーにして立体的にしてみました。

これは見送ったものの、けっこう気に入っているデザインです。
ただ「大見出し」だけ立体的なのはどうなんだろう？となり見送りとなりました。

どの案にしようかは悩みました。
アレコレ悩んで、「変更前がやっぱり一番良いんじゃないか？」とも思いつつ。
「でもせっかくだから適用しよう」と思い立ちました。

適用したCSS

/***見出し***/
.entry-content h3 {
    padding: 8px 0px 8px 10px;
    border-bottom: none;
    background: #eee;
}
.entry-content h3:after {
    content: none;
}
/***見出しここまで***/

上記のCSSを適用すると見出しのデザインが変更されます。

見送った案のコードも残しておきます。
残しておくことで、いつでも見送った案を適用できます。

見送った案１

/***見出し***/
.entry-content h4 {
    border-left: 4px solid #333;
}
/***見出しここまで***/

見送った案２

/***見出し***/
.entry-content h3 {
    background: #eee;
    padding: 8px 0 8px 10px;
}
/***見出しここまで***/

見送った案３

/***見出し***/
.entry-content h3 {
    padding: 4px 0px 4px 10px;
    border-bottom: solid 4px #CCC;
    background: #FCFCFC;
}
.entry-content h3:after {
    content: none;
}
/***見出しここまで***/