サブカテゴリーリストの折りたたみ+ツリー化

こんにちは_(:3」∠)_
自宅サーバーの構築を始めてからというもの、自分に対する覚え書き記事を書いてたらカテゴリが沢山できて長くなってきたので、カテゴリーの折りたたみを導入することにしました。
なお、今回のカスタマイズは 小粋空間 さんのカスタマイズ記事を参考にさせていただきました。

■スクリプトのダウンロード
menufolder.js7.00 をダウンロードして設定を編集します。
小粋空間さんの記事には数カ所を変更する旨が書いてあったんですが、ダウンロードしてきたmenufolder7.00では、サブカテゴリーのタイトルとマークのスペースの項目だけ編集すれば良い様になっています。

// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;

編集したスクリプトをMovable Typeフォルダ直下にアップロードします。

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

■スクリプト要素追加

ブログ管理画面からデザイン>テンプレートと進み、テンプレートモジュール内のHTMLヘッダーを開いて、タグを追記します。

■ウィジェットテンプレートの書き換え
ブログ管理画面からデザイン>ウィジェットと進み、ウィジェットテンプレート内のカテゴリアーカイブをバックアップ(複製)します。
複製したテンプレートをバックアップとして、元のテンプレートを開いてタグを全て書き換えます。

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

■css追加
このブログでは、使用しているテーマをコピーして使用しているので、当該テーマのフォルダ内にあるscreen.cssへ追記しています。

ul.tree {
    margin: 0 0 0 5px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}

ul.tree ul {
    margin: 0;
    padding: 0;
}

ul.tree li {
    margin: 0;
    padding: 0 0 0 13px;
    background: url(tree_lst.gif) no-repeat 2px 0;
    list-style: none;
}

ul.tree li.tree_end {
    background: url(tree_end.gif) no-repeat 2px 0;
    list-style: none;
}

.subcategories a.foldmark {
    font-size:9px; /* マークのフォントサイズ */
    text-decoration: none; /* マークの文字装飾(装飾なし) */
}

■ツリー画像のダウンロード
ツリー表示の画像は実線の画像を使用します。

実線: tree_lst_solid.gif  /  tree_end_solid.gif 

■画像のアップロード
ダウンロードした画像ファイルのファイル名から「_solid」の部分を取り除いたら、アップロードします。
小粋空間さんの手順には「ダウンロードした画像をメインページと同じディレクトリに~」と書いてあったのですが、Movable Typeフォルダ直下に画像をアップロードしてもツリーが表示されなかったので、使用しているテーマのフォルダにアップロードしたらきちんと表示されるようになりました。

これで再構築して設定完了です。
かなりすっきりしました(‘、3_ヽ)_

この記事はいかがでしたか?
良かったらポチッとお願いします!励みになります!!