MT - カテゴリーごとにリストタグで纏める

Sunday, Aug 07, 2005 - 21:35 +09:00

カテゴリーにサブ・カテゴリーを持たせ、階層構造を表現できるのは、MT3.1からの優れたシステム。通常は<ul>タグの中にさらに<ul>タグを入れ子にして階層的に見せるのだけど、はて、これはちょっとばかし鬱陶しくはないだろうか。

これは順不同リストを利用した、典型的な階層表示。一見して分類が判るし、使いやすい。でも見た目的にガクガクしててスッキリしない。もちろん好みがあるだろうけど、少なくともSig.は幅200px前後の狭いエリアで使うことに違和感を感じます。ということで、なんとかしてみよう。

さて、サブ・カテゴリを使うこと自体は悪いことじゃない。カテゴリが多くなった時に区分けすることで、利用者が直感的に選択できるようになるわけだし。この場合だって、見た目的にすっきりしないだけでサブカテゴリーが悪い訳じゃない。だから、いちばん簡単なのは入れ子リストのマージンを消して、擬似的に並べること。

こうすれば、見た目的にはガクガク感を無くすことができる。上の例では全て一つのリストに見えるけど、入れ子リストにmargin-bottomを指定すれば親カテゴリごとの区分けも容易です。でも、スマートじゃない。見た目だけ一つのリストにしようというなら、HTMLタグも一つに纏めてしまえばいい話。どのみちユーザーが受け取る印象は同じなのだから、無駄に難しくしてるだけってことになる。

とゆうことで、親カテゴリ＋サブ・カテゴリを一つのリストとして捉え、カテゴリー全体のリストを複数の<ul>で構成してみることにする。その場合のMTテンプレート・タグは、こうなる。

<h2>カテゴリー</h2>
<MTTopLevelCategories><MTHasNoParentCategory><ul>
</MTHasNoParentCategory><li><MTIfNonZero tag="MTCategoryCount"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> <em><$MTCategoryCount$> entries</em><MTElse><MTCategoryLabel></MTElse></MTIfNonZero></li>
<MTHasParentCategory><MTSubCatIsLast></ul>
	
</MTSubCatIsLast></MTHasParentCategory><MTSubCatsRecurse><MTHasNoParentCategory><MTHasNoSubCategories></ul>
	
</MTHasNoSubCategories></MTHasNoParentCategory></MTTopLevelCategories>

このタグの出力結果が以下。

<h2>カテゴリー</h2>
<ul>
<li><a href="" title="">親カテゴリ</a> <em>2 entries</em></li>
<li><a href="" title="">サブ・カテゴリ</a> <em>2 entries</em></li>
<li><a href="" title="">サブ・カテゴリ</a> <em>2 entries</em></li>
</ul>

<ul>
<li><a href="" title="">親カテゴリ</a> <em>2 entries</em></li>
<li><a href="" title="">サブ・カテゴリ</a> <em>2 entries</em></li>
</il>
<ul>

簡単に解説すると、親カテゴリで<ul>を宣言し、最後のサブ・カテゴリで</ul>を宣言するってだけ。とはいえ、それだけだと親カテゴリのみ（サブ・カテゴリが無い）の場合に妙になるから、「サブ・カテゴリが無ければ</ul>」って条件も付けておく。改行の仕方が独特なのは、出力先のソースコードが綺麗になるように（重要！）。

この方法だと、左側が揃っていてスッキリする訳です。応用すればリストを</dl>にしてみたり、とかも出来そうです。

posted in Tool Trackback (0)

Trackback

このエントリーのトラックバックURL
http://rospear.info/other/mt-tb.cgi/51

« Previous Entry - Next Entry »