Movable Typeのカテゴリをツリー化してみる

カテゴリの表示をツリー化したらカッコイイかもと思って、
やっちゃった♪

すんげぇ~簡単にいきました。

カテゴリーを変更するので、メイン・メニューから移動
(メイン・メニュー > サイト名 > テンプレート > メインページ)
のカテゴリー部分ですね。

Categories(カテゴリーリスト:サブカテゴリー表示)

<MTSubCategories>
<MTSubCatIsFirst><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>">
<a href="<$MTCategoryArchiveLink$>" title="
<$MTCategoryDescription$>"><MTCategoryLabel></a> 
[<$MTCategoryCount$>]
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>">
<MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>

上記に変更。

でCSS追加。
ツリーの画像のパスは、自分の画像のパスに変更。

ul.tree {
margin: 0!important;
padding: 0!important;
font-size: 9px;
list-style: none!important;
}
ul.tree ul {
margin: 0!important;
padding: 0!important;
}
ul.tree li {
margin: 0!important;
padding: 0 0 0 16px!important;
background-image: url(tree_lst.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.tree_end {
background-image: url(tree_end.gif);
list-style: none;
}

その後はツリー画像のダウンロード

小粋空間さんのサイトに

○実線:tree_lst_solid.gif / tree_end_solid.gif
○点線:tree_lst_dotted.gif / tree_end_dotted.gif

という箇所があるので、そこからダウンロード可能です。

小粋空間URL
http://www.koikikukan.com/archives/cat_51.php

ダウンロードしたら、CSSで指定した画像のパスの場所にアップ。

これで完了。
すんごい簡単だったんで、是非試してみてください。
いや~小粋空間さんのサイトはすんごい参考になりました。
これからも要チェックですな!!

参考URL(小粋空間)
http://www.koikikukan.com/archives/cat_51.php

投稿者:

kishir

趣味: sk8, ピスト、ターンテーブル、レコード 仕事: Python, Objective-C, PHP, JavaScript

One thought on “Movable Typeのカテゴリをツリー化してみる”

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です