サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type
以前、Movable Type のツリー化記事で「JavaScript 不要なサイドメニューのツリー化 for Movable Type」を紹介しましたが、当サイトで定番カスタマイズとなっている「サブカテゴリーリストの折りたたみ」と併用する場合の設定方法についてご質問を頂きましたので、本エントリーにて改めてご紹介致します。
このエントリーのカスタマイズを行うことで、スクリーンショットのようにサブカテゴリーリストを折りたたみ+ツリー化することができます。
なお、JavaScript が不要なのはツリー化のみで、折りたたみ動作には必要です。
１．スクリプトのダウンロード
下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。
２．menufolder.js の設定変更
ダウンロードした menufolder.js を任意のエディタで開き、下記の該当部分を青色の内容であることを確認（または修正）してください。
// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応：true
// 従来のカテゴリーに対応：false
var subCategoryCount = true;
：
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする：true
// 無効にする：false
var subCategory = true;
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories = '▼';
var closeMarkForSubCategories = '▲';
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;設定内容の詳細は下記の通りです。
subCategoryCount
- 名称：カテゴリーリスト数計算方法
- 用途：カテゴリーリスト数計算方法を li タグ（サブカテゴリー表示）で計数するか、a タグ（従来の一括表示）で計数するかを指定します。
- 設定値： true：li タグで計数／false：a タグで計数
subCategory
- 名称：サブカテゴリーの折りたたみ有効フラグ
- 用途：サブカテゴリーの折りたたみの有効／無効を設定します。ここでは有効にします。
- 設定値： true：有効／false：無効
openMarkForSubCategories/closeMarkForSubCategories
- 名称：サブカテゴリーの折りたたみマーク
- 用途：サブカテゴリー名横に表示する折りたたみ用リンクのマーク
- 設定値：任意の文字（設定したマークを''で括るように）
offsetForTitleAndMarkOfSubcategory
- サブカテゴリーのタイトルとマークのスペース
- 用途：サブカテゴリーのタイトルとマークの間に挿入する半角空白文字数を指定
- 設定値：0以上
３．スクリプトのアップロード
menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。
４．テンプレートに script 要素追加
サブカテゴリーリストの折りたたみを利用する各テンプレートの </head> の直前に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください（分からなければとりあえずサンプルのまま貼り付けてください）。
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>５．テンプレートにサブカテゴリーリスト表示用タグを追加
折りたたみ+ツリー化用のサブカテゴリーリスト表示用タグ（下記）をテンプレートの任意の位置に設定します。
<MTSubCategories>
<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>
</MTSubCategories>
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>青色は「JavaScript 不要なサイドメニューのツリー化 for Movable Type」のサブカテゴリーリストとの差分を参考までに示しています。
赤色部分は下記を参照して適宜変更してください。
initState
- 名称：初期状態
- 用途：ページを最初に表示した時の折りたたみ状態を指定します
- 設定値： on：開いた状態／off：閉じた状態
またカテゴリーアーカイブページで、どのページでも同じカテゴリーリストを表示したい場合は、上記サブカテゴリーリストの先頭および末尾にある MTSubCategories タグを MTTopLevelCategories タグに変更してください。
６．CSS追加
下記を styles-site.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; /* マークの文字装飾（装飾なし） */
}７．ツリー画像のダウンロード
下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。
保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。
ツリー画像のファイルは６項の CSS（青色部分）で読み込まれますので、ファイル名は一致させてください。つまり、tree_lst_solid.gifをダウンロードする時（またはダウンロード後）、ファイル名は tree_lst.gif に変更してください。
８．画像のアップロード
ダウンロードした画像をメインページと同じディレクトリにアップロードしてください。
以上です。
これでサブカテゴリーリストに折りたたみマークとツリーが表示されればOKです。
