カテゴリー全体の数が増えてきたので、前から興味のあった｢カテゴリー表示のツリー化｣をやってみました。
いつも通り小粋空間様の記事、サイドメニューのツリー化スクリプト(改)にしてみたんですが・・・カテゴリー全体がずれてしまってどうにもならず。CSSで該当箇所を変更してみたものの、状態は変わらない・・・
｢1度丸ごと撤去し、改めて検索｣をかけてProject MultiBurst様のカテゴリー表示等のツリー化を参考にさせていただきました。同じ様に小粋空間様のスクリプトを使っているはずなんですがorz
※おかしくなった時は下手にカスタマイズをするより、1度白紙に戻すのが一番です。
1.スクリプト本体を小粋空間:スクリプトからDL。
2.DLしてきたファイルをローカルサイトパス、つまり$MTBlogURL$の場所にUP。※管理画面→設定→公開→サイト・パスと書かれている部分。
3.ツリー化をしたいテンプレートの＜HEAD＞＜/HEAD＞の間に以下の行を追加。
＜script type="text/javascript" src="＜$MTBlogURL$＞maketree.js" charset="utf-8"＞＜/script＞
｢charset～｣はMovable Typeのエンコードと同じものにする(例えばS-JISやEUC等)
ただ私はサイドバーはIncludeしているので、サイドバー専用のテンプレートがあります。そのページには＜HEAD＞＜/HEAD＞のタグはないんですが1行目に書いてみました。今のところ別に問題なさそうなのでこのまま様子見します。
4.次に
上記のスクリプト紹介ページからツリー用の画像をDL。
5.4でDLした画像をまたローカルサイトパスにUP。
6.テンプレートを下記の様に書き換える。
＜div class="side" id="categories"＞
＜MTSubCategories＞
＜MTSubCatIsFirst＞＜ul＞＜/MTSubCatIsFirst＞
＜MTIfNonZero tag="MTCategoryCount"＞
＜li＞＜a href="＜$MTCategoryArchiveLink$＞" ＞＜$MTCategoryLabel cutfirstchar="7"$＞＜/a＞ [＜$MTCategoryCount$＞]
＜MTElse＞
＜li＞＜$MTCategoryLabel cutfirstchar="7"$＞
＜/MTElse＞
＜/MTIfNonZero＞
＜MTSubCatsRecurse max_depth="3"＞
＜/li＞
＜MTSubCatIsLast＞＜/ul＞＜/MTSubCatIsLast＞
＜/MTSubCategories＞
＜/div＞
＜/div＞
＜script type="text/javascript" language="javascript"＞
＜!--
generateSubcategoryTree();
//--＞
＜/script＞
※＜$MTCategoryLabel～＞の部分はカテゴリー並び替えプラグイン用に書き換えるのを忘れない様にする
7.スタイルシートに下記の部分を追加
ul.tree {
font-size:12px;
list-style:none !important;
margin:0px !important;
padding:0px !important;
}
ul.tree ul {
margin:0px !important;
padding:0px !important;
}
ul.tree li {
background-image:url(tree_lst_solid.gif);
background-repeat:no-repeat !important;
list-style:none !important;
margin:0px !important;
padding:0px 0px 0px 16px !important;
}
ul.tree li.end {
background-image:url(tree_end_solid.gif);
list-style:none;
}
8.後は再構築をして、動作確認をするのみ。
Hide More...
