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

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

Posted at November 13,2006 1:20 AM
Tag:[Customize, MovableType, MTCollate, Tree]

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

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

Movable typeのカテゴリをツリー化してみる from kishi-r.com
カテゴリの表示をツリー化したらカッコイイかもと思って、 やっちゃった♪ すんげぇ... [続きを読む]

Tracked on December 12, 2006 9:19 PM

Movable Typeのカテゴリをツリー化してみる from kishi-r.com
カテゴリの表示をツリー化したらカッコイイかもと思って、 やっちゃった♪ すんげぇ... [続きを読む]

Tracked on December 12, 2006 9:30 PM

この数日で行ったこと from Laspalabras De Amor
1.重複トラックバックプラグイン(3.3版)、 2.asciiTBPingfil... [続きを読む]

Tracked on April 22, 2007 10:33 AM

サイドメニューのツリー化 from Free Style
最初に設置したのを、会社で見たらツリーになっていなかったので JavaScrip... [続きを読む]

Tracked on July 8, 2007 2:01 PM

Movable Type サイドバー・カテゴリーのツリー表示 from 頭脳集団+1
Movable Typeでは、サイドメニューにカテゴリーや最近のエントリーを表... [続きを読む]

Tracked on January 2, 2008 1:52 PM

「最近のコメント」の表示の仕方 from 瑞了奇譚
「最近のコメント」には最近にいただいたコメントが表示されます。 私の場合は10件表示されるようにしているのですが、今までの表示方法は見にくくて嫌でした。 [続きを読む]

Tracked on February 14, 2008 2:21 PM
コメント

こんばんは。

本エントリを参考に、
無事JavaScript不要なツリー化ができました。
ほんのちょっとした事がポイントだったんですね。

今後ともよろしくお願い致します。

[1] Posted by くおん : November 14, 2006 9:39 PM

>くおんさん
こんばんは。
ご連絡ありがとうございました。
無事に表示できたようでよかったです。
ではでは!

[2] Posted by yujiro : November 14, 2006 10:27 PM

こんばんわ。

このカスタマイズを利用させていただいてますが、カテゴリや、個別ページへ移動すると、それに関連した「最近のエントリー」や「最近のコメント」しか表示されないのですが、こちらと同じようにインデックスページと同じ表示を保つにはどのようにしたらよいのでしょうか?
アーカイブにも同じ表示~ってのを見つけましたがmtif記述は付けていませんし…わかりません(>_<)
因みにウィジェットにて形成しています。

[3] Posted by 寺山 銀 logo : March 11, 2008 9:55 PM

>寺山 銀さん
こんばんは。
ご質問の件ですが、手っ取り早い対処方法は「indexcontextプラグイン」がおすすめです。
それではよろしくお願い致します。

[4] Posted by yujiro logo : March 13, 2008 11:44 PM

無事に設置できました。
ありがとうございましたm(__)m

[5] Posted by 寺山 銀 logo : March 14, 2008 10:34 PM

>寺山 銀さん
こんばんは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは!

[6] Posted by yujiro logo : March 18, 2008 1:39 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)