Twenty TenをCSSでカスタマイズしていくために、大まかなレイアウトの構成、ヘッダーやメニューの簡単なデザイン変更、カラムの変更、などについて考えてきました。

前にも少し触れましたが、Twenty Tenでは非常に細かくclassやidが振られるようになっています。これを利用すれば、ページごと、カテゴリーごと、などでデザインを変えていく事が出来ます。テーマを変える事で、大きくレイアウトや出力される内容を変える事も自由にできますが、今回はCSSに限定して考えてみたいと思います。

WordPressのサイト構成とパーマリンク

WordPressでは特に変更しなければ、「記事（投稿）」の一覧が表示される「トップページ」、その「投稿」の「個別（シングル）ページ」、「ページ」で作られる「固定ページ」、の他にそれぞれの投稿をいろいろな形で分類、一覧表示するためのページがあります。「カテゴリー」「日付アーカイブ」「タグ」などで分類され、一覧表示させているページですね。
「固定ページ」というのは、ブログの日記のように時系列にとらわれない種類のコンテンツを表示させるために用意されたものです。

後々テーマをカスタマイズしたり、自作のテーマを作ろう、と思ったりしたときに意外に混乱しやすい部分でもありますので、ちょっと確認します。

一つの投稿の分類のために様々なページが用意されている訳ですね。○○株式会社の「私」、スキーサークルの「私」、○○家の「私」など、いろんな「わたし」がいるけれど、どれも「わたし」。その変わらない「私」が「パーマリンク」といったところでしょうか。

bodyに割り振られるクラス

Twenty Tenでは、今、トップページにいるのか、カテゴリー一覧にいるのか、それとも「固定ページ」を表示しているのか、などによってbodyにクラスが割り振られます。

トップページ

body class="home blog logged-in"

となっています。「home」はトップページにつくクラス名。次の「blog」はこのトップページがブログである事、「logged-in」は今自分がログイン状態であるときにつくクラス名です。例えば、設定＞表示設定＞フロントページの表示　のところで「最新の投稿」ではなく他の「ページ」をフロントページに選んだとし、自分がログアウト状態になったとします。そうすると、トップページのbodyには、

body class="home page"

というクラス名が割り振られる事になります。

カテゴリー一覧ページ

カテゴリー一覧ページでは、このブログの「CSSで考えるTwenty Ten カスタマイズ」のカテゴリーを例にすると、

class="archive category category-twenty-ten-css"

となります。「archive」でこのページがアーカイブであること、「category」でさらにそれがカテゴリーのアーカイブであることがわかりますね。最後の「category-twenty-ten-css」は、このカテゴリーのカテゴリースラッグです。ですから、これを利用すれば、カテゴリーごとに、背景を変えてみたり、タイトルの色を変えてみたりと、デザインを変更する事ができる訳です。

日付アーカイブ

これには、月ごと、日ごと、年ごと、などの分類がありますが

class="archive date"

と割り振られるようです。

タグ別アーカイブ

タグ別アーカイブでも同様に、クラス名がつけられます。このブログではまだタグで整理していませんので、さんま（スラッグがsanma）とつけられたもののアーカイブのページだと仮定しますと、

class="archive tag tag-sanma"

の様になるわけです。

固定ページ

次は固定ページです。このブログの「ABOUT」のページを例にします。

class="page page-id-2 page-template page-template-default "

なんだか長いですね。始めの「page」はこれが固定ページであること、「page-id-2」はページのid（通し番号）が2であることから割り振られたクラス名です。では、次のはなんでしょう？「page-template」 「page-template-default」はこれがページのテンプレートを使い、そしてdefaultのテンプレートを使っている、ということになります。

もし、このページが１カラム用のテンプレートを適用されていたとしたら、

class="page page-id-2 page-template page-template-onecolumn-page-php"

と変わる訳です。

シングルページ

最後にシングルページです。

class="single single-post postid-110"

これは、このページが「single」ページであり、「single-post」個別の「投稿」であり、「postid-110」は通し番号が「110」であることから割り振られたクラス名です。「postid」がつくという事は、すべてのシングルページに違うCSSを割り当てる事も不可能ではない、ということです。

すべてを変える、というのは現実的ではないと思いますが、「あるページの、この部分だけ、デザインを変えたいのになぁ」というような場合には活用できるのではないでしょうか。

また、body以外の所でも、さらにこまかくクラスが割り振られていますので、次回からは、その辺りもあわせて、Twenty TenのCSS について調べていきたいと思います。