ブログ 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 要素の背景色と同一化している。これによって、ブログ名が、本文やサイドバーから独立した部分であることを表している。

おわり

以上。