記事本文
予め設定された class や id
Movable Type 3.2 のデフォルトテンプレートの酷さは Movable Type 3.2 Beta 2 の華麗な div 捌きを見よ ! で述べた通りですが、 Movable Type 3.2 の Style Library と hxxk.jp の CSS でも触れた通り、 Style Library があるためにテンプレートの構造を変更するカスタマイズに踏み切れなくなってしまう人が出る可能性があります。
そういうことを考えていたら、 tDiary の元ユーザからも同様のことが、 nulog > 2005 > 10 > 03 - CSS をテーマにするのはいいけれど @tDiary で触れられていました。
構造が気持ち悪い。 とりあえず tDiary の話。 はてなにも言えるけどはてなはソースを変えられない時点で「諦め」があるので論外。
tDiary には CSS によるテーマ機能があって、(たぶん) それがウリなんだろうけど、そのせいで構造が変えにくい。 「変えにくい」ってのはテーマを使いたいからでなく、スキンファイル*1 が難読になっていたり、プラグインの吐くソースがキモかったりする。 「どうせテーマを使ってもらうんだから構造は決めうち。スキンファイルは開発側が編集できればいいや」 みたいな。
デフォルトの状態であれこれ class やら id やらが無節操に振られていると、それに合わせた CSS を書かなければならず、またそうやって書かれた CSS を使用してしまったら、それを適用する HTML の構造は容易に変えられなくなります。
だったらどうすれば良いか。
構造をできる限りストイックなものにして、 CSS は class セレクタや id セレクタに頼りすぎないようにすれば良いと考えました。
そうすれば、例えばある人が後から
「自分はこの部分を
<div class="hoge">
～
</div>
で囲んで、
div.hoge{ color: #ffe; }
という指定をしたいな」
というようにカスタマイズをしたいと思っても、自分で書き加えれば済みます。
少なくとも既存の CSS との兼ね合いを考える可能性はぐっと低くなるはず。
Movable Type のテンプレートを作ってみた
ということで、できる限りストイックに、というコンセプトで Movable Type のテンプレートを書いてみました。 いやまあ nulog > 2005 > 10 > 03 - CSS をテーマにするのはいいけれど @tDiary を目にする前からテンプレートの構想はあったのですけど。 ちなみに、全く class を設定しないという縛りを自分に課してみようかとも思いましたが、使った方が良い部分まで制限するのはどうかと思い、最低限は使用しています。
- 各テンプレートごとの body 要素に、それぞれのテンプレートを表す class 名
- main-index
- master-archive-index
- category-archive
- date-based-archive
- individual-entry-archive
- comment
- search
- h2 レベル以下の見出しが属する div 要素に section
- 記事アーカイブを内包する div 要素に entries 、個別記事を内包する div 要素に entry
- 記事ごとのメタデータを記述する dl 要素に metadata
- アーカイブテンプレートにて、前後のページおよび上位カテゴリへのナビゲーションを行う ul に navigaton
もう少し子セレクタなどをうまく活用すれば、 metadata と navigation の 2 つの class は指定しなくても良くなるかもしれません。
まだ配布はしません
この Movable Type テンプレートは近いうちに配布をしようと考えていますが、まだ完成形ではありません。 もう少し HTML の構造や見出しの扱いに検討の余地がありそうなので、配布を行う前にサンプルの方を公開して、自分じゃ気付いていない点を指摘していただこうと思っているからです。
ということで、 Web Standards with MT ver.3.2 Strict のサンプルページを見て、突っ込みどころを見つけられたストリクタの方々は、 Web Standards with MT ver.3.2 Strict : この構造やマークアップが変だよ、などのご意見はこの記事へ。へコメント等でご意見いただけると幸いです。
