« カレンダーに本日表示をつける。 | main | Travis - Singles »
November 14, 2004
[MovableType] 月めくりカレンダーの導入。
さて前回もちょっと触れた左側のメニューにあるカレンダーの月送り化の話。
きままにポロポロさんを参考に月めくりカレンダーを導入してみました。
■月めくりカレンダー きままにポロポロ
FirefoxとIEでレイアウト確認してるんで、まぁ表示崩れ等はないかと。（Macは不明・・・）
ただ、うちの場合は上記サイトままの方式だと弊害（バックグラウンドカラーが本体とメニューで違う等）があるため、カレンダー用に別途スタイルシートを作る方式をとりました。
まずテンプレート > 新しいアーカイブ・テンプレートを作るからテンプレート名“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="170" 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>
<th abbr="日曜日"><font color="#CC0000">su</font></th>
<th abbr="月曜日"><font color="#000033">mo</font></th>
<th abbr="火曜日"><font color="#000033">tu</font></th>
<th abbr="水曜日"><font color="#000033">we</font></th>
<th abbr="木曜日"><font color="#000033">th</font></th>
<th abbr="金曜日"><font color="#000033">fr</font></th>
<th abbr="土曜日"><font color="#0000CC">sa</font></th>
</tr><MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader><td <MTCalendarIfToday>style="border : 1px solid #000033;"</MTCalendarIfToday>>
<MTCalendarIfEntries><MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" title="[<$MTEntryTitle$>]" target="_top">
<$MTCalendarDay$></a>
</MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar></table>
</div></body>
</html>
次にテンプレート > 新しいインデックス・テンプレートを作るからテンプレート名“Clendar Stylesheet ”、ファイル名“styles-cal.css”でカレンダー用のスタイルシートを作成。
body {
margin: 0px 0px 0px 0px;
background-color: #DDDDDD;
text-align: center;
}a {
text-decoration: underline;
}a:link {
color: #006699;
}a:visited {
color: #006699;
}a:active {
color: #CC0000;
}a:hover {
color: #CC0000;
}#calendar {
line-height: 140%;
color: #666666;
font-family: "Century Gothic", 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: #000033;
font-family: "Century Gothic", Verdana, Arial, sans-serif;
font-size: x-small;
border-bottom: 1px solid #000033;
text-align: center;
font-weight: bold;
text-transform: uppercase;
padding: 4px;
letter-spacing: .3em;
}#calendar th {
text-align: center;
font-weight: normal;
}#calendar td {
text-align: center;
}
最後に下記のソースをカレンダーを表示させたい箇所に埋め込んで完成です。
<div align="center">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php"
width="170" height="160" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>
まぁ、このままでは流用できない部分も多々あるとは思いますが、一応参考までにということで。当然、色やサイズなんかは任意で変更しないと使い物にならないかと。
特にスタイルシートなんかは公式サイトにある標準デザインのGettysburgを元に焼き直しまくってるんで無駄が多いと思いますし・・・
posted by kanegon : November 14, 2004 01:50 AM
comments
はじめまして。Jと言います。
なんとインパルスバイヤーさんがBLOGになったんですか。
サイトよく見てましたよ。
私もBLOGやってるんですが良かったらリンクさせていただけますか？
posted by J : November 14, 2004 03:11 PM
はじめまして。
夏頃からブログ化して細々と更新を続けておりますです。
だんだんスニーカーから離れて行っておりますが（笑）
リンクの件、了解いたしました。
こちらこそよろしくお願いいたします！
posted by kanegon : November 16, 2004 12:39 AM