読者です 読者をやめる 読者になる 読者になる

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

おわり

以上。

広告を非表示にする