月別アーカイブをカレンダー風にする方法

このサイトの月別アーカイブはカレンダー風になっています。一目で何日の記事なのかわかりやすくしたいためです。

これを気にいってくれた友達に「テンプレ公開してーーー！」と頼まれたので記事にすることにしました。自分が作ったものを、気にいってもらえるのも嬉しいわ。（ネタにもなるし・笑）

今使ってる月別アーカイブとはほぼ一緒になるはずのテンプレートモジュールとスタイルシートです。

カレンダー風月別アーカイブ

• captionに年月が表示
• 日付、曜日、記事タイトル、カテゴリー
• 土曜日：青字、水色背景、日曜日：赤字にピンク色背景
• 記事タイトルはリスト表示、リンクは記事アーカイブへ

よくあるカレンダーのように、祝日などもお休み扱いにすることもよく考えたらできるのかも。そこまで考えてません（笑）

「テンプレートモジュール：ブログ記事の概要(月別)」はカレンダー（テーブル）部分のみです。私はこの部分だけをモジュールにして、月別用ブログ記事アーカイブに読み込ませています。もちろんアーカイブマッピングも月別だけ。
ブログ記事アーカイブを条件分岐させて読み込ませてもよかったけど、後々わかりづらくなりそうだったので。

Calenderタグを使用しています。<MTCalendar month=”this”>～</MTCalendar>を使って、一ケ月分のカレンダーを表示（1～31日）を行っています。

MTCalendarIfEntriesはブログ記事が投稿された日、MTCalendarIfNoEntriesはブログ記事が投稿されてない日を判断する条件タグなので、これを使ってブログ記事が投稿された日には、ブログ記事タイトルが表示されるようにしています。

<table summary="<MTArchiveDate format="%Y-%m">" class="monthlyCalendar">
<caption><$MTArchiveTitle$></caption>
<thead>
<tr>
<th class="listDay">日</th>
<th class="listWeek">曜</th>
<th class="listTitle">タイトル</th>
</tr>
</thead>
<tbody>
<MTCalendar month="this">
<MTCalendarIfEntries>
<MTEntries>
<MTEntriesHeader>
<tr abbr="<$MTCalendarDate format="%A" language="en" $>" class="<$MTCalendarDate format="%A" language="en" $>">
<th class="listDay"><$MTCalendarDay$></th>
<th class="listWeek"><$MTCalendarDate format="%a" $></th>
<td class="listTitle"><ul>
</MTEntriesHeader>
<li><a href="<$MTEntryLink archive_type="Individual"$>"><$MTEntryTitle$></a> <span>(<MTEntryCategories glue=", "><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel pmhc=""$>"><$MTCategoryLabel pmhc=""$></a></MTEntryCategories>)</span></li>
<MTEntriesFooter>
</ul>
</td>
</tr>
</MTEntriesFooter>
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<tr abbr="<$MTCalendarDate format="%A" language="en" $>" class="<$MTCalendarDate format="%A" language="en" $>">
<th class="listDay"><$MTCalendarDay$></th>
<th class="listWeek"><$MTCalendarDate format="%a" $></th>
<td class="listTitle"></td>
</tr>
</MTCalendarIfNoEntries>
</MTCalendar>
</tbody>
</table>

スタイルシートは以下のような感じで指定しています。たぶんこのまま使えば今のサイトと同じようなデザインになるはずなので、後は好みで変更してください。

/*--------------------------------------
月別アーカイブ
---------------------------------------*/
table.monthlyCalendar {
border-collapse: collapse;
margin: 0 20px 0.5em 20px;
width: 90%;
border: 1px solid #aaa;
}
table.monthlyCalendar th {
border: 1px solid #ddd;
color: #666;
background-color: #bea4a7;
text-align: center;
}
table.monthlyCalendar td {
border: 1px solid #ddd;
}
table.monthlyCalendar tbody th.listDay,
table.monthlyCalendar tbody th.listWeek {
background-color: #fff;
padding: 0 10px;
width: 1em;
font-weight: normal;
}
table.monthlyCalendar tr.Sunday th,
table.monthlyCalendar tr.Sunday td{
background-color: #ffe5e5;
}
table.monthlyCalendar tr.Saturday td,
table.monthlyCalendar tr.Saturday th {
background-color: #e5e5ff;
}
table.monthlyCalendar tr.Sunday th{
color: red;
}
table.monthlyCalendar tr.Saturday th {
color: blue;
}
table.monthlyCalendar ul {
margin-top:0.2em;
margin-bottom:0.2em;
}

カレンダー風月別アーカイブ、探すと同じようなカスタマイズしてる人を見かけます。ただあまり月別アーカイブを見ることがないので、気づかないけど（爆）

他にもおもしろいカスタマイズあったら見てみたいなー。ちなみに、「記事の画像を使ったカレンダー風月別アーカイブ」もずーっと考えてるのですが、どうもしっくりくるデザインが浮かばない・・・・。１日に１記事とは限らないのがつらいなー。そのうちいい案が浮かぶだろうか。