たとえ無料で使用できるブログであっても、自分の特徴をだしたオリジナルのデザインにして他との差別化を図りたくなる。
デザインについても自由度の高いBloggerなら、なおさらだ。
どの部分をカスタマイズするのか
デザイン的要素はいろいろあるが、まずは「読みやすく」を心掛ける。
Bloggerのテンプレートは種類も豊富で、デザインのカスタマイズも管理画面（ダッシュボード？）から簡単に行える。
テンプレートや背景画像、ブログの幅やレイアウトなどは、いくつかある選択肢の中から選んでいくだけで、オリジナルのデザインでブログが出来上がる。
まさしく、「あっ」というまだ。
「アドバンス」からは、さらに詳細なところまでカスタマイズ可能で、カスタマイズできる箇所をすべて理解しようとすればそれだけでかなりの日数を費やすことになるだろう。
自分らしいデザインに仕上がったところで、メインのエントリー内のデザイン変更をおこなっていく。
以前のエントリーで見出しが重要と書いたので今回はその辺を見やすくカスタマイズしていくことにする。
参考：読みやすいブログにするためにやるべきこと!!（文章編）
エントリーのタイトルをカスタマイズ
テンプレートの標準のカスタマイズが終わったこのブログでは、「h1」タグはブログタイトル。
「h2」タグは日付とサイドバーにあるガジェットのタイトル。「h3」がエントリータイトル(記事の見出し)になっていた。
なので、記事の見出しであるh3タグをCSSを編集してカスタマイズする。
カスタマイズする前はフォントサイズが大きく設定されていたので、それは変更せずに、ボーダーを使って目立つように変更した。
h3.post-title {
padding-left:.6em;
border-left : 10px solid #999;
border-bottom:1px solid #999;
}
明るめのグレーのラインを左サイドは太め、下は細めで設定。
エントリー内の小見出しの設定
読みやすさにこだわる当ブログでは、エントリーの中で段落ごとに小見出しをつけている。
エントリーを書く際、小見出しに当たるところを、h4タグを使用している。
そのままのh4のCSSの設定はフォントが強調してあるのみで、小見出しとしては少し物足りない。
フォントのサイズを大きくし、少しだけ目立つように変更した。
h4 {
color: #000;
font-size: 18px ;
margin:.75em 0 0;
padding-left:.6em;
border-left : 10px solid #6ea1bb;
}
本文の文字色は濃いグレーの＃333だけど小見出しは黒の＃000にし、フォントサイズを18px上げ、左サイドに太目の罫線をタイトル文字と同じ色のライトブルーにし、デザインに共通性を持たした。
結論
少しの変化ではあるが、オリジナリティが出た上に読みやすくなった。（ような気がする ^^; ）
