ブログ CSS 編集中
このブログの「デザイン CSS」というものを編集した。「デザイン CSS」とは、はてなが提供しているテンプレートの CSS に加えて、ユーザーが自由に定義できる CSS のことだ。優先順位は、テンプレートの CSS より「デザイン CSS」のほうが高い。テンプレートの CSS で使われている任意のセレクタとまったく同じセレクタを「デザイン CSS」で宣言し、プロパティの値を定義すると、「デザイン CSS」が、テンプレートの CSS を上書きすることになる。
今回の編集では、以下のように「デザイン CSS」を定義した。
kbd 要素
先ずは kbd 要素への CSS を記す。
kbd { display: inline-block; padding: 0 0.5ex; background: #eee; border: outset #eee 0.1ex; }
テンプレートでは、kbd 要素に何も CSS が当たっていない状態だったため、背景色と枠線を付け、それと判る見栄えに変更した。
body 要素
次は、body 要素への CSS.
body { background: #f9f9f9; }
背景色を白に近い灰色に変更し、眩しさを軽減した。
ブログ名
次は、ブログの上部に表示される、ブログ名への CSS.
#blog-title { text-align: center; color: #d00; } #title a { color: inherit; font-size: xx-large; }
このブログの名前は「※ただの日記ブログです※」にしてあるが、これはブログ名でありつつも、かつ、伝えるべきメッセージでもある。文字サイズを大きくし、中央寄せして、色を赤っぽくすることで、ただの日記ブログであることを強調した。
記事本文・サイドバー
次は、ブログの記事の本文を表示している部分と、サイドバーについての CSS.
#wrapper, #box2 { float: none; display: table-cell; padding: 1.3em; } #wrapper { background: #fefefe; } #box2 { background: #f0f0f0; }
記事の本文を表示している部分の背景は、body 要素の背景よりも明るい色にしてある。これによって、ブログの最も重要な部分がどこなのかが判別しやすくなっている。背景色に明るい色を使用することで、文字色とのコントラストが大きくなり、視認性が向上している。
サイドバーは、ブログの補助的な部分なので、body 要素の背景よりもやや暗い色にして視認性を低くした。また、body 要素や本文部分とは別の色にすることで、どこからどこまでがサイドバーなのかが一目瞭然となっている。
また、本文とサイドバーには display: table-cell
を適用して、2 つの要素の高さを同じにした。これによって、本文がどれだけ長くなっても、サイドバーがサイドバーで在り続けることができる。
フッター
次は、フッターへの CSS.
#footer { width: auto; background: transparent; }
フッターの背景色は body 要素と同一化し、独立したパーツであることを強調しないようにした。
コンテナ
次は、ブログ名と本文とサイドバーを覆っているコンテナへの CSS.
#container { padding: 0; background: transparent; }
背景色を body 要素と同一化することで、ブログ名の背景色を body 要素の背景色と同一化している。これによって、ブログ名が、本文やサイドバーから独立した部分であることを表している。
おわり
以上。