Movable Type 備忘録

MovableTypeのカテゴリ一覧などをツリー表示する

Jan282006
Author: bzbell
Categories: Customize
Tags: Customize, JavaScript, MovableType, Sidebar

Next Page: MovableTypeで楽にリダイレクトする
Prev Page: Movable Type のエントリに絵文字を入れてみる

カテゴリ一覧やあるエントリの最新コメント一覧などをツリー表示にするととても見やすいですよね
わたしのサイトでもカテゴリ一覧をツリー表示してみました。

ということで、今回はカテゴリ一覧などをツリー表示するカスタマイズの紹介です。

カスタマイズ方法

カテゴリ一覧などをツリー表示させるには、maketree.js JavaScriptで行います。
このJavaScriptは、リストタグ( <ul> ～ </ul> )の構造を解析して、ツリー画像に割り当ててくれています。

▼maketree.js JAVAスクリプトの入手はこちらから▼
http://www.koikikukan.com/scripts.php

ツリー画像をアップロードします。
ツリー画像は、小粋空間さんから頂きます。
スクロールしていくと、「5.画像のダウンロード」という項目があります。ツリーの線には、実線と点線が用意されていますので、好みによって入手してください。

実線表示したい人：
tree_lst_solid.gif
tree_end_solid.gif
点線表示したい人：
tree_lst_dotted.gif
tree_end_dotted.gif

ダウンロードしたら、サーバに2つのツリー画像をアップロードしてください。

入手したJavaScriptをアップロードします。
アップロード先はどこでも構いません。

メインページのテンプレートを変更します。
カテゴリ一覧表示しているコードを以下のツリー表示するコードと差し替えます。

<div id="category-tree">
<MTTopLevelCategories>
    <MTSubCatIsFirst><ul></MTSubCatIsFirst>
    <li>

    <MTIfNonZero tag="MTCategoryCount">
        <a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel$>"><$MTCategoryLabel$></a> [<$MTArchiveCount$>]
      <MTElse>
        <$MTCategoryLabel$>
      </MTElse>
    </MTIfNonZero>

    <MTSubCatsRecurse max_depth="3">
    </li>
    <MTSubCatIsLast></ul></MTSubCatIsLast>
  </MTTopLevelCategories>
  <br />
</div><!-- category tree -->

<script type="text/javascript">
<!--
generateTreeForTreeStructure("category-tree");
//-->
</script>

青い字の<div>～</div>までのリスト構造を解析してツリー表示されます。
そのすぐ下に、赤い字のJavaScriptを組み込みます。その際、緑のID名を必ず合わせてください。

ヘッダ部にJavaScriptの宣言を定義します。
ヘッダ部( <head> ～ </head> )の間に以下のコードを追加してください。


<script type="text/javascript" src="<$MTBlogURL$>maketree.js" charset="<$MTPublishCharset$>"></script>

青い字の部分を、JavaScriptをアップロードしたパスに変更します。
追加したら、保存して再構築します。

スタイルシートにツリー表示用のスタイルを追加します。
以下は、ツリー表示用のコードです。

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(../images/tree_lst.gif);
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.end {
    background-image: url(../images/tree_end.gif);
    list-style: none;
}

青い字のツリー画像イメージのパスを、自分の環境に合わせて変更してください。
また、a:link、a:active、a:hover のそれぞれに background:none;を指定している場合は、その属性を削除してください。
変更したら、保存して再構築します。

以上で、カテゴリ一覧をツリー表示することができました。