前回までの記事
・Bloggerテンプレート「Smart」導入メモ #1
・Bloggerテンプレート「Smart」導入メモ #2
・Bloggerテンプレート「Smart」導入メモ #3
・Bloggerカスタマイズ　ヘッダー編

**注意**
ソースコードの改変の前には必ずバックアップをとっておきましょう


記事のタイトルを強調させたい

今回は、ブログ記事のタイトルをカスタマイズします。


ヘッダーがサイトの顔なら、タイトルは記事の顔です。デフォルトでは下のような感じで、少し控えめな気がします。


もう少し強調するため、タイトル部分の高さ（縱幅）を大きくしたいと思います。これにはソースコードの編集が必要です。

ソースコードの編集

例によってHTMLコードの編集画面を開きます。以下、テンプレートにSmartを使用している場合を例に説明します。

「/*記事のタイトル・見出し・コンテンツ」というセクションを探し、「/*記事タイトル*/」の部分の「padding: 15px 20px;」という記述の「15px」の値を変更すると、記事タイトルの縦幅が変化します。とりあえず30pxに変更してみると、こうなります。


記事タイトルの縦幅が太くなったのがわかるでしょうか。

ちなみに、paddingの2行上の「font-size」の値を変更すれば、記事タイトルの文字サイズも大きくしてさらに強調できます。どのくらいのサイズにするかは自身の好みで決めましょう。

見出しのカスタマイズも同様

記事タイトルだけでなく、記事中の見出しについても、同様の変更が可能です。同じセクションの「/*大見出し（h2）*/」「/*中見出し（h3）*/」「/*小見出し（h4）*/」などの「font-size」や「padding」の値を同じ要領で変更するだけです。ただし、これらは相互のバランスが大事なので（小見出しが大見出しより大きかったら変です）、その点は注意が必要です。