小粋空間さまのyujiroさまにご指導頂き
Ajax 月送りカレンダー（横型）を設置。
参考：
Ajax 月送りカレンダー（横型）
1.スクリプトのダウンロード・アップロード
下記のスクリプトをダウンロードします。
prototype.js
ajaxCalendar.js
dayChecker.js
ダウンロードした ajaxCalendar.js・dayChecker.js・prototype.js はダウンロードした
メインページと同じディレクトリにアップロード。
2.カレンダーテンプレート作成
●デザイン⇒テンプレート⇒アーカイブテンプレート
アーカイブテンプレート（ブログ記事リスト）を新規作成
テンプレート名称：カレンダー
ファイルへのリンク：不要
テンプレートの内容：下記をコピーする。
<div title="<$MTArchiveDate format="%Y/%m"$>">
<span class="calendarHead">
<MTArchivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">＜</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y" language="en"$>
<MTArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">＞</a>
</MTArchiveNext> |
</span>
<MTCalendar month="this">
<MTCalendarIfEntries><span><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><span><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></MTElse></MTCalendarIfBlank>
</MTCalendar>
</div>
設定が終わったら保存する。
3.カレンダーテンプレートを月別アーカイブに関連付け
上記を保存すると同じページの下に「アーカイブマッピング」の項目が表示されていますので
「新しいアーカイブマッピングを作成」
「種類」から「月別」を選択して「追加」をクリック。
注：「月別」欄の右側にあるチェックボックスは絶対にチェックしないで下さい。
次に「パス」欄の右にあるセレクトボックスより「カスタム」を選択し下記の内容を設定して
保存する。
calendar/%y/%m/%i
4.日別アーカイブの追加
●デザイン⇒テンプレート⇒アーカイブテンプレート⇒ブログ記事リスト
アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリックする。
「日別」を選択して「追加」をクリックして日別アーカイブが追加される。
5.外部ファイルのインクルード
●デザイン⇒テンプレート⇒テンプレートモジュール⇒ヘッダー
<head>～</head>の間に下記を追加。
<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>
6.カレンダー表示部分の設定
●デザイン⇒テンプレート⇒テンプレートモジュール⇒ヘッダー
<div id="header">
<h1 id="blog-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<MTIfNonEmpty tag="BlogDescription"><p class="blog-description"><$MTBlogDescription encode_html="1"$></p></MTIfNonEmpty>
<div id="calendar">loading ...</div>
<script type="text/javascript">
getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="archives/calendar/%Y/%m/" $></MTEntries>");
</script>
7.CSS修正
●デザイン⇒テンプレート⇒インデックステンプレート⇒スタイルシート(メイン)
下記をスタイルシートに追加します。既にカレンダー関係のスタイル設定が行われている
場合は競合を避けるため、古い設定を削除（またはコメントアウト）して下さい。
#calendar {
text-align: center;
padding: 5px 0;
border-bottom : 1px solid #999999;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color:#666666;
}
#calendar a,
#calendar a:link,
#calendar a:visited {
color: #8fabbe;
}
#calendar a:hover {
text-decoration: underline;
}
#calendar a:active {
color: #8fabbe;
}
#calendar .calendarHead {
color:#666666;
padding-right: 5px;
}
#calendar .today {
border : 1px solid #444444;
padding: 0 2px;
}
#calendar .holiday,
#calendar .holiday a:link,
#calendar .holiday a:visited {
color: #e50003;
}
#calendar .saturday,
#calendar .saturday a:link,
#calendar .saturday a:visited {
color: #0000ff;
}
#calendar .tholiday {
border: 1px solid #444444;
padding: 0 2px;
color: #e50003;
}
#calendar .tholiday a:link,
#calendar .tholiday a:visited {
color: #e50003;
}
#calendar .tsaturday {
border: 1px solid #444444;
padding: 0 2px;
color: #0000ff;
}
#calendar .tsaturday a:link,
#calendar .tsaturday a:visited {
color: #0000ff;
}
