小粋空間: ツリー化: 2006年11月アーカイブ

Top ＞ Movable Type ＞カスタマイズ＞ツリー化＞ 2006年11月

2006年11月13日

JavaScript 不要なサイドメニューのツリー化 for Movable Type（MTCollate編）

November 13,2006 1:20 AM
Tag：[Customize, MovableType, MTCollate, Tree]
Permalink

Movable Type で JavaScript を用いずにサイドメニューのリストをツリー化するカスタマイズで、「JavaScript 不要なサイドメニューのツリー化 for Movable Type」で公開していなかった、MTCollate プラグイン *1 を利用して「最近のコメント」「最近のトラックバック」を表示している場合の方法です（関連記事：MTCollate を使って「最近のコメント」を表示する）。

JavaScript 不要なサイドメニューのツリー化の記事より概要部分を再掲しておきます。

以前、「サイドメニューのツリー化スクリプト（改）」という記事で Movable Type の各リストを JavaScript を用いてツリー化するカスタマイズを紹介しておりますが、3.2 以降で新しいMTタグ *2 が追加されたことで、ほとんど全てのリストについて、JavaScript を使用せずにツリー化が可能であることが判明しました。

この方法は JavaScript を用いたカスタマイズと比較して、下記のメリットがあります。

ブラウザで JavaScript を OFF にしている場合でもツリー表示が可能
JavaScript 起動による表示遅延がなし
JavaScript 関連のカスタマイズが不要

ということで、Movable Type のツリー化については本エントリーの方法を推奨します。

１．最近のコメント

下記のリストをサイドバーの任意の位置に設定してください。ポイントとなる部分を青色で示しています。

<MTCollateCollect>
<MTComments lastn="20">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor encode_html="1"$></MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle encode_html="1"$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>
 
<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>"><$MTCollateField name="entry_title"$></a><ul class="tree"></MTCollateIfHeader><li class="tree<MTCollateIfFooter name="entry_key">_end</MTCollateIfFooter>"><a href="<$MTCollateField name="entry_link"$>#c<$MTCollateField name="comment_id"$>"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$></li><MTCollateIfFooter name="entry_key"></ul></MTCollateIfFooter>
</MTCollateList>
</div>

リスト1　最近のコメント表示用リスト

２．最近のトラックバック

下記のリストをサイドバーの任意の位置に設定してください。ポイントとなる部分を青色で示しています。

<MTCollateCollect>
<MTPings lastn="20">
<MTCollateRecord>
<MTCollateSetField name="ping_id"><$MTPingID$></MTCollateSetField>
<MTCollateSetField name="ping_url"><$MTPingURL$></MTCollateSetField>
<MTCollateSetField name="ping_blog_name"><$MTPingBlogName encode_html="1"$></MTCollateSetField>
<MTCollateSetField name="ping_date"><$MTPingDate format="%m/%d"$></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>
<div class="side">
<MTCollateList sort="entry_key:#:- ping_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>"><$MTCollateField name="entry_title"$></a><ul class="tree"></MTCollateIfHeader><li class="tree<MTCollateIfFooter name="entry_key">_end</MTCollateIfFooter>"><a href="<$MTCollateField name="ping_url"$>"><$MTCollateField name="ping_blog_name"$></a> <$MTCollateField name="ping_date"$></li><MTCollateIfFooter name="entry_key"></ul></MTCollateIfFooter>
</MTCollateList>
</div>

リスト2　最近のトラックバック表示用リスト

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

リスト3　ツリー化用CSS

JavaScript を用いる場合のCSSとほぼ同じですが、一番最後のセレクタ名（tree_end）だけが異なっています。

４．ツリー画像のダウンロード

下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。
実線につきましては我楽さんより提供いただきました。ありがとうございました。

５．画像の配置

ダウンロードした画像を、スタイルシートと同じディレクトリにアップロードしてください。リスト3の赤色部分がアップロードしたファイル名と一致するように修正してください。
これでブラウザを更新して、ツリーが表示されればOKです。

６．参考：ツリー表示の仕組み

ツリー化を行うために、「順序無しリスト（ul - li）」を利用します。通常の順序無しリストは左側にリストマークが表示されますが、ツリー化ではリストマークを非表示にし、その代わりにツリー画像（"├" または "└"）を、CSS の background-image プロパティを利用して表示します。

全てのリストに同じ画像を表示するのであれば簡単なのですが、ツリーの最後に "└" を表示するため、下記のように最後の li 要素に class 属性の指定が必要になります。

<ul>
<li>aaa</li>
<li>bbb</li>
<li class="tree">ccc</li>
</ul>

リスト6　サンプルHTML

この class 属性によりどちらのツリー画像を表示するか判別します。
例えば class 属性がない li 要素には途中の画像 "├" を表示し、class 属性がある場合は最後の画像 "└" を表示します。なお本カスタマイズでは、途中の li 要素に class="tree"、最後の li 要素に class="tree_end" を与えています。

JavaScript を利用したツリー化のカスタマイズでは、JavaScript 実行により class 属性を付与しています（したがってブラウザの「ソースの表示」では class 属性が設定されていないようにみえます）。

*1：本カスタマイズは MTCollate プラグインを利用されていることが前提です。
*2：MTArchiveListFooter/MTCommentsFooter/MTPingsFooter

Comments [6] | Trackbacks [6]