TopMovable Typeカスタマイズツリー化 > 2006年11月
2006年11月13日

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

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 のツリー化については本エントリーの方法を推奨します。

1.最近のコメント

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

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

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

2.最近のトラックバック

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

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

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

3.CSS

下記をスタイルシートに追加してください。すでに他のリストのツリー化で設定されている場合は不要です。

リスト3 ツリー化用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;
}

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

4.ツリー画像のダウンロード

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

実線:tree_lst_solid.gif / tree_end_solid.gif
点線:tree_lst_dotted.gif / tree_end_dotted.gif

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

5.画像の配置

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

6.参考:ツリー表示の仕組み

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

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

リスト6 サンプルHTML

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

この 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]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3