月送りカレンダー

   

cal00.jpg月送りカレンダーにしようと週末から少しずつ弄っていてようやく思い通りの見た目になったので、晴れて公開。
基本的には、小粋空間さんところの月送りカレンダーをそのまま使わせてもらいました(yujiroさん、いつもありがとうございます)。どうしても見た目をこちらのようにしたかったので、ソースを見たり、FirefoxエクステンションのWebDeveloperでCSSを参照したりしながら、なんとか似た感じの見た目にできました。(状態保持は今度チャレンジします。)
TB:月送りカレンダー by 小粋空間


以下、作業覚書。
1.calendarディレクトリ作成
2.calendar用CSS作成

@charset "utf-8";
body {
color: #333;
background: #ffffff;
margin: 0px 0px 0px 0px;
}
.calendar {
border: 1px solid #CCC;
font-family: Verdana, Arial, sans-serif;
text-align: center;
color: #666666;
font-weight: normal;
letter-spacing: normal;
text-decoration: none;*/
background: none;
}
.calendar th {
font-size:8px;
width : 20px ;
}
.calendar td {
background: #EEE;
font-size:9px;
height: 15px;
}
#calendar tr {
height: 15px;
}
.calendar table {
margin: 0px auto;
padding: 0px;
text-align: center;
}
.calendar td a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
background: #e5f3fc;
color: #83caf8;
}
.calendar td a:hover {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
background: #009DE0;
color: #105471;
}

3.アーカイブテンプレ(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$>calendar.css" type="text/css" />
<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>
</head>
<body >
<div id="links">
<div class="calendar">
<table width="100%" border="0" cellspacing="1" cellpadding="0" summary="Monthly calendar with links to each day's posts">
<tr>
<td><MTArchivePrevious>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.html"><</a>
</MTArchivePrevious></td>
<td colspan="5"><$MTArchiveDate format="%B %Y"$></td>
<td><MTArchiveNext>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.html">></a>
</MTArchiveNext></td>
</tr>
<tr height="15">
<th abbr="Sunday" align="center" valign="bottom"><font color="#e50003">S</font></th>
<th abbr="Monday" align="center" valign="bottom">M</th>
<th abbr="Tuesday" align="center" valign="bottom">T</th>
<th abbr="Wednesday" align="center" valign="bottom">W</th>
<th abbr="Thursday" align="center" valign="bottom">T</th>
<th abbr="Friday" align="center" valign="bottom">F</th>
<th abbr="Saturday" align="center" valign="bottom"><font color="blue">S</font></th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td class="calendar" align="center" style="<MTCalendarIfToday> border:solid 1px orange;</MTCalendarIfToday>" bgcolor="<$MTCalendarColor$>">
<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>
</div>
</body>
</html>

4.ファイル関連づけ(月、calendar)

<$MTArchiveDate format="calendar/%Y/%m/index.html"$>

(phpをhtmlに変更してます)
5.テンプレモジュール(calendar)作成

<div align="center" class="side">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.html" width="162" height="143" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>

6.各ファイルにインクルード

<$MTInclude module="calendar"$>

7.リビルド
COPYRIGHT (c) 小粋空間
This work is licensed under :小粋空間's CCL

 - Customize