Movable Typeのカテゴリーをツリー表示にすると、サブカテゴリーを設定している場合などは関連性がよく分かるようになります。また、最近のエントリー一覧も、同じ方法で行うと見栄えが良くなります。ここでは、MT3.2以降で使える、Javaスクリプトを使わない方式でツリー表示させてみました。
カテゴリ表示・月別アーカイブのツリー表示例
ここで記述してあるとおりですが、実際には一部の記述を書き足すだけなので、簡単にできます。なお、ツリー表示に使う画像は別途用意が必要です。
書き足す部分は赤文字で示した部分です。
カテゴリー
|
<dd class="side"> <div id="categories"> <MTTopLevelCategories> <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> </MTTopLevelCategories> </div> </dd> </MTIfArchiveTypeEnabled> </MTIf> |
月別アーカイブ
|
<dd class="side"> <ul class="tree"> <MTArchiveList archive_type="Monthly"> <li class="tree<MTArchiveListFooter>_end</MTArchiveListFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li> </MTArchiveList> </ul> </dd> </MTIfArchiveTypeEnabled> |
表示例
最近のエントリー
|
<ul class="tree"> <MTEntries lastn="10"> <li class="tree<MTEntriesFooter>_end</MTEntriesFooter>"><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li> </MTEntries> </ul> |
最近のコメント
|
<ul class="tree"> <MTEntries lastn="20" recently_commented_on="3"> <li class="tree<MTCommentsFooter>_end</MTCommentsFooter>"><a href="<$MTEntryLink$>"><MTEntryTitle></a> <ul> <MTComments lastn="2"> <li class="tree<MTCommentsFooter>_end</MTCommentsFooter>"> <a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>"> <MTCommentAuthor default="Anonymous"> </a> <$MTCommentDate format="%m/%d"$> </li> </MTComments> </ul> </li> </MTEntries> </ul> |
最近のトラックバック
|
<ul class="tree"> <MTPings lastn="10"> <li class="tree<MTPingsFooter>_end</MTPingsFooter>"><MTPingEntry><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></MTPingEntry> <ul> <li class="tree<MTPingsFooter>_end</MTPingsFooter>"> <a href="<$MTPingURL$>" title="p<$MTPingID$>"> <$MTPingBlogName$> </a> <$MTPingDate format="%m/%d"$> </li> </ul> </li> </MTPings> </ul> |
書き足したら、保存して、ブログの再構築を行います。
ツリー表示に使う画像について
ツリー表示に使う画像は、小粋空間さんのページからダウンロードできます。実線と破線のものが用意されていますので、お好みのものを使って下さい。私のところでは、破線のものを使っています。
実線
| tree_lst_solid.gif / tree_end_solid.gif |
点線
| tree_lst_dotted.gif / tree_end_dotted.gif |
スタイルシートの記述
スタイルシートに、以下の記述を付け足します。
|
ul.tree { margin: 0!important; padding: 0!important; 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(/images/tree_lst_dotted.gif); background-repeat: no-repeat!important; list-style: none!important; } ul.tree li.tree_end { background-image: url(/images/tree_end_dotted.gif); list-style: none; } |
赤字で示した部分は、ツリー画像の表示に関する部分で、実際に設置したパスを記述します。ここでは、imagesというフォルダを作ってそこに設置したので、その記述を行いました。
相対パスで大丈夫でしたが、もし表示されない場合はhttp://から始まる絶対パスで記述して下さい。
