Blogger のテンプレートを、ちょっとカスタマイズして読みやすくする - Sand Dollar に CSS を追加

Blogger に最初から用意されているテンプレートの中では、Sand Dollar が気に入っている。理由は、幅が固定ではないところ。幅が固定されているというのは、今一好きになれない。 (+_+) 見る人に、幅を強制しているように感じるからだ。人によって、読みやすい幅というものがあると思う。

久しぶりに、IE で自分のブログを見て驚いた。

「なんだ、この小さい文字は...」

いつもは Firefox で「最小フォントサイズ」を設定しているので、気づいてなかった。また、 userContet.css で全てのページに対して、「行の高さ」を設定しているのを忘れていた。

 

カスタマイズ

カスタマイズしたい点をまとめると次にようになる。

• 記事の文字を大きくする
• 記事の行の高さを広げる
• 見出しの左側にボーダーをつける。

最後の点は、記事のタイトルであることをわかりやすくするため。現状では、見出しと記事の境がわかりにくい。

 

文字の大きさを変更

実例： font-size の振る舞い 「DOCTYPE スイッチ」 CSS 解釈実例編 によると、

「 font-size: medium という指定がなされた箇所は、ユーザーがブラウザに設定したデフォルトフォントサイズと同じ大きさで表示される、つまりその箇所は、レガシー HTML にて <font size="3"> とした時と同じ表示。」

現状では、body の font-size が small に指定されているので、 medium に変更した。

この変更に伴なって、ブログのタイトルと記事のタイトルが大きくなりすぎたので、小さくなるようにした。

 

行の高さの変更

p 要素に対して、 line-height を設定した。

 

記事のタイトルに枠

ブログのタイトルの背景と同じ色の枠を、記事タイトルの左につけた。

 

CSS

上記 3 点を既存の CSS に追加した。

/* ----------- カスタマイズ ----------*/
body { font-size: medium; }
p { line-height: 1.3; }
h1.title { font-size: 170%; }
h3.post-title {
    font-size: 140%; 
    padding-left: 5px; 
    border-color: #DE7008; 
    border-width: 0px 0px 0px 20px; 
    border-style: solid;  
}

テンプレート > HTML の編集 において、上記の CSS を ]]></b:skin> の直前に追加した。