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

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

August 22,2006 12:50 AM
Tag:[, , ]
Permalink

サイドメニューのツリー化Movable Type で JavaScript を用いずにサイドメニューのリストをツリー化するカスタマイズです。

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

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

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

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

1.基本的な設定方法

JavaScript を用いないため、ul 要素、li 要素に class 属性を記述します。

  • ul 要素:class="tree" を追加
  • li 要素:class="tree[MT開始タグ]_end[MT終了タグ]" を追加

「最近のエントリー」の設定例

<ul class="tree">
<MTEntries lastn="10">
<li class="tree<MTEntriesFooter>_end</MTEntriesFooter>"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

[MT開始タグ] と [MT終了タグ] は、各リストの最後を示すMTタグです。リストによって用いるMTタグは異なります。具体的な設定内容については2項を参照してください。

ul 要素の class 属性に "tree" を設定しているのは、通常の ul 要素とスタイルを切り分けることを前提にしているためです。ul 要素を一律ツリー表示として使用する場合は、下記の方法でも大丈夫と思います。

  • ul 要素:何も設定しない
  • li 要素:[MT開始タグ]class="end"[MT終了タグ] を追加

「最近のエントリー」の設定例

<ul>
<MTEntries lastn="10">
<li<MTEntriesFooter> class="end"</MTEntriesFooter>><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

2.MTタグにツリー表示用 class 属性追加

ツリー表示用の class 属性を追加した各リストのMTタグを以下に掲載します。マウスコピーして表示したいテンプレートにペーストしてお使いください。

青色は1項(前半)の設定部分を示しています。必要最小限のタグを掲載してますので、ツリー化以外のHTMLマークアップは適宜追加してください。

Recent Entries(最近のエントリー)

<ul class="tree">
<MTEntries lastn="10">
<li class="tree<MTEntriesFooter>_end</MTEntriesFooter>"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

Recent Entries(最近のエントリー:日別表示用)

<MTEntries lastn="10">
<MTDateHeader>
<ul class="tree"><$MTEntryDate format="%m/%d"$>
</MTDateHeader>
<li class="tree<MTDateFooter>_end</MTDateFooter>"><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
<MTDateFooter>
</ul>
</MTDateFooter>
</MTEntries>

Recent Comments(最近のコメント)

<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<ul class="tree">
<MTComments lastn="5">
<li class="tree<MTCommentsFooter>_end</MTCommentsFooter>"><a href="<$MTEntryLink$>#<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
</MTComments>
</ul>
</MTEntries>

Recent Trackbacks(最近のトラックバック)

<ul class="tree">
<MTPings lastn="10">
<li class="tree<MTPingsFooter>_end</MTPingsFooter>"><a href="<$MTPingURL$>" target="_blank"><$MTPingTitle$></a><br/>
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>

Categories(カテゴリーリスト:サブカテゴリー表示)

<MTSubCategories>
<MTSubCatIsFirst><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>

Monthly Archives(月別アーカイブリスト)

<ul class="tree">
<MTArchiveList archive_type="Monthly">
<li class="tree<MTArchiveListFooter>_end</MTArchiveListFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>

Monthly Archives(月別アーカイブリスト:年別表示)

*プラグインが必要です
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><span><$MTArchiveDate format="%Y年"$></span><ul class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li>
<MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>

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の場合)リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。なお実線につきましては我楽さんより提供いただきました。ありがとうございました。
なお実線を公開テンプレートに適用した場合、Mozzila系ブラウザ(Netscape/Firefox)で線が途切れる事象が確認されています。スタイルシートの設定で解消されるかもしれませんが予めご了承ください。

5.画像の配置

ダウンロードした画像をローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。

これでツリーが表示されればOKです。

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

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

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

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

この class 属性によりどちらのツリー画像を表示するか判別します。
例えば class 属性がない li 要素には途中の画像 "├" を表示し、class 属性がある場合は最後の画像 "└" を表示します。

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


*1:MTArchiveListFooter/MTCommentsFooter/MTPingsFooter

Comments [83] | Trackbacks [13]
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