« ページ横幅(1) | メイン | TinyMCE Plugin for Movable Type »

サイドバーのツリー化

サイドバーのメニューをツリー化する方法です。
見た目がキレイになるので、お勧めです
 デフォルトの状態だと、
サイドバーは図のように表示されます。

一応、リストとして表示はされているので、
これでも問題はないのですが、
より見やすくキレイにしたい方は
このあとのツリー化を試してみて下さい。


ツリー化をすると、サイドバーは図のように変わります。
階層がハッキリすることもあって、見やすくなります。

ツリー化できるものの種類も豊富なので、お試しあれ。


参考にさせていただいた記事はコチラ。
小粋空間JavaScript 不要なサイドメニューのツリー化 for Movable Type

小粋空間様の記事をそのまま、でまったく問題ないかと思います。
私はひねくれ者なので、ちょっと順番を変えてチマチマ作業をしました。
記事とは違った順番で以下に手順をご案内します。

1.ツリー画像の準備
ツリー化された図の点線の部分、これは画像を使っています。
私は小粋空間様推奨の画像をそのまま使っています。
※ご自身で用意しても、たぶん問題ないと思います。大きさと名前さえ同じなら。

こちらの記事の手順4で公開されている画像をダウンロードします。
tree_lst_dotted.gifまたはtree_lst_solid.gifの名前になっているファイルを
「tree_lst.gif」に名前の変更をして下さい。のちのち重要ですので。
同様に、tree_end_dotted.gifまたはtree_end_solid.gifは「tree_end.gif」に変更。

最後に、この2つの画像をindexページがあるのと同じ場所にアップロードします。

2.スタイルシートに追記
管理画面のテンプレートからスタイルシートを開き、
どこでも大丈夫なので、下記の青字を追記して下さい。
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.テンプレートの書き換え
メインページ・各アーカイブページのテンプレートを書き換えます。
赤字が書き換え・青字が追記部分になります。

最近のエントリーリスト
<ul class="tree">
<MTEntries lastn="10">
<li class="tree<MTEntriesFooter>_end</MTEntriesFooter>"><a xhref="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

カテゴリーリスト
<MTSubCategories>
<MTSubCatIsFirst><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><a xhref="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecursemax_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>

月別アーカイブリスト
<ul class="tree">
<MTArchiveList archive_type="Monthly">
<li class="tree<MTArchiveListFooter>_end</MTArchiveListFooter>"><a xhref="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>

それぞれ、書き換えたら、保存し再構築します。

おまけ。
 せっかくツリー化したのに、ツリーの画像と文字が
微妙にズレた感じになってしまう場合があると思います。
(この記事の2枚目の画像みたいな感じ)
この場合、スタイルシートを若干書き換えることで
右の図のように回避できます。
こんな↓感じで、フォントサイズを12pxにしてみて下さい。

ul.tree {
    margin: 0!important;
    padding: 0!important;
    font-size:12px;
    list-style: none!important;
}

トラックバック

このエントリーのトラックバックURL:
http://maybe.my.land.to/mt_files/mt-tb.cgi/22

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

About

2007年01月05日 02:37に投稿されたエントリーのページです。

ひとつ前の投稿は「ページ横幅(1)」です。

次の投稿は「TinyMCE Plugin for Movable Type」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。