カテゴリー表示等のツリー化

カテゴリーやトラックバック、コメント等をツリー化したかったのですが、
なかなか良いのが見つからない。。。
(自分でやれよ(^^;))

それで、今回テンプレートとして使わせて頂いた、
『小粋空間』さんのツリー化カスタマイズを参考にさせて頂きました。


正直、こんな簡単にできるとは思いませんでした(^^;)


まぁ、もともと、『小粋空間』さんのテンプレートを使っている
と言うのもあるかと思いますが(^^;)

参考サイトは、

『小粋空間: サイドメニューのツリー化スクリプト(改)』


やり方はと言うと、

まず、maketree.jsというスクリプトファイルをダウンロードします。

『小粋空間: スクリプト』でダウンロード。

ダウンロードしたファイルを、ローカルサイトパスアップロードします。

ローカルサイトパスとは、
「ウェブログの設定」の「基本設定」で、ローカルサイトパスとして指定してあるディレクトリです。

他の場所でもいいかもしれませんが、後でいろいろ変更がめんどくさくなるので、
これはそこにおいておきましょう(^^;)


続いて、ツリー化したい部分があるテンプレート<HEAD></HEAD>間に、
以下の行を追加します。

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

この中の、「charset="utf-8"」の部分は、
適宜、ご自分のサイトの文字コードに変更してください。

私のサイトの場合、文字コードはEUCですので、「charset="euc-jp"」となります。


続いて、上記ページから、ツリー表示用の画像をダウンロードします。

点線と実線の2種類が用意されているようです。


続いて、スタイルシートに以下の文を追加します。

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; }


背景イメージは先ほどダウンロードしたツリー表示用の画像ですので、
アップロードしたURLに合わせてください。


私は今回、「最近のコメント」、「最近のトラックバック」、「カテゴリー表示」をツリー化したので、
以下の3つを適用しました。

ここで重要なのですが、このカスタマイズは、
リスト形式が、<ul><li></li></ul>という形式に限ると言うことです。


最近のコメント

<div class="sidetitle"> Recent Comments </div> <br /> <div class="side" id="commentlist"> <MTEntries recently_commented_on="10"> <ul> <a href="<$MTEntryLink$>"><strong><MTEntryTitle></strong></a> <MTComments lastn="5"> <li><a href="<$MTEntryLink$>#<$MTCommentID$>"> <MTCommentAuthor></a></li> </MTComments> </ul> </MTEntries> </div>   <script type="text/javascript" language="javascript"> <!-- generateNormalTree("commentlist"); //--> </script>


最近のトラックバック

<MTCollateCollect> <MTPings lastn="20"> <MTCollateRecord> <MTCollateSetField name="ping_id"> <$MTPingID$></MTCollateSetField> <MTCollateSetField name="ping_url"><$MTPingURL$></MTCollateSetField> <MTCollateSetField name="ping_title"><$MTPingTitle$></MTCollateSetField> <MTCollateSetField name="ping_blog_name"> <$MTPingBlogName$></MTCollateSetField> <MTCollateSetField name="ping_date"> <$MTPingDate format="%m/%d %X"$></MTCollateSetField>   <MTPingEntry> <MTCollateSetField name="entry_key"><MTPings lastn="1"><$MTPingDate format= "%y%m%d%H%M%S"$></MTPings></MTCollateSetField> <MTCollateSetField name="entry_link"><$MTEntryPermalink$> </MTCollateSetField> <MTCollateSetField name="entry_title"><$MTEntryTitle$></MTCollateSetField> </MTPingEntry> </MTCollateRecord> </MTPings> </MTCollateCollect>   <div class="sidetitle"> Recent Trackbacks </div> <br /> <div class="side" id="trackbacklist"> <MTCollateList sort="entry_key:#:- ping_id:#:+"> <MTCollateIfHeader name="entry_key"> <a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><strong><$MTCollateField name="entry_title"$></strong></a> <ul></MTCollateIfHeader> <li><a href="<$MTCollateField name="ping_url"$>" encode_html="1"> <$MTCollateField name="ping_blog_name"$></a></li> <MTCollateIfFooter name="entry_key"></ul></MTCollateIfFooter> </MTCollateList> </div>   <script type="text/javascript" language="javascript"> <!-- generateNormalTree("trackbacklist"); //--> </script>

↑私の場合、同一エントリーへのトラックバックをまとめているので、
  こうなりました。


カテゴリー表示

<div class="side"> <div id="categories"> <MTSubCategories> <MTSubCatIsFirst><ul></MTSubCatIsFirst> <MTIfNonZero tag="MTCategoryCount"> <li><a href="<$MTCategoryArchiveLink$>" ><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTElse> <li><MTCategoryLabel> </MTElse> </MTIfNonZero> <MTSubCatsRecurse max_depth="3"> </li> <MTSubCatIsLast></ul></MTSubCatIsLast> </MTSubCategories> </div> </div>   <script type="text/javascript" language="javascript"> <!-- generateSubcategoryTree(); //--> </script>


以上で作業終了、リビルドすればツリー化できているはずです。

もっと細かい内容については、本家サイトにお任せします(^^;)