MT 親子カテゴリーのツリー化

Movable Type
この記事は約5分で読めます。

1 スクリプト(menufolder.js)をダウンロードします。
menufolder.js
2 スクリプト(menufolder.js)をメインページと同じディレクトリにアップロードします。
3 </head> の直前に次のコードを追加します。

<script type=”text/javascript” src=”<$MTBlogURL$>menufolder.js” charset=”utf-8″></script>

4 テンプレートに次のコードを追加します。

<MTTopLevelCategories><MTSubCatIsFirst><MTHasParentCategory><div id=”subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list”></MTHasParentCategory><ul class=”tree”></MTSubCatIsFirst><MTIfNonZero tag=”MTCategoryCount”>
<li class=”tree<MTSubCatIsLast>_end</MTSubCatIsLast>”><MTHasSubCategories><div class=”subcategories” id=”subcategories<$MTCategoryID$>name”></MTHasSubCategories><a href=”<$MTCategoryArchiveLink$>” title=”<$MTCategoryID$>”><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories></div></MTHasSubCategories><MTElse><li class=”tree<MTSubCatIsLast>_end</MTSubCatIsLast>”><MTHasSubCategories><div class=”subcategories” id=”subcategories<$MTCategoryID$>name”></MTHasSubCategories><MTCategoryLabel><MTHasSubCategories></div></MTHasSubCategories></MTElse></MTIfNonZero><MTSubCatsRecurse max_depth=”3″></li><MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast></MTTopLevelCategories><script type=”text/javascript”><!–<MTTopLevelCategories><MTHasSubCategories>FoldNavigation(‘subcategories<$MTCategoryID$>’,’initState’,false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories><MTSubCatsRecurse></MTTopLevelCategories>//–></script>

5 スタイルシートに次のコードを追加します。

ul.tree {
margin: 0 0 0 3px;
padding: 0;
font-size: 13px;
list-style: none;
}
ul.tree ul {
margin: 0;
padding: 0;
}
ul.tree li {
margin: 0px;
padding: 0 0 0 17px;
background: url(画像2URL) no-repeat 1px 0.15em;
list-style: none;
}
ul.tree li li {
margin: 0;
padding: 0 0 0 15px;
background: url(画像URLtree_lst) no-repeat 4px 0;
list-style: none;
}
ul.tree li li.tree_end {
background: url(画像URLtree_end) no-repeat 4px 0;
list-style: none;
}

画像2URL 画像URLtree_lst 画像URLtree_end
(参考記事)
小粋空間:サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type  サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する

コメント