はてなブログ超初心者がブログの見出しカスタマイズに挑戦！
今回はブログの記事内の見出しのカスタマイズについてです。
目次
前回はこちらで、はてなブログをシンプルなデザインにカスタマイズするのに役立つサイト一覧を紹介させていただきました。
1. 現在の見出しを確認する
アヤサカはブログのデザインテーマに、「Evergreen」を使用しています。
そのため、見出しのデザインはデフォルトでこんな感じでした。
少し味気ない感じがしたので、もう少し見出しのデザインにアクセントをつけたいと思いました。
２. 新しい見出しデザインを決める
そこで参考にさせていただいたのが、こちらの記事です。
複数の見出しデザインがコピペできるコードとともに紹介されていて、初心者には大変わかりやすくて参考になります。
アヤサカは結局、オーソドックスなデザインでまずカスタマイズしようと思い、下記のデザインに決めました。
以下、この見出しデザインにカスタマイズするために、アヤサカが考えたこと・やったことをまとめます。
３. 色を決める
まず、バックグラウンドの色（グレイ）は白色にすることにしました。そしてアクセントとして見出しに加えられている左と下部とラインの色を、Evergreenの文字色に合わせたいと思いました。そこで適切な値が分からなかったので、こちらの記事を参考にしました。
上述の記事で使用されている色コード「#00adad」より少し明るめの色がいいなと思ったのでグーグルで検索をかけたところ、下記のサイトが出てきましたので参考にしました。「#00adad」より25%明るい色の「#00d8d8」がアヤサカが求めている色にちょうど良いと思い、「#00d8d8」に決めました。
そして下記のコードを、デザインCSS（デザイン→カスタマイズ→デザインCSS）に貼り付けて完成です。
４. 変更後の見出しデザインを確認する
最終的に出来上がった見出しデザインがこちら。
初心者でもコピペを中心に、結構簡単にできました。
補足：Gistの使い方
加えて、はてなブログにコードを載せる時に便利なアプリ、Gistを使用する方法が紹介されている、こちらの記事も大変参考になりました。
ありがとうございます！
