月間移動可能なMovableTypeのカレンダー

movabletype

MovableTypeのカレンダーをみてempty pages (some movable type tips & tricks) tags/calendar iframeを参考に
カレンダーの移動が可能なようにテンプレートなどを作り直してみた。

方法は、

Templateの設定→新しいアーカイブ・テンプレートを作る、で
テンプレートの名前を"calendar"に設定して
テンプレートの中身を以下のようにする。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />

<title><$MTBlogName$></title>

<link rel="stylesheet" href="<$MTBlogURL$>calstyle.css" type="text/css" />

<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>

</head>
<body>
<div align="center" class="calendar">
<table border="0" cellspacing="4" cellpadding="0" summary="Monthly calendar with links to each day's posts">

<caption class="calendarhead">
<MTArchivePrevious>
<a href="<MTBlogURL>archives/<MTArchiveDate format="%Y_%m">.html" title="« <MTArchiveDate format="%B %Y">" onmouseover="window.
status='<MTArchiveDate format="%B %Y">'; return true" onmouseout="window.status='';return true">«</a>
</MTArchivePrevious>

<$MTArchiveDate format="%B %Y"$>

<MTArchiveNext>
<a href="<MTBlogURL>archives/<MTArchiveDate format="%Y_%m">.html" title="» <MTArchiveDate format="%B %Y">" onmouseover="window.
status='<MTArchiveDate format="%B %Y">'; return true" onmouseout="window.status='';return true">»</a>
</MTArchiveNext>
</caption>

<tr height="20">
<th abbr="Sunday" align="center"><span class="calendar">Sun</span></th>
<th abbr="Monday" align="center"><span class="calendar">Mon</span></th>
<th abbr="Tuesday" align="center"><span class="calendar">Tue</span></th>
<th abbr="Wednesday" align="center"><span class="calendar">Wed</span></th>
<th abbr="Thursday" align="center"><span class="calendar">Thu</span></th>
<th abbr="Friday" align="center"><span class="calendar">Fri</span></th>
<th abbr="Saturday" align="center"><span class="calendar">Sat</span></th>
</tr>

<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>

<td align="center"><span class="calendar">
<MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank></span></td>

<MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>

</body>
</html>

また、新しくstylesheetも作る。
新しいインデックス・テンプレートを作る、で、
テンプレートの名前を"calendar stylesheet"に設定し内容を以下のようにする

A { color: #369; }
A:link { color: #369; }
A:visited { color: #369; }
A:active { color: #369; text-decoration: underline; }
A:hover { color: #369; text-decoration: underline; }
.calendar {
font-family:verdana, arial, sans-serif;
font-size: x-small;
color: #663;
font-weight:bold;
text-align:left;
text-transform:lowercase;
}

.calendarhead {
font-family:verdana, arial, sans-serif;
color:#600;
font-size:small;
font-weight:bold;
padding:2px;
text-align:left;
}

BLOGの設定→アーカイブの設定→新しく追加、で
アーカイブの種類をmonthlyに設定し、
テンプレートをcalendarにしてアーカイブをを作成。
これで、アーカイブは作成できたので、後は以下の内容を
index.htmlのテンプレートの好きな場所に張るだけで設定は完了です。

<div align="center" class="side">
<iframe name="cal-iframe" src="<MTBlogURL>archives/<MTDate format="%Y_%m">.html" frameborder="0" marginwidth="0" marginheight="0"></iframe>
</div>