Movable TypeのテンプレートでもってAjaxを使った便利な月送りカレンダーが作れます。作り方は小粋空間のAjax 月送りカレンダー(MT4版)を参考にしました。同様の方法でMT5でもきちんと機能しました。ここではMovable Type 5以降での設定方法を紹介します。
1. Ajaxのライブラリースクリプトをダウンロードします。MT-Ajax-calendar.zip
2. 適当な場所に解凍し、MT-Ajax-calendarフォルダーの中に含まれるajaxCalendar.js、dayChecker.js、prototype.jsの3つのファイルをMTのパブリッシングディレクトリの最上位(index.htmlやindex.phpのあるディレクトリ)にアップロードします。特にこれらのファイルの場所は決まっていませんが、スクリプトを呼び出す際にトップディレクトリの方がわかりやすいです。
設定
1. テンプレートモジュールの「HTMLヘッダー」内に、以下のコードで上記のライブラリースクリプトを呼び出します。
2. コードを書いたら(コピーしたら)保存します。
1. 左メニューの「デザイン」から「テンプレート」を選択します。
2. アーカイブテンプレートの作成で「ブログ記事リスト」を選択します。これで新しいブログ記事リストを編集する画面に移ります。
3. テンプレートの編集画面で、テンプレート名を「カレンダー」にします。(もちろんテンプレート名は任意ですが、ここではわかりやすく「カレンダー」にしています。)
4. 以下のコードをテンプレートに貼り付けます。
6. 新しく作成した月別のアーカイブマッピングからプルダウンで「カスタム」を選択します。「calendar/%y/%m/%i」を入力します。
7. 最後に設定を確認してから保存します。
*1 アーカイブマッピングの設定フィールドがない場合は、一度そのまま「保存」をします。保存が完了したらアーカイブマッピングの設定フィールドが出現する筈です。
1. 同じくアーカイブテンプレートの一覧から「カテゴリー別ブログ記事リスト」を選択します。
2. 編集画面の下部にある、「テンプレートの設定」をクリックします。
3. ファイルへのリンクは空のままにします。アーカイブマッピングの項目で「新しいアーカイブマッピングを作成」を選択します。種類では「日別」を選び「追加」ボタンを押します。設定が終わったら保存します。
4. 「カテゴリー別ブログ記事リスト」に以下の二つのアーカイブマッピングが設定されていることを確認してください。
1. 左メニューの「デザイン」から「ウィジェット」を選択します。「ウィジェットテンプレート」から「ウィジェットテンプレートの作成」を選択します。
2. ウィジェット名には「Ajaxカレンダー」とします。(もちろん任意で構いません。)
3. ウィジェット内に以下のコードを貼り付けます。
5. ウィジェットセットを選択し、カレンダーを表示させたい場所に先の「Ajaxカレンダー」をドラッグして設定します。最後に設定を保存します。
CSSは便宜調整してください。
Ajaxのライブラリースクリプトをダウンロードと設定
ダウンロード1. Ajaxのライブラリースクリプトをダウンロードします。MT-Ajax-calendar.zip
2. 適当な場所に解凍し、MT-Ajax-calendarフォルダーの中に含まれるajaxCalendar.js、dayChecker.js、prototype.jsの3つのファイルをMTのパブリッシングディレクトリの最上位(index.htmlやindex.phpのあるディレクトリ)にアップロードします。特にこれらのファイルの場所は決まっていませんが、スクリプトを呼び出す際にトップディレクトリの方がわかりやすいです。
設定
1. テンプレートモジュールの「HTMLヘッダー」内に、以下のコードで上記のライブラリースクリプトを呼び出します。
<script type="text/javascript" src="<$mt:BlogURL$>prototype.js"></script>※もしこの3つのスクリプトを別のディレクトリに配置している場合はそのディレクトリを指定します。
<script type="text/javascript" src="<$mt:BlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$mt:BlogURL$>dayChecker.js"></script>
2. コードを書いたら(コピーしたら)保存します。
アーカイブテンプレートの設定
カレンダーをクリックした際にそれらのブログにリンクできるようにアーカイブテンプレートの設定をします。1. 左メニューの「デザイン」から「テンプレート」を選択します。
2. アーカイブテンプレートの作成で「ブログ記事リスト」を選択します。これで新しいブログ記事リストを編集する画面に移ります。
3. テンプレートの編集画面で、テンプレート名を「カレンダー」にします。(もちろんテンプレート名は任意ですが、ここではわかりやすく「カレンダー」にしています。)
4. 以下のコードをテンプレートに貼り付けます。
<table summary="<MTArchiveDate format="%Y/%m">">5. 下部のテンプレートの設定を開きます。ファイルへのリンクは空のままにしておきます。アーカイブマッピングから「新しいアーカイブマッピングを作成」を選択(*1)し、種類で「月別」を選択し「追加」ボタンを押します。「yy/mm/index.html」というマッピングが作成されます。
<caption class="calendarhead">
<MTArchivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');"><</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$>
<MTArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');" >></a>
</MTArchiveNext>
</caption>
<tr height="15">
<th abbr="Sunday" class="sunday">Sun</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" class="saturday">Sat</th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
6. 新しく作成した月別のアーカイブマッピングからプルダウンで「カスタム」を選択します。「calendar/%y/%m/%i」を入力します。
7. 最後に設定を確認してから保存します。
*1 アーカイブマッピングの設定フィールドがない場合は、一度そのまま「保存」をします。保存が完了したらアーカイブマッピングの設定フィールドが出現する筈です。
カテゴリー別ブログ記事リスト新しい日付アーカイブマッピングを追加
日付別の新しいアーカイブマッピングを設定しないと再構築時にエラーが発生します。Movable Type 4では「ブログ記事リスト」にアーカイブマッピングを追加しましたが、Movable Type 5では「カテゴリー別ブログ記事リスト」に日付のアーカイブマッピングを追加します。1. 同じくアーカイブテンプレートの一覧から「カテゴリー別ブログ記事リスト」を選択します。
2. 編集画面の下部にある、「テンプレートの設定」をクリックします。
3. ファイルへのリンクは空のままにします。アーカイブマッピングの項目で「新しいアーカイブマッピングを作成」を選択します。種類では「日別」を選び「追加」ボタンを押します。設定が終わったら保存します。
4. 「カテゴリー別ブログ記事リスト」に以下の二つのアーカイブマッピングが設定されていることを確認してください。
- yyyy/mm/dd/index.html
- category/sub-category/index.html
ウィジェットの設定
Ajaxのカレンダーを表示するためのウィジェットを作成します。1. 左メニューの「デザイン」から「ウィジェット」を選択します。「ウィジェットテンプレート」から「ウィジェットテンプレートの作成」を選択します。
2. ウィジェット名には「Ajaxカレンダー」とします。(もちろん任意で構いません。)
3. ウィジェット内に以下のコードを貼り付けます。
<div id="calendar"></div>4. 設定が終わったら保存します。
<script type="text/javascript">
getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogArchiveURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
</script>
5. ウィジェットセットを選択し、カレンダーを表示させたい場所に先の「Ajaxカレンダー」をドラッグして設定します。最後に設定を保存します。
CSSのセット
カレンダーのデザインを適用するためにCSSを設定します。CSSは様々な方法で設定している可能性があるので、ここではコードだけを書いておきますので便宜使用してください。また、過去のカレンダーとのCSSと競合する可能性があるのでCSSファイルの一番最後に付け加えるか、これまで使用していたカレンダーのウィジェットとCSSを外しておく必要があるかもしれません。CSSは便宜調整してください。
/*Ajax Calendar*/最後に再構築をします。エラー無く再構築が終了すればOKです。指定した場所に月送りカレンダーが表示されていると思います。
#calendar {
margin: 5px 0 10px;
color: #444444;
margin-top: 15px;
}
.calendarhead {
padding-bottom: 5px;
font-size: 9px;
letter-spacing: 0.2em;
}
#calendar table {
padding: 0;
border-collapse: collapse;
}
#calendar th {
padding-bottom: 3px;
text-align: center;
font-size: 10px;
width: 23px;
}
#calendar td {
padding: 2px 0;
text-align: center;
font-size: 11px;
line-height: 120%;
}
.today { /*本日のスタイル*/
display: block;
/*border: 1px solid #444444;*/
/*font-weight: bold;*/
color:#339900;
text-decoration: underline;
}
.sunday, /*日曜祝日のスタイル*/
.holiday,
.holiday a:link,
.holiday a:visited {
color: #ff6600;
}
.saturday, /*土曜日のスタイル*/
.saturday a:link,
.saturday a:visited {
color: #006699;
}



