2005年03月08日
「カテゴリー」をツリー化しました。
参考にしたのは、こちらです。「小粋空間」さんの提供して頂いたページです。（※一部引用させていただいています。）
カテゴリーアーカイブで全カテゴリーリストを表示
サイドメニューのツリー化スクリプト（改）
カテゴリーリストをサブカテゴリー表示に切り替える
色々ページをカスタマイズして何処どういじったか分からなくなり、ツリー化もどれが私のカスタマイズに
適しているのか色々参考にするページをとびとびに眺めてなんだ分からなくなり、実は少し苦労しました。
折りたたみにしていたので結局こちら「サイドメニューのツリー化スクリプト（改）」
を参考にカスタマイズしました。詳しくはそちらのページを参考ください。
探すのに苦労したわりにあっさりできました。
手順です。
maketree.js ダウンロード（ツリー化するスクリプトです）
公開するBlogのディレクトリにアップロードします。（注意：ｍｔフォルダ（mt,cgiがある）ではありません。）
私の場合は、新しいインデックステンプレートを作成しました。その方がスッキリしますし、タグを誤って
削除したりするケアレスミスも少なくて済む思いもありまして、テンプレートを作成しました。
管理メニューの「テンプレート」をクリックし、次ページの「インデックス・テンプレート」の右端にある「新しいインデックス・テンプレートを作る」をクリック。次ページの各項目に以下の内容を設定してください。
※サブカテゴリーの折りたたみスクリプトも同時に追加してます。
テンプレートの名前：カテゴリーリスト
出力ファイル名：categorylist.html
このテンプレートにリンクするファイル：（無記入）
再構築オプション：チェックをする
<!--
.subcategories a.foldmark {
font-size:9px; /* マークのフォントサイズ */
text-decoration: none; /* マークの文字装飾（何も表示しない） */
}
-->
</style>
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
<script type="text/javascript" language="javascript">
<!--
generateSubcategoryTree();
//-->
<!--サブカテゴリー折りたたみスクリプト-->
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','on',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse max_depth="3">
</MTTopLevelCategories>
//-->
</script>
ツリー化したいページに下記タグをCategoryに相当する箇所に入れ替えます。
<$MTInclude file="categorylist.html"$>
こんな感じになります。
Categories
</div>
<div class="side"id="categorylist">
<$MTInclude file="categorylist.html"$>
</div>
<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>
maketree.js インクルード文挿入
ツリー化スクリプトを利用する各テンプレートの <head>～</head>の間に下記のタグを追加してください。
charset 属性は maketree.js の文字コードを指定してください。
charset="utf-8"></script>
こちらの画像をダウンロードしてローカルサイトへアップロードします。実線と点線は好みで
ダウンロードしてください。
実線：tree_lst_solid.gif/ tree_end_solid.gif
点線：tree_lst_dotted.gif/ tree_end_dotted.gif
スタイルシート追加
スタイルシート（styles-site.css）の.sideの下辺りに下記のクラス指定を追加します。
画像のアドレスは、アップロードしたアドレスを指定します。
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.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(tree_end.gif);
list-style: none;
}
と一応こんな感じで折りたたみで尚且つツリー化できました。
詳しくは、冒頭の紹介サイト「小粋空間」さんをご参考ください。
追記：テンプレートを作成した場合、スタイルシート（styles-site.css）に
margin-top: 0px;
margin-bottom: 0px;
list-style-type: circle;
.subcategories a.foldmark {
font-size:9px; /* マークのフォントサイズ */
text-decoration: none; /* マークの文字装飾（何も表示しない） */
}
を加えても反映しません。当初スタイルシートに上記を加えても何故マーク▽△リンクのアンダーラインが消えないの分りませんでした。
テンプレート（categorylist.html）を新に作成した場合は、そこに直接
<!--
.subcategories a.foldmark {
font-size:9px; /* マークのフォントサイズ */
text-decoration: none; /* マークの文字装飾（何も表示しない） */
}
-->
</style>
と付け加える事により解消されます。
