月送り型カレンダー (iframe版)｜Materializing [マテリアライジング]

デフォルトのカレンダーは、当月のみの表示となっているので、これを月送り出来るようにカスタマイズして、ちょっと便利にします。

カレンダー用スタイルシートの作成

テンプレート名 → カレンダー用スタイルシート
calendar.css
内容 → 下記コード

@charset "<$MTPublishCharset$>";
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;
}

カレンダー用アーカイブテンプレートの作成

テンプレート → アーカイブ → テンプレートを新規作成

テンプレート名 → 月送りカレンダー
内容 → 下記コード

<!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="<$MTBlogArchiveURL$>calendar/<MTArchiveDate format="%Y/%m/">">＜</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$> 
<MTArchiveNext>
<a href="<$MTBlogArchiveURL$>calendar/<MTArchiveDate format="%Y/%m/">">＞</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>

アーカイブ・マッピングの関連付け

設定 → 公開 → アーカイブ・マッピングマッピングを新規作成を選択

アーカイブの種類 → 月別
テンプレート → 月送りカレンダー

※アーカイブ・マッピングの「日別アーカイブ」にチェックを入れて、日別アーカイブの生成を有効にしておきます。

出力フォーマットの変更

上記アーカイブマッピングのテンプレート名「月送りカレンダー」の「カスタマイズ」を選んで変更します。
※「優先」チェックは変更しません。(日付アーカイブのまま)

下記コード

calendar/%y/%m/%i

以上で

<$MTArchiveDate format="calendar/%Y/%m/index.html(php)"$>
又は
<$MTArchiveDate format="calendar/%Y/%m/"$>

としてカレンダー・アーカイブが追加されます。

カレンダー設置

下記コードを任意の箇所に記述します。

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

以上

■小粋空間: 月送りカレンダー　[小粋空間]

2006/10/25 22:03:48：記事書き直し

月送り型カレンダー (iframe版)

カレンダー用スタイルシートの作成

カレンダー用アーカイブテンプレートの作成

アーカイブ・マッピングの関連付け

出力フォーマットの変更

カレンダー設置

カテゴリ

トラックバック(0)

About This Site