●Category List をツリー化する
サイドバーのカテゴリーリストをツリー表示させてみました。
今回参考にさせていただいたのは､
小粋空間様と、
MovableType備忘録様です。
ありがとうございました。
まず、小粋空間様から JavaScript(maketree.js) と、
ツリー表示用の点線画像(実線画像もあります）を download させてもらいます。
maketree.js はトップディレクトリに､
2 つの画像ファイルは画像用に作ったフォルダに upload します。
次にメインページテンプレートの修正をします。
赤文字部分を書き加えました。
<MTIfArchiveTypeEnabled type="Category">
<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div id="categories" class="module-content">
<MTTopLevelCategories>
<MTSubCatIsFirst ><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item">
<a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"
style="text-decoration:none;">
<MTCategoryLabel pmhc="">[<$MTCategoryCount$>]</a>
<MTElse>
<li class="module-list-item"><MTCategoryLabel pmhc="">
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse >
</li>
<MTSubCatIsLast ></ul></MTSubCatIsLast>
</MTTopLevelCategories>
<script type="text/javascript">
<!--
generateSubcategoryTree("");
//-->
</script>
</div>
</div>
</MTIfArchiveTypeEnabled>
<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div id="categories" class="module-content">
<MTTopLevelCategories>
<MTSubCatIsFirst ><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item">
<a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"
style="text-decoration:none;">
<MTCategoryLabel pmhc="">[<$MTCategoryCount$>]</a>
<MTElse>
<li class="module-list-item"><MTCategoryLabel pmhc="">
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse >
</li>
<MTSubCatIsLast ></ul></MTSubCatIsLast>
</MTTopLevelCategories>
<script type="text/javascript">
<!--
generateSubcategoryTree("");
//-->
</script>
</div>
</div>
</MTIfArchiveTypeEnabled>
さらにテンプレートの <head>～</head> 間に、
下記文字コードを追加します。
<script type="text/javascript" src="<$MTBlogURL$>maketree.js" charset="utf-8"></script>
最後に、下記ツリー表示用のコードをスタイルシートに追加します。
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: 0px 0px 0px 16px!important;
background-image: url(パスを通す/tree_lst_dotted.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(パスを通す/tree_end_dotted.gif);
list-style: none;
}
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: 0px 0px 0px 16px!important;
background-image: url(パスを通す/tree_lst_dotted.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(パスを通す/tree_end_dotted.gif);
list-style: none;
}
リストが見やすくなって､いー感じです。
少しずつですが､カスタマイズが進んできて楽しいです。
