サイドバーのメニューをツリー化する方法です。
見た目がキレイになるので、お勧めです
見た目がキレイになるので、お勧めです
デフォルトの状態だと、サイドバーは図のように表示されます。
一応、リストとして表示はされているので、
これでも問題はないのですが、
より見やすくキレイにしたい方は
このあとのツリー化を試してみて下さい。
ツリー化をすると、サイドバーは図のように変わります。
階層がハッキリすることもあって、見やすくなります。
ツリー化できるものの種類も豊富なので、お試しあれ。
参考にさせていただいた記事はコチラ。
小粋空間: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;
}