リアルタイムカレンダー(画像表示版)
ご要望がありましたのでリアルタイムカレンダー(改)を改造して作ってみました。今回の改造に際しまして下記のサイトを参考にさせて頂きました。ありがとうございました。
本カレンダーの仕様は、本日の日付に画像だけを表示するというものです(日を表示しません)。日付の背景に画像を表示する場合はリアルタイムカレンダーのスタイルシートに
.today {
background-image :url( "画像のURL");
background-repeat: no-repeat;
}
というような設定を行えば動作します(多分)。赤字部分に表示したい画像のURLを設定してください。
ここでは通常カレンダー・月送りカレンダー・縦型カレンダー・横型カレンダーの4つのケースについて説明しています。また使用されるアーカイブの拡張子が .php になっていることが前提です。.php になっていない場合は下記のエントリーの3項から始めてください。
また月送りカレンダーにつきましては本エントリーとは別にカスタマイズが必要ですのでご注意ください。
通常カレンダー・月送りカレンダー・横型カレンダーについては、カレンダー設定がされている各テンプレートの <MTCalendar>~</MTCalendar> の部分を下記のスクリプトに変更します。縦型カレンダーは <table>~</table> で括られていることを前提に作っておりますので、該当部分を置き換えてください。また縦型カレンダーのスタイルシートは
- 全体:calendar
- 月表示:calendar-head
- 日表示:calendar-day
という指定になっています。スタイルシートの設定は適宜設定くださいますよう、お願い致します。
いずれも赤字部分に表示したい画像のURLを設定してください。
現状では、Windows2000・IE6.0/Firefox1.0/Opera7.23で動作の正常性を確認しています。
1.通常カレンダー
<?php
$day = date("j");
$img = "画像のURL";
?>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<MTCalendarIfEntries>
<?php
$d="<$MTCalendarDay$>";
?>
<td align="center">
<?php
if($day != $d) {
print "<span class=\"calendar\">";
}
?>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>">
<?php
if($day != $d) {
print $d;
} else {
print "<img src=\"" . $img . "\" align=\"middle\" border=\"0\" />";
}
?>
</a>
</MTEntries>
<?php
if($day != $d) {
print "</span>";
}
?>
</td>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<td align="center">
<?php
if($day != <$MTCalendarDay$>) {
print "<span class=\"calendar\"><$MTCalendarDay$></span>";
} else {
print "<img src=\"" . $img . "\" align=\"middle\" />";
}
?>
</td></MTCalendarIfNoEntries>
<MTCalendarIfBlank><td> </td></MTCalendarIfBlank>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
2.月送りカレンダー
<?php
$day = date("j");
$year = date("Y");
$month = date("m");
$img = "画像のURL";
?>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<MTCalendarIfEntries>
<?php
$y = "<$MTCalendarDate format='%Y'$>";
$m = "<$MTCalendarDate format='%m'$>";
$d = "<$MTCalendarDay$>";
?>
<td align="center">
<?php
if($year == $y && $month == $m && $day == $d) {
print "<span class=\"calendar\">";
}
?>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" target="_top">
<?php
if($year == $y && $month == $m && $day == $d) {
print "<img src=\"" . $img . "\" align=\"middle\" border=\"0\" />";
} else {
print $d;
}
?>
</a>
</MTEntries>
<?php
if($year == $y && $month == $m && $day == $d) {
print "</span>";
}
?>
</td>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<td align="center">
<?php
$y = "<$MTCalendarDate format='%Y'$>";
$m = "<$MTCalendarDate format='%m'$>";
$d = "<$MTCalendarDay$>";
if($year == $y && $month == $m && $day == $d) {
print "<img src=\"" . $img . "\" align=\"middle\" />";
} else {
print "<span class=\"calendar\"><$MTCalendarDay$></span>";
}
?>
</td></MTCalendarIfNoEntries>
<MTCalendarIfBlank><td> </td></MTCalendarIfBlank>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
3.縦型カレンダー
<table width="100%" class="calendar" cellpadding="2" cellspacing="4" summary="カレンダー">
<tr>
<td class="calendar-head"><$MTDate format="%B"$>月</td>
</tr>
<?php
$day = date("j");
$img = "画像のURL";
?>
<MTCalendar>
<MTCalendarIfEntries>
<?php
$d="<$MTCalendarDay$>";
?>
<tr><td align="center">
<?php
if($day != $d) {
print "<span class=\"calendar-day\">";
}
?>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>">
<?php
if($day != $d) {
print $d;
} else {
print "<img src=\"" . $img . "\" align=\"middle\" border=\"0\" />";
}
?>
</a>
</MTEntries>
<?php
if($day != $d) {
print "</span>";
}
?>
</td></tr>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<tr><td align="center">
<?php
if($day != <$MTCalendarDay$>) {
print "<span class=\"calendar-day\"><$MTCalendarDay$></span>";
} else {
print "<img src=\"" . $img . "\" align=\"middle\" />";
}
?>
</td></tr></MTCalendarIfNoEntries>
</MTCalendar>
</table>
4.横型カレンダー
<?php
$day = date("j");
$img = "画像のURL";
?>
<MTCalendar>
<MTCalendarIfEntries>
<?php
$d = "<$MTCalendarDay$>";
if($day != $d) {
print "<span class=\"calendar\">";
}
?>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>">
<?php
if($day == $d) {
print "<img src=\"$img\" border=\"0\" />";
} else {
print " $d";
}
?>
</a>
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<?php
$d = "<$MTCalendarDay$>";
if($day != $d) {
print "<span class=\"calendar\"> $d";
} else {
print "<img src=\"$img\" border=\"0\" />";
}
?>
</MTCalendarIfNoEntries>
<?php if($day != $d) { print "</span>"; } ?>
</MTCalendar>
設定終了後、それぞれ保存・再構築してください。
2005.02.26 追記
月送りカレンダーにtypoがありましたので修正しました。
2005.03.11 追記
横型カレンダーを追加しました。
2005.05.02 追記
月送りカレンダーに month="this" の設定がもれていましたので追記しました。
2005.08.07 追記
Apache のログにPHPエラーが出ていたためスクリプトを一部修正しました。
- Movable Typeのカレンダーに曜日を表示する方法
- Movable Typeのカレンダーに複数カテゴリのリンクを表示する方法
- Movable Typeでダイナミックカレンダーが表示されない不具合の対処
- Ajax ハイブリッド月送りカレンダー
- Ajax ダイナミック月送りカレンダー
- 複数ブログの情報をひとつのカレンダーにまとめて表示する
- Ajax 月送りカレンダー(jQuery・MT4版)
- 「Ajax 月送りカレンダー」の表示月をブログ記事の投稿月や月別アーカイブに連動させる
- 「Ajax 月送りカレンダー」で未来月のブログ記事を表示しない
- カテゴリー別 Ajax 月送りカレンダー(MT4版)
- Ajax 日めくりカレンダー(MT4版)
- Ajax 月送りカレンダー(MT4版)
- カレンダーの日付リンクのジャンプ先をエントリー・アーカイブに変更する
- Ajax 月送りカレンダー(縦型)
- Ajax 月送りカレンダー(横型)
≫ カレンダーの“今日”に画像を!!・・・の巻。 from TOY COZY MUSEUM 別館
カレンダー表示の“今日”の日付については、色付きの枠線での強調表示をしていたのですが、「小粋空間」様の記事で、リアルタイムカレンダーの画像表示版として方法が紹介... [続きを読む]
≫ 本日の日付に画像だけを表示 from Magic White
小粋空間 リアルタイムカレンダー(画像表示版)を参考に本日の日付に画像だけを表示... [続きを読む]
≫ カレンダーの本日表示だけを画像にする。再び from 我楽
以前のエントリーで、カレンダーの本日表示を画像表示にしたのですが、インラインで html に直接スタイル設定をしているせいか、ie では表示... [続きを読む]
≫ カレンダー from mrumru
カレンダー表示を縦にしたい・・・。 そんな衝動にかられて小粋空間さまを参考にやっ... [続きを読む]
≫ カレンダーの今日を画像に from Treasure
小粋空間さんのリアルタイムカレンダー(画像表示版)を参考に カレンダーの今日の部... [続きを読む]
≫ カレンダー from murmur
カレンダー表示を縦にしたい・・・。 そんな衝動にかられて小粋空間さまを参考にやっ... [続きを読む]
≫ 横型月送りリアルタイム画像版 from スヌーピーキャンディー
小粋空間さん:すごいなぁ。ありがとうございます。 月送りカレンダー(横型・リアル... [続きを読む]
≫ カレンダー使用に関するメモ from ネコの為に鈴は鳴る。 - After☆Taste Blog
このブログを設置して以来ずっとカレンダーは小粋空間さんのリアルタイムカレンダー(... [続きを読む]
こんばんはです。
早速導入させていただきました。毎度同じことしか言えませんが(笑)、有り難うございます。
ワタシの場合は、チェックマークでありながら、背景画像にしてみたのですが、日付の大きさからすると見栄えも丁度良かったような気がします。飽きてきたら、気分次第でアレコレ変えてみようかと思います(笑)。
おはようございます♪
早速 日付の背景にお花を ちょこんとつけてみました(^▽^)
ありがとうございました
>toycozyさん
こんにちは。
はい、なかなかナイスですね。
いつもながらデザイン能力には感服しております。
次回(の背景)も楽しみにしております。
>mayumiさん
こんにちは。
ご利用ありがとうございます。
お花が可愛く回ってますね?!
こんばんは、いつもありがとうございます。
これを導入させていただきました。
可愛く仕上がりましたが、日にちをクリックすると
iframe内に飛んでしまうようになってしまいました・・
タグとにらめっこしてみましたがお手上げです。。
どこが悪いのでしょうか・・・
おわかりでしたら教えてください。
いつも申し訳ありません
>ちひろさん
こんばんはー。
ご利用ありがとうございます。
で…すいません!!
以前と同じミスをしてしまいました。
リンクの部分に target="_top" を記述するのを忘れてました。
修正しましたので再度お試しになってみてください。
それではよろしくお願い致します。
出来ました!ありがとうございました。
どこかでtarget指定をするんだろう事は
わかっていたのですが
何せアホ頭なものでさっぱりわからなくて。
わざわざありがとうございましたペコリ(o_ _)o))
>ちひろさん
こんにちは。
いえいえ、ご迷惑おかけしてすいませんでした。
無事にできてなによりです。
はじめまして。はじめての書き込みなのに大変ぶしつけですが、「リアルタイムカレンダー(画像表示版)」導入がなぜかうまくいきません。半月ほど格闘しておりますが、かなり近いところまでいって、とうとう行き詰まってしまいました。どうかご助言いただけないかと思い、書き込みいたしました。もしお助けいただけるようでしたら、改めて詳しい状況などお知らせしたいと思います。コメント欄に書くべき内容でなかったら本当にごめんなさい。
>erileeさん
はじめまして。
記事参照ありがとうございます。
ご質問の件ですが、まずは不具合の状況(どのように表示されるか等)をお知らせいただくか、URLをお知らせ頂けますでしょうか(こちらで設定状況を確認させて頂きたいので不具合の発生している状態であることが必要です)。
ご質問は内容にかかわらず基本的になんでもお受けしておりますので、コメント欄にお気軽にご記入ください。
以上です。
それではどうぞよろしくお願い致します。
さっそくお返事ありがとうございます。もうyujiroさんが神様に思えます。ほんとうにありがとうございます。
現状では、「月送り+リアルタイムカレンダー(改)」まで導入できました。……が、「画像表示版」に切り替えたところ、「<」をクリックすると月名は前月に移動していくものの、肝心のカレンダーそのものは今月のカレンダーのまま変わらないという状態です(月送り+リアルタイムカレンダー(改)」では、問題なく前月のカレンダーが表示されます)。
もしURLで状況を確認していただいたほうがよろしければ、開店準備状態でショボショボでひどくはずかしいですが、ブログのURLをお知らせいたします。
以上、どうぞよろしくお願いいたします。
>erileeさん
おはようございます。
サイトを拝見させて頂いた方がよさそうです。
URL公開を控えられているようでしたら私のメールアドレス
youjiroh@wd5.so-net.ne.jp
へURLを直接ご連絡ください。
以上です。
それではよろしくお願い致します。
yujiroさん、こんにちは。「月送り+リアルタイムカレンダー(画像表示版)」でたいへんたいへんお世話になりましたerileeです。
yujiroさんのお力で、無事カレンダー導入に成功いたしました。感謝感激です。もうなんとお礼を申し上げて良いのやら……ほんとうにありがとうございました。
これからも小粋空間さまのページをずっとずっと応援して参ります。
>erileeさん
こんばんは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
こちらの typo で申し訳ございませんでした。
ずっと応援してください(笑)。
ではでは!