2018年7月5日

前回の記事で決めた配色を見出しに適用させてみました。

見出しの形を決める

• 「見出し1」はタイトルに使われていて、他のサイトを見ても変更していないようなので、元に戻す事にしました。
• 「見出し2」はブログの記事内で1番目立たせたいので、前に見出し1で使っていたデザインにしました。
• 「見出し3」は見出し2よりも若干アクセントを落とす感じで、見出しの右側に線を入れるデザインにしました。

色を決める

見出し2、見出し3に使う色は、同じ色にして、このサイトのメインカラー(#5F6214)にしました。

設定する

編集するファイルは、前回見出しをカスタマイズしたのと同じ、子テーマの
/wp-content/themes/luxech/style.css になります。

見出し1の設定を削除しました。

.post h1 {
padding: 0.4em 0.5em;
color: #494949;
background: #f4f4f4;
border-left: solid 5px #7db4e6;
border-bottom: solid 3px #d7d7d7;
}

見出し２、見出し3の設定を追加しました。

.post h2 {
padding: 0.4em 0.5em;
color: #494949;
background: #f4f4f4;
border-left: solid 5px #5F6214;
border-bottom: solid 3px #d7d7d7;
}

.post h3 {
padding: 0.4em 0.5em;
color: #494949;
border-left: solid 5px #5F6214;
}

まとめ

こんな感じになりました。

見出し1

見出し2

見出し3

大分見やすくなったかなと思います。
まだまだカスタマイズ出来る部分はあるので、時間を作ってもっと良い雰囲気になるサイトにしていきたいです。