WordPressのデフォルトテーマであるTwenty Ten のメイン部分のCSSについて見ています。前回は記事の上下に現れるナビゲーションについて考えました。今回は記事の部分に入っていこうと思います。Twenty Ten では、記事それぞれにidを割り振っているので、そのあたりをみていきましょう。

記事の囲みと大まかな構成

トップページをみると、たいていの場合、新着の記事がずらっと並んでいると思います。記事タイトル、日付など、記事本文（または抜粋）、カテゴリーなどの部分に分かれ、それが一塊になり、繰り返されています。文章で書くと分かりにくいですが、こんな感じです。

div id="post-143" class="post-143 post type-post hentry 
category-twenty-ten-css category-wordpress-beginner"

このように始まるdivに囲まれて、記事タイトルの「entry-title」、日付や投稿者などが表示される「entry-meta」、記事本文の「entry-content」、カテゴリーやタグなどのリンクが表示される「entry-utility」という構成になっています。

トップページ記事の囲み部分のcss

先ほどの記事囲みのdivのCSSを見てみます。「id=”post-143″」。これは記事の通し番号が143である事を表します。次のクラス名「”post-143」も同様ですね。次の「post」「type-post」は記事タイプがpost(投稿 ）であること、「hentry」はAtomのmicroformatのページ。「category-twenty-ten-css」「 category-wordpress-beginner」と並んでいるのはこの記事が属するカテゴリー名ですね。記事の番号、タイプ、カテゴリーなどからそれぞれのidやクラス名がついています。

試しにその下２つの記事をみると、

div id="post-139" class="post-139 post type-post 
hentry category-make-twenty-ten-child-theme"

div id="post-120" class="post-120 post type-post hentry category-plugins"

と記事のidとカテゴリーが変化している事が分かります。

その他のページでの記事の囲み部分のcss

では、同じ記事番号143の記事の囲み部分が、他のページでどのように変化するかもみてみましょう。

シングルページ
id="post-143" class="post-143 post type-post hentry
 category-twenty-ten-css category-wordpress-beginner

カテゴリー一覧
id="post-143" class="post-143 post type-post hentry
 category-twenty-ten-css category-wordpress-beginner"

日付アーカイブ
id="post-143" class="post-143 post type-post hentry
 category-twenty-ten-css category-wordpress-beginner"

どうでしょうか。すべて同じですね。記事の囲みにつくidやクラス名はどのページで見ても変わらないようです。特にidは固有ですから、これを利用すれば、特定の記事に特定のCSSを読ませることもできます。

特定のページでの特定の記事のみデザインを変える

Twenty Tenでページごとにデザインを変えるためにで見たようにbodyにつくクラス名もあわせれば、特定のページでの特定の記事にのみ、変化を付ける事もできるわけです。

例として、記事idが3の記事のトップページでのタイトルの脇にのみ、ボーダーを入れてみます。

.home #post-3  .entry-title {
   border-left: 10px solid #ff6600;
}	

こんな風に利用できます。いろいろあわせると面白そうですね。