【はてなブログ-カスタマイズ】見出しデザインをCSSで変更（4回目）

数日前から適用していますが、見出しのデザインを少し変更してみました。

見出しデザインは何度か変更していて、今回の変更で4回目です。
これまでの見出し変更は、この記事の最後に関連記事としてリンクしておきます。

それではサクッと本題へ。

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

変更内容（画像）

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

変更前

変更後

変更前は、「大見出し」→「中見出し」→「小見出し」の順でボーダーが減っていく感じです。
大見出しが「上下左右」、中見出しが「上下」、小見出しが「左」です。
あとは徐々にボーダーが細くなったり、色が薄くなったり、といった工夫です。

変更後は、全てボーダーを左端に統一しました。
ボーダーが細くなったり、色が薄くなったり、といった工夫は同様です。
あとは、大見出しだけ背景色を設定しています。

参考サイト

今回は色選びの参考に「Colorbase」を活用しました。
「大見出し」→「中見出し」→「小見出し」で色を薄くしていく感じや、大見出しのボーダーと背景色の組み合わせを考えるときに大変参考になりました。

colorbase.app

「Colorbase」を解説しているサイトもリンクしておきます。

kumaweb-d.comgroow.info

適用したCSS

/***見出し***/
.entry-content h3 {
    border-left: 10px solid #111;
    border-bottom: none;
    background-color: #e7e7e7;
    padding: 10px;
}
.entry-content h3:after {
    content: none;
}
.entry-content h4 {
    border-left: 5px solid #585858;
    padding: 6px 10px;
}
.entry-content h5 {
    border-left: 3px solid #a0a0a0;
    padding: 4px 10px;
}
/***見出しここまで***/