2005年 3月 19日(土)   大安    今日は何の日?   

TopMovableTypeMTカスタマイズ > 横型リアルタイム版月送りカレンダー

MTカスタマイズ横型リアルタイム版月送りカレンダー new

小粋空間 さま 「月送りカレンダー(横型・リアルタイム版)」 に 挑戦してみました。
思いのほか、悪戦苦闘しちゃいました。設置方法については 小粋空間さまのエントリ のとおりにやればOKなので
悪戦苦闘したことについて、2点ほど 触れておきます。・・・・・の前に・・・・・
横型のカレンダー設置については どうしようか、かなり迷いました。今までのカレンダーには 日曜・祭日に
色を付けてみたり、あれこれカスタマイズしていて 相当 愛着があったし、曜日ごとにテーブルにおさまってる
従来のカレンダースタイルが 気に入っていたので、横一列のカレンダーは要らないかな・・・と思っていたんです。
けど、yujiroさんのエントリ を読んでると どうしても カスタマイズに挑戦してみたい衝動に駆られてしまって。。。笑
それと メインページ以外の アーカイブページには タイトルボードの中央真下、エントリの上に
前後のエントリや メインページへのリンクが表示されてるんだけど、メインページだけは その欄に なにも
ないので、そうだ!ここに 横型カレンダーを設置しちゃえ!・・・・と 思い立ったのです。
つまり 横型カレンダーは メインページのみに 設置することに決めて、カスタマイズをスタートしました。

まず、今までのカレンダーのアーカイブ・テンプレートや スタイルシートは そのまま残しておいて
それとは別の 横型カレンダー用のテンプレートとスタイルシートを 用意しました。
今までのカレンダーが Calendar、スタイルシートが calendar.css だったので、横型用のは
アーカイブ・テンプレートを Calendar2、スタイルシートを calendar2.css という名前にしまして、
Calendar2 の テンプレートの中身には

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1./ Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<link rel="stylesheet" href="<$MTBlogURL$>calendar2.css" type="text/css" />

<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>

</head>
<body >

<div class="calendar">

<span class="calendarHead">
<MTArchivePrevious>
<a href="<MTBlogURL>archives/calendar2/<MTArchiveDate format="%Y/%m/index">.php"><</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y" language="en"$>
<MTArchiveNext>
<a href="<MTBlogURL>archives/calendar2/<MTArchiveDate format="%Y/%m/index">.php">></a>
</MTArchiveNext>*
</span>

<?php $day = date(j); $year = date(Y); $month = date(m); ?>
<MTCalendar month="this">
<MTCalendarIfEntries>
<?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = "today"; } else { $style = "notoday"; } ?>
<span class="<?php print "$style"; ?>">
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" target="_top"> <$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = "today"; } else { $style = "notoday"; } ?>
<span class="<?php print "$style"; ?>">
<$MTCalendarDay$>
</MTCalendarIfNoEntries>
</span>
</MTCalendar>
</div>

</body>
</html>


・・・・・・と、ちゃんと間違えないように 3箇所ほど 修正しました。
赤い字の スタイルシートは 当然 calendar2.css のほうを 指定してあげないといけないんだけど
ウェブログの設定 → アーカイブの設定で 横型カレンダー (Calendar2) も 月別 に関連付けをし、
アーカイブファイルのテンプレート の欄に
<$MTArchiveDate format="calendar2/%Y/%m/index.php"$>

・・・・と記して 今までのカレンダーと ディレクトリを分けたため、青い字の2箇所に修正が必要でした。
さらに メインページの 横型カレンダーを表示したいところに
<div id="globalnavi">
<iframe name="cal-iframe2" src="<$MTBlogURL$>archives/calendar2/<$MTDate format="%Y/%m/index"$>.php" width="***" height="**" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>

これで、すべて再構築したら ちゃんと表示されるはずでした。なのに 実際は・・・(|||_|||) ガビーン
横型カレンダーのところに 通常のカレンダーが表示されてる!これ、何度やり直してもダメだったんです。
そこで 通常のカレンダーでそうしてるように 横型カレンダーも モジュール化して calendar2.php にして
<? include("calendar2.php"); ?>

と 試しにやってみたら、これのおかげかどうか不明なんだけど やっと 表示されましたぁ!(= ̄▽ ̄=)V やったね!

これで あとは Mozilla系のブラウザからアクセスしたときの カレンダーの下が切れちゃう現象を
こちら で使った util.js で 回避すれば すべてオーライね♪・・・・と思ったら・・・・・
これが 何度やっても JSが適用されない。。。どころか、オブジェクトを指定してください、とかいうエラーが
出る始末。あーでもない、こーでもない・・・・・と 細かい数値をいじってみたりしたけど さっぱりダメ。
そうこうしてるうちに |・) ジー ( °o°)ハッ もしかして、util.js の中身が 変わってるんじゃ???と
思い立って (気付くの、遅っ!)、スクリプトのページ に行ってみたら、やはりそうでした。
ヴァージョンアップで 「任意のタグ+任意の属性による属性値変更関数追加」 されていたのですねーーー。
ということで、util.js を 最新版に差し替えたら エラーも消え、util.js が 働いて Mozilla系ブラウザで
見たときの インラインフレームの height を 調整してくれるようになりました。これで やっと完成です。

・・・・・と言いたいところだけど、スタイルシートを もう少しだけ 調整する必要があります。今月のように
短い月名(March)だったら ちゃんと31日まで 表示されるんだけど December のような長い月名だと
31日が表示されないのよねー。これは yujiroさんのお見本のように タイトルの下に 横型カレンダーを表示してれば
問題ないんだけど、あたしの場合、3カラムの真ん中の エントリの欄に 納めようとしてるものだから
横幅が 足りなくなっちゃうのですよ。。。。このへん、もう少し頑張って修正しますです。ヽ( ´ ▽ ` )ノ

Posted by Caetla at 03:11 | Category : MTカスタマイズ | Trackbacks [0] | Clip!! | Ranking
Tag : MovableType , カスタマイズ , 月送りカレンダー
この記事はどうでしたか?(お気軽に 記事に点数を付けてみてくださいね♪)
Bad ← 1 2 3 4 5 → Good
評定平均:(3.0) 総合点:(1274) 投票人数:(424)

エントリーURL


 

トラックバックURL


 

Amazon Search
Google Similar