Twenty Ten今日は記事本文の部分のCSSカスタマイズについて考えていきたいと思います。

記事の本文は「entry-content」というクラス名のdivで囲まれます。これはトップページでも、個別の記事ページ（シングルページ）でも、その他の一覧ページでも共通です。また、投稿ではない、静的ページの本文も同じです。

記事本文中の画像のみ装飾したい

例えば、記事本文中の画像のみ装飾したいと考えた場合にも「entry-content」を利用できます。

.entry-content img{
   border: 1px solid #ccc;
   padding: 5px;
}

記事本文中の画像だけ、薄いグレーのボーダーで囲まれます。「padding: 5px」で画像の周りに余白を取っています。
このように指定しておけば、サイドバーの画像や「#content」内ではあるけれど、記事本文以外のの場所ににおいた画像やバナーがある場合など、ボーダーが適用されずにすみます。

記事本文中のリストのみ、画像のリストマークをつけたい

.entry-content ul li{
    list-style: none;
    background-image: url(img/list.gif);
    background-repeat: no-repeat;
    background-position: 0px 3px;
    padding-left: 9px;
} 

「 list-style: none」でデフォルトでつくリストマークを消し、「background-image」で背景画像としてリストマークを指定します。「background-position」や「 padding」で画像のサイズや文字の大きさなどにあわせて微調整します。

これも、たいていは「#content」や「.post」を指定してすれば大丈夫だと思いますが、なにかに影響が出てしまうとか、「他の部分と細かくデザインを変えたい！」なんて言うときには使えると思います。

覚えておいて損はないですね！