Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

年度カレンダーを表示する

Aug262006
Vote:
http://bizcaz.com/archives/2006/08/26-025636.php
Categories: Customize
Tags: Calendar
Social Bookmark

Prev Page: カテゴリにエントリが追加されたらトラックバックする
Next Page: CustomFieldsプラグイン活用術 - エントリ画面１

Warning: include() [function.include]: URL file-access is disabled in the server configuration in /virtual/bzbell/public_html/archives/2006/08/26-025636.php on line 59

Warning: include(http://bizcaz.com/archives/2010/calendar.php) [function.include]: failed to open stream: no suitable wrapper could be found in /virtual/bzbell/public_html/archives/2006/08/26-025636.php on line 59

Warning: include() [function.include]: Failed opening 'http://bizcaz.com/archives/2010/calendar.php' for inclusion (include_path='.:/usr/local/lib/php') in /virtual/bzbell/public_html/archives/2006/08/26-025636.php on line 59

ご無沙汰しています(＞∀＜　)

今週はずっとプライベートの予定がいっぱい、いっぱいだったので、記事の投稿どころか、コメントの返事も遅くなってしまって申し訳ないです（つω-`｡）

今日もちょとホロ酔いですが、がんばってエントリしてみます。

今回は年度カレンダーの表示です。サイドバーに表示しているのが、年度カレンダーになります。

以前、月移動できるカレンダーにするでは、<iframe>を使用して月移動できるカレンダーを紹介しました。でも、いちいち月移動するのが面倒だったので、思い切って1年分のカレンダーを表示させちゃいました。

- 2007.03.17 追記 -

ここで紹介している年度カレンダーは、1年分のカレンダーがページ内に記述されてしまうのが難点(わたし的に)だったのですが、こちらのAjaxでIFRAME的な表示をやってみるを応用して表示させることで、XHTMLをすっきりさせることができます (￣∇￣)b

1年分のカレンダー表示には、こちらのMovableTypeに年別アーカイブを追加するでも紹介した、ArchiveLoadプラグインとArchiveYearプラグイン、Compareプラグインを併用します。

各プラグインのインストール

まず、ArchiveLoadプラグインとArchiveYearプラグインをインストールします。インストール方法についてはMovableTypeに年別アーカイブを追加するを参考にしてください。

Compareプラグインは、MovableType(ムーバブルタイプ)に条件分岐の機能を追加するためのプラグインです。インストール方法、使い方などはこちらのCompare Plugin for Movable Typeで詳しく紹介されています。

カレンダー・アーカイブの作成

カレンダー用のアーカイブを新規作成します。 MovableType(ムーバブルタイプ)の管理画面からブログを選択して、テンプレート一覧を表示します。そして画面上にある「アーカイブ」をクリックすると、各アーカイブ一覧が表示されます。画面右上に「テンプレートを新規作成」とあるので、それをクリックしてください。入力内容は以下の通りです。

テンプレート名: カレンダー・アーカイブ( 任意 )
このテンプレートにリンクするファイル: 未記入でいいです。
テンプレートの内容: 以下のコードをコピペします。

<ul id="calendar">
<MTArchiveYear order="ascend">
<MTArchiveLoad>
<MTIfLessOrEqual a="[MTArchiveDate format='%b']" b="6" numeric="1">
<li class="top"><a class="month_top" href="<$MTBlogArchiveURL$><$MTArchiveDate format='%Y/%m/'$>"><$MTArchiveDate language="en" format="%b"$><!--[if IE 7]><!--></a><!--<![endif]-->
<MTElse>
<li class="bottom"><a class="month_bot" href="<$MTBlogArchiveURL$><$MTArchiveDate format='%Y/%m/'$>"><$MTArchiveDate language="en" format="%b"$><!--[if IE 7]><!--></a><!--<![endif]-->
</MTElse>
</MTIfLessOrEqual>
<table>
<caption><a href="<$MTBlogArchiveURL$><$MTArchiveDate format='%Y/'$>"><$MTArchiveDate language="en" format="%B, %Y"$></a></caption>
<thead><tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead>
<tfoot><tr><td colspan="7">&copy;<$MTArchiveDate format="%Y"$> bzbell</td></tr></tfoot>
<tbody>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<MTCalendarIfBlank>
<td class="blank">&nbsp;
<MTElse>
<td>
<MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" title="[<$MTEntryTitle$>]"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
</MTElse>
</MTCalendarIfBlank>
</td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</tbody>
</table>
<!--[if lte IE 6]></a><![endif]--></li>
</MTArchiveLoad>
</MTArchiveYear></ul>

一通り入力したら「保存」ボタンをクリックします。

次に月別アーカイブと関連付けます。テンプレート一覧画面の左サイドバーの「設定」をクリックして、画面上の「公開」を選択してください。画面下の方にアーカイブ・マッピング一覧が表示れます。右側にある「マッピングを新規作成」をクリックしてください。設定内容は以下の通りです。

アーカイブの種類: 月別
テンプレート: 先ほど作ったカレンダー・アーカイブを選択

選択したら「追加」ボタンをクリックします。そうすると、新規に「カレンダー・アーカイブ」が追加されました。右横にあるドロップダウンリストから「カスタマイズする」を選択して、以下のように入力します。

%y/calendar.php

上記指定は年のディレクトリの中に calendar.php というファイル名で作成するよう支持しています。例えば、2006年度のカレンダーなら http://●●●.com/2006/calendar.php と作成されます。

PHP化を行っていない人は calendar.html と入力してください。

入力したら「変更を保存」ボタンをクリックします。これで月別アーカイブに関連して、カレンダー・アーカイブが作成されます。では、月別アーカイブを再構築してください。そうすると上記で指定したディレクトリの中に calendar.php( html )が作成されますので、ブラウザで表示確認してください。

トップページに年度カレンダー表示

トップページで表示しているカレンダーを差し替えます。サイドバーに表示しているカレンダーを以下のコードと差し替えてください。ウィジェットを使用している人は、カレンダーのウィジェットを適宜差し替えてください。

PHP化している人
<?php include('<$MTBlogArchiveURL$><$MTDate format="%Y/calendar.php"$>');?>

上記はPHP化している人用です。以下はPHP化してない人用になります。

PHP化していない人
<MTInclude file="/2006/calendar.html">

PHP化していない場合には、直接ファイル名を記述する必要があります。また、年度カレンダーを表示させるテンプレートによっては、エントリ投稿時に別途そのテンプレートも再構築する必要があります。たとえば、個別エントリのテンプレートに年度カレンダーを表示させた場合、新規投稿したページは最新表示されますが、過去の個別エントリページには反映されないので、個別エントリ全体を再構築しなければなりませんので気をつけてください。

- 2006.08.27 追記 -

MTTagInvokeプラグインを使えば以下のようにPHP化と同様にタグ指定することができます。カテゴリ内の最新エントリ一覧を表示する

MTTagInvokeプラグインと併用
<MTTagInvoke tag_name="MTInclude">
<MTTagAttribute name="file"><$MTDate format="/%Y/calendar.html"$></MTTagAttribute>
</MTTagInvoke>

差し替えたらトップページを再構築します。

最後にスタイルシートです。一応わたしが使っているスタイルシートを紹介しますが、そのまま使える人もいれば、各自でスタイルを調整しなくてはいけない人もいるので、そこら辺は臨機応変にお願いしますね。

ul#calendar {
padding:0;
margin:0 auto;
width:181px;
height:190px;
position:relative;
list-style-type:none;
list-style-image:none;
font-family:arial, sans-serif;
font-size:10px;
border:5px solid #4c597f;
background:#eeeeee;/*背景色*/
}
ul#calendar li {
color: #4c597f;
background: none;
padding:0;
}
ul#calendar li.top {
display:block;
float:left;
width:30px;
height:50px;
text-align:center;
margin:5px 0 55px 0;
}
ul#calendar li.bottom {
padding-top:20px;
margin:25px 0 0 0;
float:left;
width:30px;
height:30px;
display:block;
text-align:center;
}
* html ul#calendar li.bottom {
margin:44px 0 0 0;
padding-top:0;
height:40px;
}
ul#calendar li a,
ul#calendar li a:visited {
display:block;
color:#4c597f;
font-weight:bold;
text-decoration:none;
}
ul#calendar li a.month_bot,
ul#calendar li a.month_bot:visited {
margin-top:14px;
width:30px;
display:block;
text-decoration:none;
font-weight:bold;
}
ul#calendar table {
width:177px;
font-size:10px;
background:#eeeeee;/*背景色*/
border-collapse:collapse;
}
ul#calendar tbody td {
margin:0;
padding:0;
width:25px;
height:17px;
border:1px solid #aaa;/*枠線*/
text-align:center;
color:#4c597f;/*日にちの前景色*/
background:#fff;
}
ul#calendar tbody td a,
ul#calendar tbody td a:link,
ul#calendar tbody td a:visited,
ul#calendar tbody td a:hover {
color:#FFC758;/*投稿された日にちの前景色*/
}
ul#calendar tbody td.blank {
background:#eeeeee;/*前月(来月)の日にち(ブランク)*/
}
ul#calendar caption,
ul#calendar caption a {
color:#4c597f;/*年前景色*/
font-weight:bold;
font-size:11px;
}
ul#calendar thead th {
color:#AE1414;/*曜日前景色*/
font-size:9px;
}
ul#calendar tfoot td {
text-align:center;
color:#AE1414;/*名前前景色*/
font-size:9px;
}
ul#calendar td a,
ul#calendar td a:visited {
width:100%;
height:100%;
display:block;
color:#345;
line-height:15px;
text-decoration:none;
}
ul#calendar table {
position:absolute;
top:-99999px;
left:2px;
}
ul#calendar li a.month_top {
color: #4c597f;/*上段月前景色*/
}
ul#calendar li a.month_bot {
color: #4c597f;/*下段月前景色*/
}
ul#calendar li a.month_top:hover {
height:30px;
color: #FFC758;/*上段月ホバー前景色*/
border:0;
}
ul#calendar li a.month_bot:hover {
margin:0;
padding-top:14px;
border:0;
color: #FFC758;/*下段月ホバー前景色*/
}
ul#calendar :hover table {
top:25px;
}
ul#calendar :hover table :hover {
background:#eeeeee;/*選択された日にちの背景色*/
cursor:pointer;
}

カンタンにコメントも付けてますので、自分好みに色を変えてください (￣∇￣)/

以上で年度カレンダーを表示させることができます。今回はスタイルシートが肝なので、すんなり表示されない人もいるかもしれません。その時はできる限りサポートしますのでご連絡ください。

では、SEE YOU♪

Edit
Permalink
13 Comments
3 TrackBacks

Trackback Pings(3)

TrackBack URL for this entry:

from オラオラ: 少し前にbzbellさんの所「MovableType備忘録」で話していた、Ajaxで切り替わるカレンダーっていうのがちょっと気になっていました。さらに...
Tracked on September 6, 2006

from オラオラ: 最低限の機能のみクリアしたんで、公開しちゃいます。改造・改善のご提案・ご指摘、ビシバシ受け付けますんでコメントお願いします。エフェクトで移動するカレ...
Tracked on September 7, 2006

from MovableType備忘録: こんにちわ^^ こちらのK's Laboさんのところでmoo.fxを使用したタブ表示を紹介してたので、わたしもmoo.fx+Ajaxを使ってカレンダーを作...
Tracked on September 29, 2007

Comments(13)

#1: Posted by ikias @ August 26, 2006 [REPLY]: どうも、どうも、じっくり勉強させていただきます。
babellさんがさけを飲みすぎしないように^^);

#2: Posted by bzbell @ August 26, 2006 [REPLY]

>>1 ikias さん

こんにちわ^^
> babellさんがさけを飲みすぎしないように^^);

そうなんです。ちょと飲みすぎちゃう傾向があるんですよね（￣∇￣;）はは
どうもありがとうございます♪

ところでikiasさん、月別アーカイブ一覧のカスタマイズはできたみたいですね。
良かった、良かった(＞∀＜　)

#3: Posted by oscar @ September 4, 2006 [REPLY]

こんにちは、bzbellさん。

このカレンダー結構面白いですね。
もしかして以前言っていたAjaxで切り替えたいカレンダーって、これの事でしたか？
ここからさらに、いろんな改造のアイデアが浮かびますね。

えと、月に６週ある時だと、下の月名少し切れてますよ。
CSSで調整かな？

#4: Posted by bzbell @ September 4, 2006 [REPLY]

>>3 oscar さん

度々、こんにちわ^^

> もしかして以前言っていたAjaxで切り替えたいカレンダーって、これの事でしたか？

いえ、これはAjaxは使っていません。Ajax勉強中ですが、よく分からなくて（つω-`｡）
これはCSSのみです。

> えと、月に６週ある時だと、下の月名少し切れてますよ。

えっΣ(￣Д￣；)!?
わたしの方では(Fx, IE)ではそのようなことはないみたいです。
何でだろ（；￣－￣）…oscarさん、ブラウザのフォント大きくしてます?

#5: Posted by oscar @ September 5, 2006 [REPLY]: >何でだろ（；￣－￣）…oscarさん、ブラウザのフォント大きくしてます?
特にそんな事した覚えないんだけど、そこら辺が理由ですかね。
ちなみに、MSゴシック14ptになってました。
Firefoxでのデフォルトって、どうでしたっけ？

#6: Posted by oscar @ September 5, 2006 [REPLY]: PHPインクルードしている部分 <?php include('<$MTBlogURL$><$MTDate format="%Y/calendar.php"$>');?> ですが、アーカイブとして書き出してるんで、MTBlogURLじゃなくてMTBlogArchiveURLの方が良いかもしれないです。

#7: Posted by bzbell @ September 6, 2006 [REPLY]

>>6 oscar さん

こんにちわ^^

ご指摘ありがとうございます。
そうですね、アーカイブ・パスを変更している人は<$MTBlogURL$>ではダメですね。

#8: Posted by あやね @ November 22, 2006 [REPLY]

こんばんは。プラグイン情報を求めてこちらのサイトへたどりつきました。3.3対応など、参考にさせていただいてます。どうもありがとうございます。

さて、年別アーカイブを作成し、年度カレンダーをそのサイドバーに表示させてみました。Firefoxだとカレンダー全体がセンタリングされてうまくサイドバーにおさまるのですが、IE６だと左側が40px前後あいて表示されてしまい、右側がサイドバーからはみ出して切れてしまいます。あれこれCSSをいじってみたのですがダメだったので質問させていただきました。text-alignでcenterを指定するとしたらどこに指定すればよいのでしょうか。よろしくお願いいたします。

#9: Posted by bzbell @ November 22, 2006 [REPLY]

>>8 あやねさん

はじめまして^^

> 3.3対応など、参考にさせていただいてます。

ご訪問、ありがとうございます♪

ご質問の件ですが、単純にセンタリングするだけなら、以下のようにしたらどうでしょ(￣∇￣)b

上記<div id="calendar-block">ブロックをセンタリングすれば良いかと思います。

#10: Posted by あやね @ November 23, 2006 [REPLY]

>>9 bzbell さん
早速のお返事ありがとうございます。

おおこの手があったか！とやってみました・・・が。

表示テスト用にalpha-innerに表示している方はセンタリングに成功したのですが、本来の目的であるbeta-innerに表示している方が変化ナシです（涙）

ul#calendar {
ブロックに、text-alignを追加するんではダメなんでしょうか？

ちなみにカレンダーはPHP化していまして、

＜div class="module-archives module"＞
＜h2 class="module-header"＞
：　モジュールのタイトル部分
＜/h2＞
＜ul id="calendar"＞
＜MTArchiveYear order="ascend"＞
＜MTArchiveLoad＞
：

となっております。センタリング用のclass設定をCSSに入れてあるので、ulタグの外側を＜div class="center"＞で括ってみた結果が上記の通りです。ulタグにclass="center"を指定するとセンタリング自体が全くダメでした。サイドバーのサイズは190px、ul#calendar ブロックでborderとwidthが合計で190になるよう調整しています。うーん（悩）

Fxでは大丈夫って言うのが困ります（笑）他にも、同じCSSでもIEと見栄えが違う例が多々あって、その度に頭を悩ませてます。また、8月とか9月の文字にロールオンして表示はできても、カレンダーの方にマウスを動かすと消えてしまう（6週あると大丈夫なんです）とかとか、まだまだ微調整が必要なようです。

長々とすみません。何かヒントがありましたらよろしくお願いいたします。

#11: Posted by bzbell @ November 23, 2006 [REPLY]

>>10 あやねさん

こんにちわ^^

ブロック要素に"text-align:center"だけではブラウザによってはセンタリングされないので、以下のようにしてみてはどうでしょうか。

<div id="calendar-block" style="margin:0 auto; text-align:center;">
：
<MTInclude file="●●●/calendar.html">
：
</div>

これなら<div>タグで括ったところがセンタリングされると思いますよ（￣∇￣)b

