TopMovable Typeカスタマイズサイドバー > 2006年6月
2006年6月20日

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

June 20,2006 12:55 AM
Tag:[, , ]
Permalink
月別アーカイブリストのツリー化ArchiveDateHeader プラグインおよび、昨日公開した ArchiveDateFooter プラグインを利用した、月別アーカイブリストのツリー化カスタマイズを紹介します。

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

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

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

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

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

1.各年の月をツリー化

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

1.1 テンプレートの修正

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

1.2 スタイルシートの修正

下記のスタイルを 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;
}

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

月別アーカイブリストのツリー化2項は各年の月のツリー化だけでなく、年表示部分もツリー化する方法を紹介します。

2.1 テンプレートの修正

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

2.2 スタイルシートの修正

下記のスタイルを 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;
}

3.その他

すでに他でツリーの設定を行っている場合は、同じ設定を利用するか、
#archives ul.tree {
     :

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

Comments [25] | Trackbacks [5]
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