●MovableTypeカテゴリリストのツリー化
友人の音声ファイルデータベース作成のテストをするために試験的にカテゴリを増やしてみた。
カテゴリリストが増えると階層構造が把握しにくくなる。
そこでカテゴリリストのツリー化をすることにした。
ツリー化にはJavaScriptとCSSで実現する。
ツリーその物の部分はgif画像で表示する。
詳細は小粋空間さんのところで書かれているので、ここではメモ書き程度にとどめる。
1.まずはJavaScriptのmaketree.jsの内容をコピペしてtextに保存する.
エンコードはUTF-8。
ファイル名をmaketree.js と保存して、自分のサーバーのBlogディレクトリに置いておく。
2.ツリー表示するページのテンプレートコードを一部追加。
<head>~</head> の間に下記のタグを追加する。
<script type="text/javascript" src="<$MTBlogURL$>maketree.js" charset="utf-8"></script>
サブカテゴリの表示部分を下記に書き換える。
<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">
<!--
generateSubcategoryTree();
//-->
</script>
3.スタイルシートに以下のコードを追加
ul.tree {
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;
}
あとはコードに指定されているgif画像、tree_list.gif , tree_end.gif をダウンロード。
これをベースに自分のサイトに合うように加工を加える。
私のサイトはかなり薄めのデザインにしているからそのままではちょっと濃すぎて使いもににならない。
「ツリーを採用しましたっ!」となんて主張はいらないのでほのかに見える程度に色を調整した。
どちらかというとこの調整が一番時間がかかったくらい他の作業は楽にこなせた。
以上でツリー表示になった。
あとはアーカイブページにも同じ処理をすればメニューのあるところは全てツリー表示になる。
ツリー表示にはこのほかに月別アーカイブにも可能らしいが、今のところ昨年の12からのエントリしかないので必要はない。
もう少し数が増えて全体感が把握しにくくなったら採用しようと思う。
つぎはサブカテゴリの折りたたみ化に挑戦してみよう。