トップページに表示させているカレンダーが当月分しか表示できなくていまいちなので、diving to ...: 月間移動可能なMovableTypeのカレンダーを参考にしてカレンダーを作り変えてみた。
下記の様に設定したアーカイブテンプレート"calendar"をまず用意する。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1./ 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$>styles-cal.css" type="text/css" /> <MTBlogIfCCLicense> <$MTCCLicenseRDF$> </MTBlogIfCCLicense> </head> <body> <div id="calendar" align="center"> <table table width="160" border="0" cellspacing="4" cellpadding="0" summary="投稿されたエントリーへのリンク付き月間カレンダー"> <caption> <MTArchivePrevious> <a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.php"> <<</a> </MTArchivePrevious> <$MTArchiveDate format="%B %Y"$> <MTArchiveNext> <a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.php"> >></a> </MTArchiveNext> </caption> <tr height="20"> <th abbr="Sunday" align="center">日</th> <th abbr="Monday" align="center">月</th> <th abbr="Tuesday" align="center">火</th> <th abbr="Wednesday" align="center">水</th> <th abbr="Thursday" align="center">木</th> <th abbr="Friday" align="center">金</th> <th abbr="Saturday" align="center">土</th> </tr> <MTCalendar month="this"> <MTCalendarWeekHeader><tr></MTCalendarWeekHeader> <td align="center"><span class="calendar"> <MTCalendarIfEntries><MTEntries lastn="1"> <a href="<$MTEntryLink archive_type="Daily"$>" title="[<$MTEntryTitle$>]" target="_top"> <$MTCalendarDay$></a> </MTEntries></MTCalendarIfEntries> <MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries> <MTCalendarIfBlank> </MTCalendarIfBlank></span></td> <MTCalendarWeekFooter></tr></MTCalendarWeekFooter> </MTCalendar> </table> </div> </body> </html>
で、"ウェブログの設定"-"アーカイブの設定"ページの、"新しく、テンプレートとアーカイブを関連付ける。"の項目で、"アーカイブの種類"を"月別"に、"テンプレート"を"Calendar"にして追加。
さらに、下記のようなCalendarページ用スタイルシートをテンプレートで定義。
body {
margin: 0px 0px 0px 0px;
background-color: #FFFFFF;
text-align: center;
}
a {
text-decoration: underline;
}
a:link {
color: #8FABBE;
}
a:visited {
color: #8FABBE;
}
a:active {
color: #8FABBE;
}
a:hover {
color: #006699;
}
#calendar {
line-height: 140%;
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
padding: 2px;
text-align: center;
margin-bottom: 20px;
}
#calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 100%;
}
#calendar caption {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .3em;
}
#calendar th {
text-align: center;
font-weight: normal;
}
#calendar td {
text-align: center;
}
あとは"Main Index"テンプレートの適当な場所に下記のタグを貼って再構築すれば完成。
<div align="center"> <iframe class="calendar" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe> </div>
いつ更新をサボったのか分かり易くなってしまったのがまずいな。
コメントする