はてなブログテーマ「Blank」を使ってブログデザインを変更してみた
こんにちは、余白レディ（@yohakulady）です。数日帰省してブログをおやすみしていました。
久しぶりにMacを開くと、この記事が目に留まりました。
はてなブログテーマ「Blank」を使用してデザイン変更
私の好みのテーマがたくさん紹介されています。この中から、シンプルで余白も含めたデザイン性の高さと、カスタマイズできるところが気に入り、今回は「Blank」を使ってみます。
「テーマストア」のページ右側にある「プレビューしてインストール」ですぐこのデザインが適用されました。フォントがすっきりしてきれいです。
デザインのカスタマイズ ①見出しのフォント
基本のフォントサイズとフォントカラーはとてもしっくりして大好きなバランスです。今回は見出しが目立ちにくいので、見出しをカスタマイズしてみます。
こちらのページで紹介されているように、「デザイン」→「カスタマイズ」→「{ } デザインCSS」にコードを記入します。
「400」を「bold」にして、太字にして、見出しっぽさを出しました。
デザインのカスタマイズ ②見出しの装飾
今回はシンプルな見出しCSSをこちらから拝借しました。
こちらで教えていただいて今回初めて知った、はてなブログのローカルルールがあります。
ひとつは、「大見出し＝h3」「中見出し＝h4」「小見出し＝h5」ということ。
もうひとつは、「.entry-content h3」というふうに、タグの前に「.entry-content」を付けなければいけないということ。
まず、大見出しにストライプ下線デザインを適用しました。
そして、中見出しに左側に縦線デザインを適用しました。
ここにあるサンプルをコピペするだけでデザインがきれいに反映されますが、私は色を変更しました。もとの渋めの水色（#7ed1e6）からダークグリーン（#6b8e23）に替えると、アイキャッチ画像のダークグリーンと合います。色をたくさん使用しないことですっきりと整理されたブログに仕上がりました。
特にスマホで見やすくなったので、しばらくはこのテーマを使ってみようと思います。今まで使用していない「小見出し」をいつか使うときのために「h5」のデザインCSSを何にするか検討中です。
