top

ダイナミックで月送りカレンダー(6) MT4～現在の月iframe版

これはダイナミックで月送りカレンダー(5) MT4版～現在の月編のiframe版です。月別頁へ移動するのではなく、頁はそのままでカレンダーだけが移動するタイプです。javascriptやAjaxは使わずMTタグだけでの実装です。基本的にはこちらのカレンダーに現在の月を表示する機能を加えてMT4用に書き直したものになります。未来の月に記事があってもメインインデックスには現在の月を表示します。静的・動的どちらでも使えますので、カレンダーだけ静的にしたり、逆にカレンダーのみ動的にしたりといった使い方も出来ます。

  • iframeの中でカレンダーを移動させるので、頁は動かずカレンダーのみが移動するという形になります。
  • MTタグのみでの実装です。javascriptを使わずにカレンダーを表示させたいという場合にも。
  • テンプレートへの組み込みはウィジェットで簡単に出来るようにしました。
  • 月別・日別・エントリーアーカイブではその月に合致したカレンダーが表示されます。
  • メインページ・カテゴリでは記事の有無にかかわらず現在の月のカレンダーが表示されます。

１．テンプレートの作成
まずはインデックステンプレートとアーカイブテンプレートにカレンダー専用のテンプレートを作ります。

【インデックステンプレート】
カスタムインデックステンプレートで新規作成します。
（メイン・カテゴリ用：当月表示用カレンダー）

テンプレート名：カレンダー
出力ファイル名：calendar.html

<!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" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="Movable Type <$MTVersion$>" />
<link rel="stylesheet" href="<$MTBlogURL$>styles.css" type="text/css" />
<title><$MTBlogName encode_html="1"$>: カレンダー</title>
</head>
<body class="calendarbody">
<div class="widget-calendar">
<table summary="リンク付きのカレンダー">
<MTSetVarBlock name="thismonth"><$MTDate format="%Y%m"$></MTSetVarBlock>
<caption>
<MTArchiveList archive_type="Monthly">
<MTUnless name="prev">
<MTSetVarBlock name="prevmonth"><$MTArchiveDate format="%Y%m"$></MTSetVarBlock>
<MTIf name="prevmonth" lt="$thismonth">
<a href="<$MTBlogArchiveURL$>calendar/<$MTArchiveDate format="%Y_%m"$>.html">&lt;</a>&nbsp;&nbsp;
<MTSetVar name="prev" value="1">
</MTIf>
</MTUnless>
</MTArchiveList>
<$MTDate format="%B %Y"$>
<MTArchiveList archive_type="Monthly" sort_order="ascend">
<MTUnless name="next">
<MTSetVarBlock name="nextmonth"><$MTArchiveDate format="%Y%m"$></MTSetVarBlock>
<MTIf name="nextmonth" gt="$thismonth">
&nbsp;&nbsp;<a href="<$MTBlogArchiveURL$>calendar/<$MTArchiveDate format="%Y_%m"$>.html">&gt;</a>
<MTSetVar name="next" value="1">
</MTIf>
</MTUnless>
</MTArchiveList>
</caption>
<tr>
<th abbr="日曜日">日</th>
<th abbr="月曜日">月</th>
<th abbr="火曜日">火</th>
<th abbr="水曜日">水</th>
<th abbr="木曜日">木</th>
<th abbr="金曜日">金</th>
<th abbr="土曜日">土</th>
</tr>
<MTCalendar>
<MTCalendarWeekHeader><tr></mt:CalendarWeekHeader>
<td><MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>" target="_top"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>
</div>
</body>
</html>

【アーカイブテンプレート＞ブログ記事リスト】
ブログ記事リストで新規作成し、以下のようにアーカイブマッピングを決めます。
（日付アーカイブ・ブログ記事用）

テンプレート名：月移動カレンダー
アーカイブマッピング：月別
パス：calendar/<$MTArchiveDate format="%Y_%m"$>.html

<!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" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="Movable Type <$MTVersion$>" />
<link rel="stylesheet" href="<$MTBlogURL$>styles.css" type="text/css" />
<title><$MTBlogName encode_html="1"$>: カレンダー</title>
</head>
<body class="calendarbody">
<div class="widget-calendar">
<table summary="リンク付きのカレンダー">
<caption>
<MTArchivePrevious archive_type="Monthly">
<a href="<$MTBlogArchiveURL$>calendar/<$MTArchiveDate format="%Y_%m"$>.html">&lt;</a>&nbsp;&nbsp;
</MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext archive_type="Monthly">
&nbsp;&nbsp;<a href="<$MTBlogArchiveURL$>calendar/<$MTArchiveDate format="%Y_%m"$>.html">&gt;</a>
</MTArchiveNext>
</caption>
<tr>
<th abbr="日曜日">日</th>
<th abbr="月曜日">月</th>
<th abbr="火曜日">火</th>
<th abbr="水曜日">水</th>
<th abbr="木曜日">木</th>
<th abbr="金曜日">金</th>
<th abbr="土曜日">土</th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></mt:CalendarWeekHeader>
<td><MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>" target="_top"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>
</div>
</body>
</html>

