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

月送りカレンダー（簡易版）

月別アーカイブページに表示されたカレンダーに、簡単に月送り用のリンクをつけるカスタマイズです。

通常の1ヶ月カレンダーは月送りができないため、過去に作った日別アーカイブへのリンクがなくなってしまうという欠点があり、月送りカレンダーが急速に普及したという経緯があります。ですが、月送りカレンダーは専用のアーカイブテンプレートを作ったり、表示のために iframe 要素を使用したりと、やや複雑なカスタマイズになるというのが難点でした。

このカスタマイズではそのような手間はいらず、下にあるリストを貼り付ければ通常のカレンダーが月送りカレンダーに早代わりします。また Serena Bach（sb） のように、前月または次月のリンクをクリックするとページ全体も切り替わるのが利点です。

ただし月送りになるのは月別アーカイブページのみです（利用可能なアーカイブが限定されているので「簡易版」と命名しました）。メインページやカテゴリー・アーカイブ、エントリー・アーカイブは1ヶ月表示のままです。
簡易版といっても、カレンダーの切り替えが必要なのは基本的に月別アーカイブなので、個人的にはお勧めのカスタマイズです。

ひとつだけ注意事項がありまして、日付アーカイブテンプレートは他の日別アーカイブページ・週別アーカイブページと兼用になっていますが、このカスタマイズを行うと、これらのアーカイブのカレンダーにも同様のリンクが設定されることになります。ただし日別アーカイブではこのリンクが昨日（または明日）、週別アーカイブでは先週（または次週）のリンクになり、見栄えとしてはやや妙なものになります。

このため、カスタマイズ前の日別アーカイブテンプレートを丸ごとコピーした、新しい日付アーカイブテンプレートを作り、日別アーカイブ（または週別アーカイブ）はこのテンプレートと関連づけることをお勧めします（やっぱり面倒！というツッコミはなしで）。
新しくアーカイブテンプレートを作る方法は、このエントリーでは割愛しますので、アーカイブテンプレート作成方法を参照ください。

以下、カスタマイズ方法です。

１．テンプレートを修正する

管理画面から「テンプレート」→「アーカイブ」をクリックして「日付アーカイブ」を選択します。カレンダーを表示したい位置に下記のリストを挿入します。デフォルトテンプレートは1カラムのため、ここでは公開テンプレートを例にしています。本日の日付を表示するリアルタイムカレンダーも組み込んでます。
デフォルトテンプレートの場合は、事前に2カラムまたは3カラムへの変更を行ってください。

<!-- カレンダー開始 -->
<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTCalendarDate format="%B %Y"$>">
<caption class="calendarhead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">«</a> </MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">»</a></MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="blue">Sat</span></span></th>
</tr>
 
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span class="calendar"></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries sort_order="ascend">
<MTDateHeader><a href="<$MTEntryPermalink archive_type="Daily"$>" title="</MTDateHeader><$MTEntryTitle$><MTDateFooter>" target="_top"><$MTCalendarDay$></a><MTElse> / </MTElse></MTDateFooter>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
</MTIfArchiveTypeEnabled>
<!-- カレンダー終了 -->
 
<script type="text/javascript">
<!--
data = new Date();
year = data.getYear();
year = (year < 2000) ? year + 1900 : year;
month = data.getMonth() + 1;
date = data.getDate();
table = document.getElementById('calendarTable');
flag = 0;
summary = table.getAttribute('summary');
text = year + '年' + month + '月';
if (summary.indexOf(text) != -1) {
    elements = table.getElementsByTagName('span');
    for(k = 0; k < elements.length; k++) {
        if (elements[k].childNodes){
            if((elements[k].childNodes)[0].nodeName == 'A') {
                if((elements[k].childNodes)[0].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            } else {
                if (elements[k].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            }
        }
    }
}
//-->
</script>

設定したら保存・再構築してください。

２．通常カレンダーとの相違点

JavaScript を除いて、1ヶ月表示のカレンダーとの違いは、下記で示す部分です。削除または変更前を赤色で、追加または変更後を青色で示しています。

具体的には、2ヶ所ある MTDate タグを MTCalendarDate に変更し、MTCalendar に month 属性で this（今月）を付与します。あとは前月と次月のリンクを追加しています。

<!-- カレンダー開始 -->
<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTDate$MTCalendarDate format="%B %Y"$>">
<caption class="calendarhead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">«</a> </MTArchivePrevious>
<$MTDate$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">»</a></MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="blue">Sat</span></span></th>
</tr>
 
<MTCalendar month="this">
　　　　　　　　　　　　　　　　：

３．日別アーカイブのカレンダーについて

冒頭で説明した通り、日別アーカイブはカスタマイズ前の日付アーカイブテンプレートを利用されていることが前提ですが、日別アーカイブも同じカレンダーを利用し、不要な前月および次月のリンク（<MTArchivePrevious>～</MTArchivePrevious> と <MTArchiveNext>～<MTArchiveNext>）を削除することで、ページに表示されている日と同じ月が表示されるようになります。