情報の海の中で

①メインページの
--------------------------------------------------
 <MTTopLevelCategories>
                        <MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>
                           <MTIfNonZero tag="MTCategoryCount">
                           <li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>[<$MTCategoryCount$>]
                           <MTElse>
                           <li class="module-list-item"><MTCategoryLabel>
                           </MTElse>
                           </MTIfNonZero>
                              <MTSubCatsRecurse>
                           </li>
                        <MTSubCatIsLast></ul></MTSubCatIsLast>
                       </MTTopLevelCategories>
---------------------------------------------------
このタグを、以下に入れ替え。

---------------------------------------------------
<div id="categorylist">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<li>
<MTIfNonZero tag="MTCategoryCount"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>[<$MTCategoryCount$>]
<MTElse><$MTCategoryLabel$></MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
<script type="text/javascript">
<!--
generateTreeForTreeStructure("categorylist");
//-->
</script>
---------------------------------------------------

ちなみに、カテゴリの件数は、このタグ[<$MTCategoryCount$>]です。
ソースに張るとすぐ表示できます。
②小粋空間さんのサイトからツリー化するＪａｖａＳｃｒｉｐｔｓをダウンロード。
③maketree.js をＢｌｏｇがあるディレクトリへアップロード。
④カテゴリ表示を変更するテンプレートのヘッダー部の</head>の前に
<script type="text/javascript" src="<$MTBlogURL$>maketree.js" charset="utf-8"></script>
を追加する。EUCの方は、charset="euc">に変更。
⑤ツリー画像をダウンロード（点線の方が、ＩＥ以外でもきちんと表示されるそうです）
点線：tree_lst_dotted.gif / tree_end_dotted.gif
リンクを右クリックして「対象をファイルに保存」を選択します。
保存したファイル名は、スタイルシートのファイル名に合せる。
私は、tree_lst.gifに変えています。
⑥スタイルシートの変更
新たに、以下を追加（私は先頭に追加しました）。
/* カテゴリツリー化　 */
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: 5px 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;
}

私の場合、ツリーがずれるので、
ul.tree li {
    margin: 0px!important;
    padding: 0px
-------------------------------
ul.tree li {
    margin: 0px!important;
    padding: 5px
-------------------------------
と変更しました。

詳しくは、ブログ簡単パワーアップ Movable Type スーパーカスタマイズテクニックの７５ページをご覧下さい。