●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>