Twenty Twelveをカスタマイズするなら、レイアウトのおおよその構造を把握しないと始まりません。そこで、TOPページ・カテゴリページ・個別記事ページについて、ざっくりとボックスの構造を書いてみました。

TOP・カテゴリ

これを見る限りTwenty Elevenとボックスの構造はあまり違いはなさそうですが、油断は出来ません。実はstyle.cssにおけるセレクタの使い方が全然違うのです。

Twenty Elevenではセレクタとしてidがよく使われていましたが、Twenty Twelveではセレクタとして基本的にはクラス名がよく使われます。

たとえば、上の図の「div #page .site」というボックスは、Twenty Elevenのstyle.cssではセレクタとして#pageが使われていましたが、Twenty Twelveでは.siteの方が使われています。

style.cssをいじる時には注意しないといけません。

なお、header内部,article内部については別ページで詳しく図示しています。

個別記事ページ

articleが1個しかないのと、コメント欄があることを除けば、TOPページ・カテゴリページとそんなに違いはありません。

TOPページ・カテゴリページと同様、header内部,article内部については別ページで詳しく図示しています。