top

ダイナミックで月送りカレンダー(1) iframe版

こちらこちらでカレンダーを追加してみましたが、これだとどの月のアーカイブでも最新のカレンダーになってしまいます。10月のアーカイブには10月のカレンダーを、11月のアーカイブには11月のカレンダーを表示させたい! ネットを探してみたら、ちょっとタグに追加するだけでそれが実現することが分かりました。

小粋空間さん 月送りカレンダー(簡易版)

しかし、このままではダイナミックパブリッシングの場合は正常にカレンダーが生成されないので、使えません…。 すみません、使えます(^^;。ダイナミックでこの簡易版月送りカレンダーを使う方法の詳細はこちらをご覧下さい。

ただ、この方法では自分的にはちょっと物足りません。月別頁だけでなく、個別頁にもその月のカレンダーを表示させ、なおかつカレンダーの移動先をクリックしたらその月のアーカイブへ飛べるようにしたいのです。トップ頁にも前月のアーカイブへ移動できるリンクが欲しいのです。

そこで、こちらの月送りカレンダーのアイデアを借用して自分なりに工夫してみました。これならカレンダー部分のみを静的生成にすることも可能です。カレンダーは重いパーツなので、ダイナミックでその都度生成させるよりはカレンダーの部分だけはあらかじめ静的生成で作っておき、ダイナミック時には既に出来上がっているHTMLを読みにいくだけにした方が動作的にも軽くなると思われるので、今回はその方法を取ってみることにしました。

以下、ダイナミック・パブリッシングで月送りカレンダーを作成するための覚え書きです。

下準備
「設定」→「公開の設定」→「公開」の中の「再構築オプション」の確認をします。もし、「アーカイブのみダイナミック・パブリッシングで出力します」になっていたら、「テンプレート別に、スタティックHTMLもしくはダイナミック・パブリッシングを選択します」を選んでチェックし、保存→再構築。作業の前に、テンプレートごとに静的・動的を選べる環境に整えておきます。

1.静的生成用のカレンダーアーカイブを作成する
「テンプレート」→「アーカイブ」と進み、「テンプレートを新規作成」で以下のソースを記入、テンプレート名「カレンダー」で保存する。
「このテンプレートをダイナミック・ページにする」のチェックは外しておくこと。

●カレンダーの飛ぶ先を個別のエントリーアーカイブにする場合

<!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-site.css"
type="text/css" />
<title><$MTBlogName encode_html="1"$>: カレンダー</title>
</head>
<body class="calendarbody">
<div class="module-calendar module">
<table summary="投稿されたエントリーへのリンク付き月間カレンダー">
<caption>
<MTArchivePrevious>
<a href="<$MTArchiveLink$>" target="_top">&lt;</a>&nbsp;&nbsp;
</MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext>
&nbsp;&nbsp;<a href="<$MTArchiveLink$>" target="_top">&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></MTCalendarWeekHeader>

<td><MTCalendarIfEntries><MTEntries lastn="1">
<a title="<$MTEntryTitle$>" href="<$MTEntryPermalink$>" target="_top">
<$MTCalendarDay$></a>
</MTEntries></MTCalendarIfEntries>

<MTCalendarIfNoEntries><$MTCalendarDay$>
</MTCalendarIfNoEntries>
<MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank>
</td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>
</div>
</body>
</html>

●カレンダーの飛ぶ先を日別アーカイブにする場合
「設定>アーカイブマッピング」で日別アーカイブにチェックを入れ、上の緑字の部分を以下の内容と置き換えます。日に複数エントリーがある場合はこちらの方が便利です。

<MTCalendarIfEntries><MTEntries><MTDateHeader>
<a href="<$MTEntryPermalink archive_type="Daily"$>" title="</MTDateHeader><$MTEntryTitle$><MTDateFooter>" target="_top">
<$MTCalendarDay$></a>
<MTElse>&nbsp;|&nbsp;</MTElse></MTDateFooter>
</MTEntries></MTCalendarIfEntries>

2.アーカイブマッピングでカレンダーアーカイブのURLを決定しておく
「設定」→「公開の設定」→「アーカイブ・マッピング」で「マッピングを新規作成」をクリックします。

 アーカイブの種類:月別
 テンプレート:日付アーカイブ カレンダー

にして、追加をクリック。

 名前:カレンダー
 出力フォーマット:calendar/<$MTArchiveDate format="%Y_%m"$>.html

にして保存します。これでcalendarディレクトリー内に2005_12.htmlなどという名前でカレンダーのファイルが生成されるようになります。

3.カレンダー用のスタイルシートを追加
styles-site.css内に以下の内容を追加します(一番下でかまいません)。赤字の部分は各自の設定に合わせて好きなように変えて下さい。
*ブログ本体には固定背景を使用するがカレンダーには背景を入れたくない場合などを考慮して(自分がよくやるので)カレンダー用スタイルシートにはbody属性も加えてあります。

/* 月移動カレンダー */

.calendarbody {
font-size: 9px;
line-height: 1.1;
color: #666666;
background: #e5dfc7;
background: url("")
}
.module-calendar table {
width: 138px;
}
.module-calendar caption {
padding-bottom:5px;
}
.module-calendar th {
}
.module-calendar a { color: #e15428; }
.module-calendar a:hover { color: #c0d09e; }

4.日付アーカイブ・エントリーアーカイブ用挿入タグ
(その月・日に合致したカレンダーが表示される)

テンプレートのカレンダーを表示させたい位置に以下のタグを挿入します。赤字の部分は各自の設定に合わせて変えること。

<iframe width="140" height="121" src="<$MTBlogURL$>calendar/<$MTArchiveDate format="%Y_%m"$>.html" scrolling="no" frameborder="0" marginwidth="0" marginheight="0">
</iframe>

5.メインページ・アーカイブページ・カテゴリーアーカイブ用挿入タグ
(常に最新のカレンダーが表示される)

テンプレートのカレンダーを表示させたい位置に以下のタグを挿入します。赤字の部分は各自の設定に合わせて変えること。

<MTArchiveList archive_type="Monthly" lastn="1">
<iframe width="140" height="121" src="<$MTBlogURL$>calendar/<$MTArchiveDate format="%Y_%m"$>.html" scrolling="no" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</MTArchiveList>

*日付アーカイブなど該当月のカレンダーを表示させたい頁と、メインページなど月に関係なく常に最新のカレンダーを表示させたい頁では、挿入する<iframe>タグを上記のように変えて使い分けるようにします。


【応用】前月・次月の飛ぶ先をiframe内で移動させる
このカスタマイズでは前月・次月の飛ぶ先は月別アーカイブになっていますが、頁は動かさずiframe内でカレンダーのみ移動させたい場合もあると思います。その場合はカレンダーソース内の青字の部分を以下のタグで置き換えます。

<a href="<$MTBlogURL$>calendar/<$MTArchiveDate format="%Y_%m"$>.html">

*アーカイブの設定にチェックを付けている場合は、<$MTBlogURL$>の代わりに<$MTBlogArchiveURL$>を使う方がよいみたいです。

<一言ポイント>
当ブログのカスタマイズ方法なら、参照リンク先にある「1日に表示されなくなる不具合」は生じません。ポイントはiframeで呼び出すタグを<MTDate format="○○">から<$MTArchiveDate format="○○"$>に変更するだけです。たったこれだけのことで簡単に問題解決します。

また、ジャンプ先のカレンダーは常にその月のカレンダーが表示されますので、「状態保持のためのスクリプト」を入れる必要もありません(ジャンプ先からトップに戻った場合はちゃんと当月カレンダーに戻ります)。PHPもJavaScriptも使わずMTタグのみで従来の月送りカレンダーのかかえていた問題を全て解消できています。

関連するエントリー:ダイナミックで月送りカレンダー(3) 非iframe版

(2006年3月7日追記)
(2006年11月11日 一部修正と日別アーカイブへ飛ぶ方法追記)
(2006年12月5日 iframe内でカレンダーを移動させる応用編追加)

 

トラックバックURL

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

トラックバックの一覧

トラックバック カレンダーはこちらから  »» 2006年11月10日 20:48

ダイナミックパブリッシング化をしてからページレイアウトを変更し、カレンダーを設置したのだが、以前から月送りにしたいと思っていた。

コメント

 トラックバックに関するコメントありがとうございました。おまけに複数エントリーに関するコード変更まで記述していただき恐縮です。
 さっそく上記のコードに書き換えたら、1日に複数エントリーがあっても見事に表示されました。

 TAEKOさんのサイト当方のMac+Safariでも全然問題無く表示されています。

すみません。エラーが出たので再コメント投稿したらダブってしまいました。コメント欄汚しちゃってすみません。

やっぱりカレンダーは日別アーカイブへのリンクの方が便利ですよね。
重複やエラーはブログに限らず掲示板でも出ることなので、気にしないで下さいね。適当にメンテしますので。
そういえばMTのコメント欄にも投稿者が自分のコメントを修正・削除できる機能があるといいなあと思いました。掲示板には普通に付いている機能なので、バージョンアップかプラグインなどで追加してもらえたら嬉しいなーと思うんですが無理かな(^^;

>Mac
そうですか! ありがとうございます。
Macだけは確認のしようがなかったので助かりました。

はじめまして。xreaとダイナミック・パブリッシングでMTを設置しています。

こちらのページを見て月送りカレンダーを設置しましたが、何とかフレームを使わずに出来ないかと思い、設置方法を参考にして、自分なりに書き直してみました。

図々しく申し訳ないのですが、デフォルト設置のブログで試験的に設置してますので、良かったら見ていただけますか?もし出来れば、不具合などありましたら教えていただけると幸いです。┌(_ _;)┐

初めまして。コメントありがとうございます。
XREA・ダイナミック仲間に出会えて嬉しいです。
ここのカスタマイズは自分用の覚え書きなので、ぢゅんり♪さんの使い勝手に合わせてどんどん応用していって下さいね。

この月送りカレンダーはカレンダー部分のみを静的生成にするカスタマイズです。3.2以前のダイナミックではカレンダーが正常生成されなかったため、カレンダー部分だけ静的生成にする必要があったんですね。静的カレンダーをどうやって動的頁に表示させたらいいか試行錯誤の末たどり着いたのがiframeだったのですよ。

3.3からはダイナミックでもカレンダーは正常生成されるようになりましたが、複数ブログを使用している際、ブログIDが正しく認識されないバグがまだ残っています。
ぢゅんり♪さんの方法ですとカレンダーも動的生成になりますので、複数ブログを使用する際の注意ポイントを少し。

まずは以下のエントリーをご覧下さい。
http://wing.w-museum.com/200608112012.html
ここのリンク先を読まれた上で、アーカイブマッピングで日別アーカイブのアドレスを決定し、カレンダーから飛ぶ先を<$MTEntryPermalink archive_type="Daily"$>ではなく、直接アドレスを指定する方法にされることをおすすめします。

アドバイス、ありがとうございます。実は、ここの書き込みをした後に、(おそらく「複数ブログを使用している際、ブログIDが正しく認識されないバグ」の事だと思うのですが)カレンダーの日付のリンクが日によって違っている事に気づき、慌てて修正しました。

私の場合、1日に複数エントリーが出来た時を考えて<$MTArchiveLink archive_type="Daily"$>#<$MTEntryID pad="6"$>としてみましたが…一応、これも直接アドレスを指定している事にはなるかな?ちょっと自信なかったりして。(⌒_⌒;)

iframeの件…そういう事だったんですね。実は静的とか動的とか…まだ分かってない部分がありまして…ただいま少しずつ勉強中の身分です。これからも、そちらのサイトで色々と勉強させていただきます。よろしくお願いします♪

なるほど、EntryIDで指定してみる方法もあるのですね!
色々な方法を試しながら情報交換していけたらダイナミックももっと使いこなせるようになりますよね。
私もまだまだ知らないことがいっぱいなので、もっと勉強していかねば…と思ってます。
こちらこそよろしくお願いします。

べんりすぎ!^▽^
自分のサイトに使わせていただきます。

>小学生ユーザーさん
こんにちは。アーカイブマッピング辺りが3.3向けの記述になってたと思いますが、お役に立てたなら嬉しいです。^^

コメントを投稿

 


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