BlogのテーマをTwenty Elevenに変更してみたけれど、どうもサイトのヘッダ部分にやたらと余白が多かったので、これを修正するべくCSSのカスタマイズを行ってみた。
カスタマイズにあたり参考にさせて頂いたのは以下のBlogエントリ。
Twenty Elevenのヘッダーをカスタマイズする | Webコンサルティング
上記のエントリ中で紹介されている、3つの作業を行ってみた。
(1)CSSに #page.hfeed { margin-top: 0px; } を追加
(2)CSS内の border-top: 2px solid #bbb; を削除
(3)エントリ中で紹介されているコードをCSS
上記の作業だけでなく、CSSに記述されているヘッダ部分の余白に関係のありそうな箇所を削ったり値を小さくしてみたところ、だいぶムダな余白が消えてすっきりしたように思う(^ ^)
■修正後のヘッダ周り
■修正前のヘッダ周り
ムダな余白を削る事で、ファーストビューに表示できる情報が増えたけれど、読みやすさは余白を削る前とそれほど変わらないと思う。
地味な修正ではあるけれど、ほんの少しでも見やすく、使いやすくなるのは嬉しいので、今後も気が向いたら手を入れて改善していきたいなと。
得意では無いけれど、CSSのカスタマイズだったりBlogの設定変更などなどを試行錯誤するのは好きではあったりする(^ ^)