●ブログの月送りカレンダー
ブログをメモ用のデータベースとして使いやすいものにするべく
やはりカレンダーも月送りになった方が良いだろうとやり方を調べてみた。
MovableTypeにはその機能を備えているものの、ディフォルトのテンプレートでは使われていないらしい。
まずは、カレンダーの表示箇所を他を参考にしながら以下の通りに書き換えてみた。
併せて、アーカイブのテンプレートも2コラム形式に書き換えてカレンダーを表示させるようにしてみた。
ただしメインページからいらないと思われる項目は削っておく。
(カウント・最近の投稿・google検索)
<h2 class="module-header">カレンダー</h2>
<div class="module-content">
<div id="calendar">
<MTArchiveList archive_type="Monthly" lastn="1">
<table summary="投稿されたエントリーへのリンク付き月間カレンダー">
<caption>
<MTArchivePrevious>
<a href="<$MTArchiveLink$>" title="<$MTArchiveTitle$>">« </a>
</MTArchivePrevious>
<$MTArchiveTitle$>
<MTArchiveNext>
<a href="<$MTArchiveLink$>" title="<$MTArchiveTitle$>"> »</a>
</MTArchiveNext>
</caption>
<tr>
<th abbr="日曜日">sun</th>
<th abbr="月曜日">mon</th>
<th abbr="火曜日">tue</th>
<th abbr="水曜日">wed</th>
<th abbr="木曜日">thu</th>
<th abbr="金曜日">fri</th>
<th abbr="土曜日">sat</th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td<MTCalendarIfToday> class="today"</MTCalendarIfToday>><MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryPermalink$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> </MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>
</MTArchiveList>
</div>
</div>
う~んこうれだと前月の内容を表示させても今月のカレンダーを表示してしまうのね。
しょうがないので更にいじってみる。
幸い、月送りのカレンダーの設定方法が細かく書かれたサイトがあったのでそのまま引用させていただく。
引用: 小粋空間:月送りカレンダー
1.カレンダー用ディレクトリ設定
Movable Type、管理メニューの「設定」→「公開」の「アーカイブの設定」にチェックをいれ、その下に表示されたフォームに下記の内容を設定する。
アーカイブURL:http://ブログURL/archives/
アーカイブパス:アーカイブURLまでのパス
例えば当サイトであれば
アーカイブURL:
http://y-sky.net/blog/archives/
アーカイブパス:
/home/sites/lolipop.jp/users/lolipop.jp-dp08079804/web/blog/archives
という具合になる。
2.カレンダー用スタイルシート作成
管理メニューの「テンプレート」→「インデックス」→「テンプレートを新規作成」をクリック。
次画面で下記を設定する。
設定が終わったら「保存」をクリック。
テンプレートの名前:style-calendar
出力ファイル名:calendar.css
テンプレートの中身:下記
@charset "utf-8";
body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, sans-serif;
}
.calendar {
color: #444444;
text-align: center;
}
.calendarhead {
font-size: 9px;
letter-spacing: .2em;
}
.calendar table {
padding: 0;
border-collapse: collapse;
}
.calendar th {
padding-top: 5px;
font-size:8px;
width : 20px ;
}
.calendar td {
padding: 2px 0;
font-size:10px;
line-height: 120%;
}
.today {
display: block;
border: 1px solid #444444;
}
.holiday {
color: #e50003;
}
.saturday {
color: #0000ff;
}
3.カレンダー用アーカイブテンプレート作成
管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。
次画面で下記を設定する。
設定が終わったら「保存」をクリック。
テンプレートの名前:カレンダー
テンプレートの内容:下記(本日の日付部分がboldになるように記述)
<!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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" /><title><$MTBlogName$></title>
<link rel="stylesheet" href="<$MTBlogURL$>calendar.css" type="text/css" />
</head>
<body >
<div class="calendar">
<table summary="<$MTArchiveDate format="%Y/%m"$>">
<caption class="calendarhead">
<MTArchivePrevious>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.html"><</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$>
<MTArchiveNext>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.html">></a>
</MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday" ><span class="holiday">Sun</span></th>
<th abbr="Monday" >Mon</th>
<th abbr="Tuesday" >Tue</th>
<th abbr="Wednesday" >Wed</th>
<th abbr="Thursday" >Thu</th>
<th abbr="Friday" >Fri</th>
<th abbr="Saturday" ><span class="saturday">Sat</span></th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span<MTCalendarIfToday> class="today"</MTCalendarIfToday>></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</body>
</html>
4.ファイルの関連付け
予め、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成 」をクリックして下記の設定を実施する。
アーカイブの種類:月別(またはMonthly)
テンプレート:カレンダー
設定後、「追加」をクリック。
正常に保存されると下の「月別」の欄にカレンダーテンプレートが追加される。
追加された部分の設定は下記の通り。
ラジオボタン:日付アーカイブ(またはDate-Based Archive)のまま出力フォーマット:下記
calendar/%y/%m/index.html
5.カレンダーの設置
「テンプレートの編集」 で各テンプレートのカレンダー表示用タグを削除し、下のタグと入れ替えてる。
<div align="center" class="side">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.html" width="150" height="115" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>
6.サイトの再構築