MovableTypeの最近のコメント一覧のツリー化スター

どうもMovableType4.1のテンプレートのコメントの表示方法が気に入らず、カスタマイズしてみます。小粋空間さんでツリー化させる方法が載っているので、それに沿ってやってみようと思います。

１．maketree.jsをスクリプト(小粋空間さん)よりダウンロード。

２．$MTBlogURL$の位置、つまりindex.htmlのある位置にアップロード

３．コメント欄のテンプレートを変える
　デザイン＞テンプレート＞ウィジェット＞最近のコメント
を以下のようにする。

<mt:IfNonZero tag="mt:BlogCommentCount"> <mt:CommentsHeader> <div class="widget-recent-comments widget"> <h3 class="widget-header">最近のコメント</h3> <div class="widget-content" id="commentlist"> </mt:CommentsHeader>

<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<ul>
<MTComments lastn="5" sort_order="descend">
<li><a href="<$MTEntryLink$>#<$MTCommentID$>">
<MTCommentAuthor></a> (<$MTCommentDate format="%y/%m/%d"$>)</li>
</MTComments>
</ul>
</MTEntries>

</div>
</div>

<script type="text/javascript">
<!--
generateNormalTree("commentlist");
//-->
</script>
<mt:CommentsFooter>
</mt:CommentsFooter>
</mt:IfNonZero>

４．インクルード文の挿入
　デザイン＞テンプレート＞メインページ＞ヘッダー
のHeadタグの中に入れる。

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

５．線の画像をサイドメニューのツリー化スクリプト（改）(小粋空間さん)よりダウンロード。そして、MTの入っているマシンの適当な位置にアップロード。今回はmt-static/images/にいれた。

６．スタイルシートの追加
　デザイン＞テンプレート＞スタイルシート
で現在のテンプレートで使用している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(http://www.tetra-blue.net/weblog/mt-static/images/tree_end_dotted.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}

ul.tree li.end {
background-image: url(http://www.tetra-blue.net/weblog/mt-static/images/tree_end_dotted.gif);
list-style: none;
}

これで再起動して上手く行きました。小粋空間さん、毎度ですがありがとうございました。