> また、8月とか9月の文字にロールオンして表示はできても、カレンダーの方にマウスを動かすと消えてしまう（6週あると大丈夫なんです）とかとか、まだまだ微調整が必要なようです。

それはですね、月によって週(行)が異なりますので、短い週を考慮して各自の環境(CSS)に合わせて調整する必要があるんです。CSSのみでのカレンダー表示なので環境依存による違いがでてしまいます。
なので、誰でもできるカスタマイズというわけではないのですが、あやねさんがんばってクリアしてください（￣∇￣)/

上段、下段の各月のリンクの高さ、位置(マージン)を指定してるセレクタがあると思いますので、そこら辺を調整します。ポイントは、border属性で見えない領域を見えるようにしてから調整すると楽ですよ（￣∇￣)v
background-colorで色を着けて領域を識別してもいいかも、です♪

#12: Posted by あやね @ November 25, 2006 [REPLY]

>>11 bzbell さん
回答ありがとうございます。

センタリングの方は、残念ながらダメでした。モジュールの作り方から見直さなければならないようです（涙）

位置の微調整の方ですが、仰る通り色付けしてみました。おお、わかりやすい！・・・が、コレもIEとFxとで全然見栄えが違うのですね（汗）liブロックも通常のブロックとhoverとでサイズが違うので違う色をつけて、あーでもないこーでもないとやっています。思うとおりになるまで相当時間がかかりそうですが、納得いくまで慌てず急がず、じっくり（ちまちま？）やっていくことにいたします。

いろいろご指導いただいて本当にありがとうございました。今後とも参考にさせていただきますのでよろしくお願いいたします（ふかぶか）。

#13: Posted by bzbell @ November 25, 2006 [REPLY]

>>12 あやねさん

こんにちわ^^

> モジュールの作り方から見直さなければならないようです（涙）

そうですか・・・残念です（つω-`｡）

> コレもIEとFxとで全然見栄えが違うのですね

そうなんですよ。
つか、IEがおかしいのですが、あやねさんもご存知のように、CSSですべてのブラウザで同じように見せようとするとそれなりに苦労しました（;￣∇￣A

でも、勉強のため・・・と思ってあやねさんのように諦めずにアクセクしたんです。

> 思うとおりになるまで相当時間がかかりそうですが、納得いくまで慌てず急がず、じっくり（ちまちま？）やっていくことにいたします。

はい。がんばってください♪
わたしも久しぶりにこのカレンダー表示してみようと思ってます。
当時から数えて2回ほどテンプレを変更してるので、だいぶ調整が必要ですけど(＞∀＜　)

> 今後とも参考にさせていただきますのでよろしくお願いいたします（ふかぶか）。