年別に月別アーカイブをリスト化 for Movable Type

年別に月別アーカイブをリスト化 for Movable Type

Movable Typeでは、標準のテンプレートで月別アーカイブをリスト化できる。だが年別に月別アーカイブをリスト化するのは容易な事ではない。しかし、adamkalseyさんと、小粋空間さんで配布されているプラグインを併用すると、とても簡単に年別にソートできる月別アーカイブリストを作る事ができる。

プラグインを併用せよ

柔軟に年別に月別アーカイブリストを吐き出させるには、二つのプラグインの併用が必要だ。

導入方法は、各サイトからそれぞれのプラグインをダウンロードして、Movable Typeのプラグインディレクトリにコピーするだけ。普段通りのプラグイン導入プロセスだ。

なお、Movable Type備忘録さんによると、Movable Type 4の環境ならば、通常のMTタグだけで年別に月別アーカイブリストを吐き出す事ができるらしいが、少しばかり複雑なコーディングになってしまうので、今回はプラグインを導入する事にした。

アトリビュートを駆使すべし

下記のコードは、テンプレートの表示させたい位置に設定する。サンプル画像ではデフォルトテンプレートの月別アーカイブと置き換えた。なお、ウィジェットセットには対応しないので、これを参考にブログの適切な位置に設置してもらいたい。コードを書き直す必要があるが、フッター直前に横表示で設置するのも、とてもクールだ。

コード

<div id="sidebar-archive">
<ul>
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader>
<li><a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/"$>"><$MTArchiveDate language="en" format="%Y"$></a>
<ul>
</MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveDate language="en" format="%B"$></a></li>
<MTArchiveDateFooter>
</ul>
</li>
</MTArchiveDateFooter>
</MTArchiveList>
</ul>
</div>

この二つのプラグインによって作成する事ができる年別の月別アーカイブリストは、アトリビュートによって、様々なことができる。たとえば、上記のコードの format="%Y" や format="%B" は、日付タグのアトリビュートを利用できる。

%Y
年を、4桁の数字で表示します。(例: 2002)
%y
年を、2桁の数字で表示します。1桁の場合は、0が付加されます。(例: 09)
%b
月の名前を、省略形式で表示します。(例: Sep、9)
%B
月の名前を、完全形式で表示します。(例: September、9)
%m
月を、2桁の数字で表示します。1桁の場合は、0が付加されます。(例: 09)
サンプル画像

language="en"は月を英語で書き出す際に必要になる。SeptemberやSep以外の表記にしたい場合は特に必要ないだろう。

リストを昇順にしたい場合には、 sort_order="ascend" を <MTArchiveList archive_type="Monthly">、<MTArchiveDateFooter>にそれぞれ付加する必要がある。
<MTArchiveList archive_type="Monthly" sort_order="ascend">、<MTArchiveDateFooter sort_order="ascend"> のようにだ。

なお、今回は年別のアーカイブリストへのリンクも用意している。年別をOnにしていない場合は速やかにテンプレートの「ブログ記事リスト」の「アーカイブマッピング」から、「年別」を作成しておくように。

CSSでデザインする

サンプル画像

せっかく作成する事ができた年別の月別アーカイブリスト、そのままじゃとってもカッコ悪い。早速スタイルシートでデザインしてみよう。右の画像がそのサンプルで、margin, padding, borderの基本的なプロパティからfont-familyまで、フルカスタマイズした。

なお、Movable Type 4 標準テンプレート、3カラムの月別アーカイブと置き換えたので、その下にある「Powerd by MT4」の色調に合わせてみた。キモいのか落ち着いたカラーなのか微妙な線だが、結構個人的には好きっす。

あと一つだけ。あくまでMovable Type 4 標準テンプレートに設置しているので、テンプレートをカスタマイズしている場合は、スタイルシートも書き換えないといけない。あくまで参考程度に見ていただきたい。

スタイルシート

div#sidebar-archive {
margin: 10px 15px 0 16px;
}
div#sidebar-archive ul {
margin: 0;
padding: 0;
}
div#sidebar-archive ul li {
list-style-type: none;
margin: 0 0 10px;
padding: 10px;
border: 1px solid #ddd;
background-color: #f8f8f8;
}
div#sidebar-archive ul li a {
display: block;
color: black;
font: 80% Georgia, "Times New Roman", Times, serif;
}
div#sidebar-archive ul li a:hover {
}
div#sidebar-archive ul li ul {
margin: 0;
padding: 0;
}
div#sidebar-archive ul li ul li {
margin: 0;
padding: 0;
border-style: none;
}
div#sidebar-archive ul li ul li a {
border: 2px solid #33789c;
padding: 5px 10px;
text-align: right;
margin-top: 5px;
font-size: 80%;
background-color: white;
color: black;
text-decoration: none;
height: 20px;
line-height: 20px;
}
div#sidebar-archive ul li ul li a:hover {
background-color: #33789c;
color: white;
font-size: 100%;
border-color: black;
}

わかりやすくソートするメリット

年別の月別アーカイブリストを設置するメリットはなんだろうか。自己満足やデザイン的なもの、いろいろあるだろう。思うのは、わかりやすくアーカイブリストを見せることによって、サイトの訪問者を誘導することができるのが一番のメリットだと思う。ただでさえアクセスが少ない年別、月別のページだが、せっかく生成しているページなのだからうまく活用しないともったいない!!

サンプル画像

SCREAMOのFooterに設置してある年別の月別アーカイブリスト

related story