カテゴリー全体の数が増えてきたので、前から興味のあった「カテゴリー表示のツリー化」をやってみました。
いつも通り小粋空間様の記事、サイドメニューのツリー化スクリプト(改)にしてみたんですが・・・カテゴリー全体がずれてしまってどうにもならず。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...