小粋空間  -  a cheap joke and a play on words site

月別アーカイブリストのツリー化 for Movable Type

ArchiveDateHeader プラグインおよび、昨日公開した ArchiveDateFooter プラグインを利用した、月別アーカイブリストのツリー化カスタマイズを紹介します。

ツリー化にあたっては、公開テンプレートをサンプルに用いて

1. 各年の月をツリー化
2. 年と各年の月をツリー化

の2通りの方法を説明しています。いずれかお好きな方を選択してください。またデフォルトテンプレート等、他のテンプレートでも利用可能ですが、ツリー表示についてはスタイルシートの設定を適宜修正して調整してください。

なおツリー化の基本的なカスタマイズについてはサイドメニューのツリー化スクリプト（改）を参照してください。ここでは差分のみを記し、スクリプトおよびツリー画像の設定等については割愛しています。

さらにツリー表示を年毎に折りたたむこともできます。その場合は「月別アーカイブリストの年毎の折りたたみ for Movable Type」をご覧ください。

１．各年の月をツリー化

１項では、左のスクリーンショットのように各年の月をツリー化する方法を紹介します。

１．１ テンプレートの修正

月別アーカイブリスト表示したいテンプレートに、下記のタグを設定します。

<div class="side" id="archives">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><span><$MTArchiveDate format="%Y年"$></span><ul></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li>
<MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
<script type="text/javascript">
<!--
generateNormalTree('archives');
//-->
</script>

１．２ スタイルシートの修正

下記のスタイルを styles-site.css に追加します。

ul.tree {
    margin: 0 0 0 15px!important;
    padding: 0px!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin: 0!important;
    padding: 0!important;
    margin-left: 10px!important;
}
ul.tree li {
    margin: 0!important;
    padding: 0 0 0 11px!important;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.end {
    background-image: url(tree_end.gif);
    list-style: none;
}

２．年と各年の月をツリー化

２項は各年の月のツリー化だけでなく、年表示部分もツリー化する方法を紹介します。

２．１ テンプレートの修正

月別アーカイブリスト表示したいテンプレートに、下記のタグを設定します。

<div class="side" id="archives">
<ul>
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><li><$MTArchiveDate format="%Y年"$><ul></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li>
<MTArchiveDateFooter></ul></li></MTArchiveDateFooter>
</MTArchiveList>
</ul>
</div>
<script type="text/javascript">
<!--
generateTreeForTreeStructure('archives');
//-->
</script>

２．２ スタイルシートの修正

下記のスタイルを styles-site.css に追加します。

ul.tree {
    margin: 0 0 0 5px!important;
    padding: 0px!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin: 0!important;
    padding: 0!important;
    margin-left: 10px!important;
}
ul.tree li {
    margin: 0!important;
    padding: 0 0 0 11px!important;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.end {
    background-image: url(tree_end.gif);
    list-style: none;
}

３．その他

すでに他でツリーの設定を行っている場合は、同じ設定を利用するか、

#archives ul.tree {
　　　　　：

という具合に、スタイルシートの該当部分に id 属性を追加して、他の設定と干渉しないようにしてください。