カテゴリー表示等のツリー化 : Project MultiBurst

Category : [ MovableType ]
July 26, 2005 20:41
TAG : [Customize,Image,Javascript,Template,UTF-8,小粋空間]
Permalink

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

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

正直、こんな簡単にできるとは思いませんでした（＾＾；）

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

参考サイトは、

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

やり方はと言うと、

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

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

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

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

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

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

この中の、「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">  </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">  </script>

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

カテゴリー表示

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

もっと細かい内容については、本家サイトにお任せします（＾＾；）