2006年08月21日

●JavaScript 不要なサイドメニューのツリー化 for Movable Type

Movable Type で JavaScript を用いずにサイドメニューのリストをツリー化するカスタマイズです。

以前、「サイドメニューのツリー化スクリプト(改)」という記事で Movable Type の各リストを JavaScript を用いてツリー化するカスタマイズを紹介しておりますが、3.2 以降で新しいMTタグ *1 が追加されたことで、ほとんど全てのリストについて、JavaScript を使用せずにツリー化が可能であることが判明しました。

この方法は JavaScript を用いたカスタマイズと比較して、下記のメリットがあります。

  • ブラウザで JavaScript を OFF にしている場合でもツリー表示が可能
  • JavaScript 起動による表示遅延がなし
  • JavaScript 関連のカスタマイズが不要

ということで、Movable Type のツリー化については本エントリーの方法を推奨します。

1.基本的な設定方法

JavaScript を用いないため、ul 要素、li 要素に class 属性を記述します。

  • ul 要素:class="tree" を追加
  • li 要素:class="tree[MT開始タグ]_end[MT終了タグ]" を追加

「最近のエントリー」の設定例

<ul class="tree">
<MTEntries lastn="10">
<li class="tree<MTEntriesFooter>_end</MTEntriesFooter>"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

[MT開始タグ] と [MT終了タグ] は、各リストの最後を示すMTタグです。リストによって用いるMTタグは異なります。具体的な設定内容については2項を参照してください。

ul 要素の class 属性に "tree" を設定しているのは、通常の ul 要素とスタイルを切り分けることを前提にしているためです。ul 要素を一律ツリー表示として使用する場合は、下記の方法でも大丈夫と思います。

  • ul 要素:何も設定しない
  • li 要素:[MT開始タグ]class="end"[MT終了タグ] を追加

「最近のエントリー」の設定例

<ul>
<MTEntries lastn="10">
<li<MTEntriesFooter> class="end"</MTEntriesFooter>><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>