Movable Type 4でカレンダーを表示する

blogではおなじみのカレンダー。もちろんMovable Typeにもその機能はあるが、設定が面倒くさい上に情報が少ない。Webでいろいろ調べて、なんとか表示するところまでこぎつけた。

①メニューから、デザイン→テンプレートを選択
②右側のクイックフィルタから、テンプレートモジュールをクリック
③サイドバー(2カラム)をクリック
※3カラムのレイアウトを使っている場合はサイドバー(3カラム)をクリック
④<div id="beta"><div id="beta-inner">のあとに以下のテキストを追加する

<div id="calendar">
<table summary="投稿されたエントリーへのリンク付き月間カレンダー">
<caption><MTArchiveList archive_type="Monthly" lastn="1"><$MTArchiveDate format="%B
%Y"$></MTArchiveList></caption>
<tr>
<th class="sunday" abbr="日曜日">日</th>
<th abbr="月曜日">月</th>
<th abbr="火曜日">火</th>
<th abbr="水曜日">水</th>
<th abbr="木曜日">木</th>
<th abbr="金曜日">金</th>
<th class="saturday" abbr="土曜日">土</th>
</tr>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryPermalink$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> </MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter> </MTCalendar>
</table>
</div>

⑤保存ボタンをクリック
⑥再度、メニューから、デザイン→テンプレートを選択
⑦スタイルシート(ベーステーマ)をクリック
⑧適当な場所(最後尾など)に以下のテキストを追加する

#calendar { line-height: 140%; color: #003300; font-family: Verdana, Arial, sans-serif; padding: 0px; text-align: center; margin-bottom: 5px; }

#calendar table {
font-size: 90%;
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 155px;
}

#calendar caption {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
color: #333333;
text-align: center;
background-color: #ffffff;
padding-top: 2px;
padding-bottom: 5px;
}

#calendar th {
text-align: center;
font-weight: normal;
background-color: #ebe8e1;
}

#calendar .sunday { background-color:#ffe6cc; }

#calendar .saturday { background-color:#ccffcc; }

#calendar td { text-align: center; }

#calendar a:link {
text-decoration: none;
color: #0033ff;
border-bottom: 1px solid #d97f26;
}

#calendar a:link:hover {
text-decoration: underline;
color: #ff3300;
border-bottom: 1px solid #d97f26;
}

#calendar a:link:active {
text-decoration: underline;
color: #0033ff;
border-bottom: 1px solid #d97f26;
}

#calendar a:visited {
text-decoration: none;
color: #0033ff;
border-bottom: 1px solid #d97f26;
}

#calendar a:visited:hover {
text-decoration: underline;
color: #ff3300;
border-bottom: 1px solid #d97f26;
}

#calendar a:visited:active {
text-decoration: underline;
color: #0033ff;
border-bottom: 1px solid #d97f26;
}

⑨保存ボタンをクリック
⑩サイトを再構築する

これでページのサイドバーに今月のカレンダーが表示され、日付をクリックするとその日のblogにジャンプする。

しかしいかにも設定が回りくどい。もっと高機能なカレンダーも作れるようだが、Movable Typeの解析を趣味とするような人にしか使いこなせない。本サイトもいろいろちょこちょことやりたいことがあるのだが、やり方がわからなくて頓挫している面もある。HTML手打ちの時代が懐かしいなぁ。