●Subcategory List を折りたたむ
サイドバーのカテゴリーリスト、
サブカテゴリーも含めて全てを表示すると、
かなり縦長になってきているので､
サブカテゴリーリストを折りたたみ式にしてみました。
今回も参考にさせていただいたのは､
小粋空間様です。
いつもありがとうございます。
まず、小粋空間様から JavaScript(menufolder.js) を download させてもらい、
ブログのトップディレクトリに upload します。
次にメインページテンプレートの修正をします。
赤文字部分を書き加えました。
<MTIfArchiveTypeEnabled type="Category">
<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div id="categories" class="module-content">
<MTTopLevelCategories>
<MTSubCatIsFirst >
<MTHasParentCategory>
<div id="subcategories<MTParentCategory><$MTCategoryID$>
</MTParentCategory>list"></MTHasParentCategory>
<ul class="module-list">
</MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item">
<MTHasSubCategories>
<div class="subcategories" id="subcategories<$MTCategoryID$>name">
</MTHasSubCategories>
<a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"
style="text-decoration:none;">
<MTCategoryLabel pmhc="">[<$MTCategoryCount$>]</a>
<MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="module-list-item">
<MTHasSubCategories>
<div class="subcategories" id="subcategories<$MTCategoryID$>name">
</MTHasSubCategories>
<MTCategoryLabel pmhc="">
<MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse >
</li><MTSubCatIsLast></ul>
<MTHasParentCategory></div>
</MTHasParentCategory>
</MTSubCatIsLast>
</MTTopLevelCategories>
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories
<$MTCategoryID$>','off',false);
</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>
<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 >
<MTHasParentCategory>
<div id="subcategories<MTParentCategory><$MTCategoryID$>
</MTParentCategory>list"></MTHasParentCategory>
<ul class="module-list">
</MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item">
<MTHasSubCategories>
<div class="subcategories" id="subcategories<$MTCategoryID$>name">
</MTHasSubCategories>
<a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"
style="text-decoration:none;">
<MTCategoryLabel pmhc="">[<$MTCategoryCount$>]</a>
<MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="module-list-item">
<MTHasSubCategories>
<div class="subcategories" id="subcategories<$MTCategoryID$>name">
</MTHasSubCategories>
<MTCategoryLabel pmhc="">
<MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse >
</li><MTSubCatIsLast></ul>
<MTHasParentCategory></div>
</MTHasParentCategory>
</MTSubCatIsLast>
</MTTopLevelCategories>
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories
<$MTCategoryID$>','off',false);
</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>
<script type="text/javascript">
<!--
generateSubcategoryTree("");
//-->
</script>
</div>
</div>
</MTIfArchiveTypeEnabled>
さらにテンプレートの <head>～</head> 間に、
下記文字コードを追加します。
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>
最後に、スタイルシートに下記コードを追加します。
.subcategories a.foldmark {
font-size:9px; /* マークのフォントサイズ */
text-decoration: none; /* マークの文字装飾（何も表示しない） */
}
font-size:9px; /* マークのフォントサイズ */
text-decoration: none; /* マークの文字装飾（何も表示しない） */
}
コンパクトになりました。
▼や▲を、何度も無意味にクリックリッとしてしまいます。
