top

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

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

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

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

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

テンプレート名:カレンダー
出力ファイル名: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>

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

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

<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>

3.スタイルシートの追加
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を作ってあります。サイドバーに背景色がついてるときにカレンダーの背景色も同じにすれば違和感なくカレンダーを表示出来ます。

4.ウィジェットのセット

080822_2.gif

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

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

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

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

 

トラックバックURL

トラックバックされる際にはこの記事へのリンクをお願い致します

トラックバックの一覧

コメント

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コメントを投稿

 


 <注意>
 ご利用のブラウザ、設定ではコメントのプレビューおよび投稿はご利用になれません。
 コメント投稿の際はお手数ですがjavascriptをオンにして下さい。
 *javascriptオフのまま投稿ボタンを押すと送信内容が消えますのでご注意下さい。