トップページのスタイリング

ここまではループとそのトップページとの関わりを見てきた。ではいよいよ、いくつかのCSSと共にすべてを一つにまとめて、このテーマの体裁を整えよう。

最初のステップは各投稿記事の間に空間を持たせることだ。今のところ一つの長いテキストが切れ目無く表示されている。各投稿記事にはCSSの「post」クラスが与えられているのでこのスタイリングは簡単だ：

.post
{
margin-bottom: 2.2em;
}

このようになる：

すばらしい。では、スタイルを追加しよう：

.post
{
margin-bottom: 25px;
color: #4A2C00;
padding-left: 5px;font-size: 1.1em;
}h2
{
font-size: 1.6em;

border-bottom: 1px solid #e8c38b;
}

h2 a:hover, h2 a:visited, h2 a
{
text-decoration: none;

color: #bd492a;
}

.entry
{
margin-top: 10px;
margin-bottom: 15px;

}

.postmetadata
{
padding: 2px;
font-size: 0.8em;
border-top: 1px solid #FADA96;

}

.postmetadata a
{
color: #4a2c00;
}

それほど多くのコードがあるわけではない。
フォントサイズとボーダーと共にマージンを変更した。変更後を見てみると完成にだいぶん近づいているのが分かるだろう：

コンテンツのスタイリング

はっきりと分からないかもしれないが、上の画像の投稿記事にはコンテンツに対するスタイリングが欠けている。パラグラフ間やリスト間のスペースなどの基本的なフォーマットだ。

まずはパラグラフ間のスペースに取り組む：

.post p
{
line-height: 1.4em;
margin-bottom: 1em;}

これはブログの読みやすさに大きく影響する：

残りのスタイルを一緒にし、今のKubrickのstyle.cssからいくつか取り除き、その他をこのテーマに合うように変更した。

何を変更したのか分かるようにスタイル無しの文章を次に挙げる：

これは全く素のままだ。では、スタイルを追加しよう：

blockquote
{
margin: 1em 1.5em;
padding: 1em 1.5em;border: 1px solid #FADA96;
background: #FCF1E2 url(images/blockquote.png) no-repeat scroll top left;}

.post li
{
margin-left: 20px;
}

.post ul
{

list-style-image: url(images/listitem.png);
list-style-type: bullet;
margin-bottom: 10px;
}

acronym, abbr, span.caps
{
cursor: help;
}

acronym, abbr
{
border-bottom: 1px dashed #999;

}

blockquote cite
{
margin: 5px 0 0;
display: block;

}

.center
{
text-align: center;
}

a img
{
border: none;

}

h3
{
margin-top: 1.5em;
font-size: 1.4em;

}

h4
{
margin-top: 1.2em;
font-size: 1.2em;

}

h5
{
margin-top: 1em;
font-size: 1em;
}

.post a

{
color: #bd492a;
}

このようになる：

基本的にリストのマージンはサイドバーのものと同じで、それを再適用している（CSSのサイズを減らすために再利用することもできるがここではしていない）。さまざまなレベルのヘッダーを定義したのですべてのブラウザで同じサイズに見えるし、blockquote要素には背景イメージと色スキームを設定した。