２．ウィジェットの作成
テンプレートへの組み込み用に以下のウィジェットを作ります。赤字の部分はスタイルシートと組み合わせてバランスをとって下さい。以下の例はデフォルトテンプレートに合わせてあります。

ウィジェット名：カレンダー月移動

<div class="widget-calendar widget">
<h3 class="widget-header">カレンダー</h3>
<div class="calendar">
<iframe width="170" height="165" 
<MTIf name="datebased_only_archive">
src="<$MTBlogArchiveURL$>calendar/<$MTArchiveDate format="%Y_%m"$>.html" 
<MTElse>
<MTIf name="entry_template">
src="<$MTBlogArchiveURL$>calendar/<$MTEntryDate format="%Y_%m"$>.html" 
<MTElse>
src="<$MTBlogArchiveURL$>calendar.html" 
</MTIf>
</MTIf>
scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe>
</div>
</div>

３．スタイルシートの追加
iframeとバランスをとって設定します。お使いのテーマやテンプレートに合わせて微調整して下さい。以下の例はデフォルトテンプレートに幅や高さを合わせてあります。

.calendarbody {
font-size: 11px;
text-align: center;
background: #FFFFFF;
background: url("") 
}
.calendarbody a { color:#006699; }
.calendarbody a:hover { color:#999999; }
.calendar {
margin: 0px auto 0px auto;
width:170px;
text-align: center;
}
.widget-calendar table {
width: 160px;
}
.widget-calendar caption {
text-align: center;
padding-top:5px;
font-size:12px;
}
.widget-calendar th {
text-align: center;
font-size:12px;
}

＊カレンダー用テンプレートにはbodyにcalendarbodyというclassを作ってあります。サイドバーに背景色がついてるときにカレンダーの背景色も同じにすれば違和感なくカレンダーを表示出来ます。

４．ウィジェットのセット

080822_2.gif

「カレンダー月移動」ウィジェットを好きなところに配置。保存ボタンを押してブログを開けば各頁にカレンダーが表示されてます（静的の場合は再構築が必要です）。

【補足】
カレンダーのリンク先を日別アーカイブに変えたい場合は、テンプレートで日別アーカイブを作成した後、赤字の部分を以下のものと差し替えます。

<MTEntries><MTDateHeader>
<a href="<$MTEntryLink archive_type="Daily"$>" title="</MTDateHeader>[<$MTEntryTitle$>]<MTDateFooter>" target="_top">
<$MTCalendarDay$></a></MTDateFooter>
</MTEntries>

＊関連記事：ダイナミックで月送りカレンダー(4) MT4版

2008年10月28日 13:47 | カレンダー

← 　→

トラックバックの一覧

コメント

投稿者 ダーツマスター | 2009年5月26日 23:33

月送りカレンダー最高です＾＾

4.25でやらせて頂きました♪♪♪
問題なく稼動してます☆

他にも参考にさせて頂く物が沢山あって、
今後もチョコチョコ拝見させて頂きますね♪

これからも応援してます＾＾

投稿者 ＴＡＥＫＯ | 2009年5月27日 10:09

こんにちは。
思いつくたびにメモしているので、似たような記事がいっぱいあります(^^;が、参考になるのがあれば嬉しいです。
これからもよろしくお願いします。

投稿者 ランプベルジェ | 2009年10月15日 22:36

これ良いですね♪
ありがとうございます☆

投稿者 ＴＡＥＫＯ | 2009年10月16日 10:46

＞ランプベルジェさん
こんにちは。お役に立てたようで嬉しいです。
これからもよろしくお願いします。^^

投稿者 DYO | 2009年10月29日 00:17

すばらしい！
時間がなかったので本当に助かりました。
ありがとうございました。

投稿者 ＴＡＥＫＯ | 2009年10月29日 15:52

＞DYOさん
こんにちは。
少しでも参考になりましたら嬉しいです。
これからもよろしくお願いします。

投稿者 Y.bird（イエロー.バード） | 2009年11月 1日 19:21

トラックバックさせていただいた、Y.bird（イエロー.バード）です。

月送りカレンダー設置できました。
ありがとうございました。
http://illustotes.com/diary/calendar/

投稿者 ＴＡＥＫＯ | 2009年11月 2日 10:11

＞Y.bird（イエロー.バード）さん
こんにちは。
お役に立てて嬉しいです。トラバもありがとうございます。
これからもよろしくお願いします。

投稿者 りゅうこ | 2009年11月12日 01:18

はじめまして。
イベントカレンダー作成中、未来の月のカレンダー表示でつまづいていました。
ajaxで作成してみましたが、MT初心者の私にはエラーの修正さえできず途方に暮れていたところ、貴記事を拝見してまさに絶望の淵から這い上がりました！！

本当に感謝しつくせません。

ありがとうございました。

投稿者 ＴＡＥＫＯ | 2009年11月13日 10:26

＞りゅうこさん
こちらこそ初めまして。お役にたてて嬉しいです。
プラグインや他に知識が必要なプログラムは使わなくても、MTタグだけで実装出来ることってけっこうあるんですよね。
これからもよろしくお願いします。