カテゴリーのツリー化（件数表示）
ＭＴ３．１用のカテゴリーのツリー化は、よく見かけるのですが、
３．２用がそのまま使えるのか分かりませんでした。
とりあえず上手くいきました。
まず、・・
①メインページの
--------------------------------------------------
<MTTopLevelCategories>
<MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>[<$MTCategoryCount$>]
<MTElse>
<li class="module-list-item"><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
---------------------------------------------------
このタグを、以下に入れ替え。
---------------------------------------------------
<div id="categorylist">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<li>
<MTIfNonZero tag="MTCategoryCount"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>[<$MTCategoryCount$>]
<MTElse><$MTCategoryLabel$></MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
<script type="text/javascript">
<!--
generateTreeForTreeStructure("categorylist");
//-->
</script>
---------------------------------------------------
ちなみに、カテゴリの件数は、このタグ[<$MTCategoryCount$>]です。
ソースに張るとすぐ表示できます。
②小粋空間さんのサイトからツリー化するＪａｖａＳｃｒｉｐｔｓをダウンロード。
③maketree.js をＢｌｏｇがあるディレクトリへアップロード。
④カテゴリ表示を変更するテンプレートのヘッダー部の</head>の前に
<script type="text/javascript" src="<$MTBlogURL$>maketree.js" charset="utf-8"></script>
を追加する。EUCの方は、charset="euc">に変更。
⑤ツリー画像をダウンロード（点線の方が、ＩＥ以外でもきちんと表示されるそうです）
点線：tree_lst_dotted.gif / tree_end_dotted.gif
リンクを右クリックして「対象をファイルに保存」を選択します。
保存したファイル名は、スタイルシートのファイル名に合せる。
私は、tree_lst.gifに変えています。
⑥スタイルシートの変更
新たに、以下を追加（私は先頭に追加しました）。
/* カテゴリツリー化 */
ul.tree {
margin: 0px!important;
padding: 0px!important;
font-size: 9px;
list-style: none!important;
}
ul.tree ul {
margin: 0px!important;
padding: 0px!important;
}
ul.tree li {
margin: 0px!important;
padding: 5px 0px 0px 16px!important;
background-image: url(tree_lst.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(tree_end.gif);
list-style: none;
}
私の場合、ツリーがずれるので、
ul.tree li {
margin: 0px!important;
padding: 0px
-------------------------------
ul.tree li {
margin: 0px!important;
padding: 5px
-------------------------------
と変更しました。
詳しくは、ブログ簡単パワーアップ Movable Type スーパーカスタマイズテクニックの７５ページをご覧下さい。
