テンプレをベースにしてしまう 第8回 パーソナルブログの作り方

こんにちは、TRANSのあらたです。ではでは、話を戻して、NPtech.jpを元にパーソナルブログの作り方の話などを。

テンプレートを選ぶ

デザインが決まったら、あとはコーディングですね。でも、ちょっと待ってください。もちろん、フルスクラッチでコーディングしてもよいのですが、今回はちょっと違った形でやってみます。

テンプレートを使ってみましょう。実際、NPtech.jpはCSSこそ自分で書いていますが、HTMLはテンプレートにかかりきりです(部分的に自分で付け足したりしていますが)

使っているテンプレートは、次期WordPressのデフォルトテンプレの呼び名が高い「Sandbox」です。これにHTMLを任せてしまい、CSSでデザインを制御する、そんなフローですね。

日本語ではこのあたりのドキュメントで読めます。

で、何が嬉しいのかについてちょっとだけ触れておきます。

コードサンプル

例えば、トップページのbody要素には以下のようなコードが入ります。

<body class="wordpress y2008 m11 d07 h18 home blog loggedin">

で、記事の場合はこんな感じ。

<body class="wordpress y2008 m11 d07 h18 single postid-126 s-y2008
s-m11 s-d06 s-h18 s-category-review s-tag-conference s-tag-nten
s-tag-us s-author-admin loggedin">

はたまた、ページも違います。

<body class="wordpress y2008 m11 d07 h18 page pageid-2 page-author-arata-kojima loggedin">

とこのようにbody要素、記事、コメントの3箇所にこのようなPHPで制御されたclass属性の値が自動的に入るわけです。あとは、CSSでこれらのclass属性を起点にデザインしてやればよいわけです。こういうのができるのがSandboxなわけです。

そのため、NPtech.jpにおいてもほとんどHTMLは触らずに(部分的にIE6に対応させるためにdiv要素を入れ子にしたりしましたが)あのようなデザインを作っているわけです。

ちなみに、SandboxはWordCampでも紹介されています。

コメントをどうぞ

トラックバック URL

トラックバック