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

Movable Type 備忘録

カレンダーを横長に表示してみる

Mar182006
Vote:
http://bizcaz.com/archives/2006/03/18-133938.php
Categories: Tips
Tags: Calendar
Social Bookmark

Next Page: PHPで新規エントリに「NEW」イメージを期間表示させる

MovableType(ムーバブルタイプ)のデフォルト・テンプレートには、カレンダーが表示されません。後付でカレンダーを表示させる必要があります。カレンダーを表示させるだけなら簡単にできます。

以下のようなカレンダーはよく見ると思います。

今回は、この通常のカレンダーを横長に表示するカスタマイズにチャレンジです。

先ほども言ったように、MovableType(ムーバブルタイプ)のデフォルト・テンプレートでは、カレンダーを表示させるコードはありません。
以下に、普通の正方形のカレンダー表示用のコードを記します。

<div id="calendar">
<table summary="月間カレンダー">
<caption><$MTDate format="%B %Y"$></caption>
<tr>
<th abbr="日曜日">Su</th>
<th abbr="月曜日">Mo</th>
<th abbr="火曜日">Tu</th>
<th abbr="水曜日">We</th>
<th abbr="木曜日">Th</th>
<th abbr="金曜日">Fr</th>
<th abbr="土曜日">Sa</th>
</tr>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td>
<MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryPermalink$>">
<$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>
</div>

で、以下はスタイルシートです。

/*カレンダー*/
#calendar {
line-height: 120%;
color: #C6C6C6;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
background-color: #414136;
padding: 2px;
text-align: center;
margin-bottom: 30px;
}
#calendar table {
margin: 0px;
background-color: #4F4F45;
border-collapse: collapse;
width: 100%;
}
/*カレンダーのタイトル*/
#calendar caption {
color: #C6C6C6;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: center;
text-transform: uppercase;
padding-bottom: 3px;
letter-spacing: .3em;
}
/*カレンダーの曜日*/
#calendar th {
color: #2D2D25;
text-align: center;
font-weight: normal;
background-color: #58584F;
}
/*カレンダーの日付*/
#calendar td {
text-align: center;
padding-bottom: 5px;
}

以下は横長バージョンのカレンダーのコードになります。

<div id="calendar_oblong">
<$MTDate language="en" format="%Y /%m /"$>
<MTCalendar>
<span<MTCalendarIfToday> id="calendar_oblong_today"</MTCalendarIfToday>>
<MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Individual"$>"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
</span>
</MTCalendar>
</div>

そして、以下はスタイルシートです。

#calendar_oblong {
padding-top: 5px;
padding-bottom: 5px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
text-align: center;
border-bottom: 1px solid black;
}
#calendar_oblong_today { padding: 1px 0px 1px 2px; border: 1px solid #FFFFFF; }
#calendar_oblong a:link { color: #CCCCFF; }
#calendar_oblong a:visited { color: #CCCCFF; }
#calendar_oblong a:active { color: #CCCCFF; }
#calendar_oblong a:hover { position:relative; top:1px; left:1px; }

通常版、横長版お好みで自分のサイトの表示させたい場所に埋め込んでください♪

では…SEE YOU

Edit
Permalink
12 Comments
No TrackBacks

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(12)

#1: Posted by yoichi @ February 11, 2007 [REPLY]: bzbell様
初めまして。こんにちわ。
こちらの横長カレンダー、いただきました。ありがとうございます。
で、一つ教えていただきたいのですが、日にちのところを四角で囲っている日って最後に投稿した日に設定されていると思うのですが、これを現在の日にちにするにはどのように改変したらよろしいのでしょうか。
お忙しいところ申し訳ありませんが、どうか宜しくお願いします。

#2: Posted by bzbell @ February 11, 2007 [REPLY]

>>1 yoichi さん

はじめまして^^

> 最後に投稿した日に設定されていると思うのですが、これを現在の日にちにするにはどのように改変したらよろしいのでしょうか。

いえ。実はそれって現在の日なんです (;￣∇￣A
XHTMLでいうところの以下の部分です。

<span<MTCalendarIfToday> id="calendar_oblong_today"</MTCalendarIfToday>>

<MTCalendarIfToday>タグで現在の日付の場合、id="calendar_oblong_today"を付けるようにしています。

ですが毎日エントリを投稿するのであれば、常に現在の日付に更新されていきますが、基本的に再構築しないと現在の日付というのは変更されません。

もし、リアルタイムな日付を求めているのであれば、たとえば、

カレンダー部分を外部ファイル(calendar.html)にする
そのファイルをcronなどで毎日定期的に再構築する
各テンプレート内に以下を追加しておく
```
<$MTInclude file="calendar.html"$>
```

とすることで、常に現在の日付を表示させることができます。
または、フラッシュなどによるカレンダー表示でも可です (￣∇￣)b
参考：Flashカレンダーを設置してみる

#3: Posted by yoichi @ February 11, 2007 [REPLY]: bzbell様
早速のレス、ありがとうございます！
いやぁ～、早まりました（汗）。ごめんなさい。
でもお陰様でフラッシュ版のことを教えていただいたので、この際そちらも試してみようと思うのですが、その場合のスタイルシートの指定はどのようなものになりますでしょうか。
まったくの素人でお恥ずかしい限りですが、どうぞ宜しくお願いします。

#4: Posted by bzbell @ February 11, 2007 [REPLY]

>>3 yoichi さん

こんにちわ^^

> この際そちらも試してみようと思うのですが、その場合のスタイルシートの指定はどのようなものになりますでしょうか。

そうですね♪
わたしも最初はデフォのカレンダー使ってましたけど、毎日更新なんて無理だったので割りと早い段階でフラッシュ・カレンダーに切り替えました。なるべく楽したいので（;￣∇￣A はは
今なんか不定期更新なのでカレンダー自体表示させてませんょ。

先ほどご紹介したフラッシュ・カレンダーの場合は特にCSSによる表示はないんです。
カレンダー作成時に背景などを指定すればOKです (￣∇￣)b
ですので、デフォルト・カレンダーのためのCSSの内容は削除されて構いませんよ。

> まったくの素人でお恥ずかしい限りですが、どうぞ宜しくお願いします。

いえいえ、わたしが分かる範囲のことなら何でもお答えしてますのでお気軽にどうぞ♪

#5: Posted by yoichi @ February 11, 2007 [REPLY]

bzbell様

あ～、またしても早とちり。フラッシュですもんねぇ。

そして早速設置してみましたぁ。うまくいって、念願の月送りカレンターが完成です。
ありがとうございました。

けれども．．．左寄せになっている。
お言葉に甘えまして、センターに合わせる方法をご存知でしたら教えていただけませんでしょうか。
度々すみませんが、どうぞ宜しくお願いします。

#6: Posted by bzbell @ February 11, 2007 [REPLY]

>>5 yoichi さん

お返事遅くなってすいません。
うまく設置できたようですね (●´∀｀●)

ご質問の件ですが、以下のようにすればセンタリングできます。

<div style="margin:auto;width:100%;text-align:center;">
<script type="text/javascript">
<!--
document.write('●●●');
//-->
</script>
</div>

フラッシュのコードを<div>～</div>で囲って、上記スタイルのように属性を設定すればセンタリングできますのでTRYしてみてください♪

#7: Posted by yoichi @ February 11, 2007 [REPLY]: bzbell様
やったぁ～！できました。ありがとうございます。
そして今日もまた、一つ賢くなることができました。
大感謝＆多謝です！！！

#8: Posted by bzbell @ February 12, 2007 [REPLY]

>>7 yoichi さん

やりましたね (￣∇￣)/
ところで、yoichi さんのブログかっくぃですね♪

逆にお聞きしたいのですが、yoichi さんのブログでは英語ページなるリンクがります。
どぅやってやるんですの?!

わたしのサイトでも外国からのアクセスがあるので英語表示さえてみたいですの (●´∀｀●)

#9: Posted by yoichi @ February 12, 2007 [REPLY]

bzbell様

お褒めに預かりまして嬉しいっす！
でもマジっすか？こんなおいらが何かを教えられるんすかぁ？

実はこれ、Google Translate（グーグル翻訳）ってページがありまして
http://translate.google.com/translate_t
そこの一番下のhttp://のところにご自分の任意のＵＲＬを入れ（おいらの場合はトップページ）、右側のプルダウンメニューから「Japanese to English BETA」（日本語から英語ベータ版）を選び、「Translate」（翻訳）のボタンをクリックすれば英語翻訳されたページが現れます。
小生のリンクはこの翻訳されたＵＲＬをコピペしているだけなんですね。

けれども、おいらのリンクにも書いてある通り（But Funky English＝けど、いかした英語←皮肉です（笑））、ベータ版というだけあってかなりアホな英語になっていまして、相当考えないとほとんど意味不明なんですよ。実際おいらもMyBlogLog（http://www.mybloglog.com/）というコミュニティに入っているので海外から多くの人が立ち寄ってくれるのですが、英語訳を併記してくれ、っていうリクエストがちょくちょくあります。やっぱヨーロッパの言語同士のようにはまだまだいかないようですよ。

というわけで、お役に立たない情報でしょうが、海外の方々に「姿勢」ぐらいは見せてあげてる、って感じでしょうか。

#10: Posted by bzbell @ February 12, 2007 [REPLY]

>>9 yoichi さん

情報ありがとうございます (￣∇￣)/
要するに、英語翻訳するにしても正しい日本語(翻訳しやすい日本語)で書いておかないと、おバカな翻訳しかしない･･･ということですね（つω-`｡）はぁ

わたしの記事ググるとか、変な日本語使いまくりですの (;￣∇￣A
もっと日本語勉強しておくべきでした Σ(￣Д￣；)

チョビッとずつ修正していきますの。
でも、オモシロそうだから試しにやってみます♪

ありがとうございます (m;_ _)mペコ

#11: Posted by yoichi @ February 12, 2007 [REPLY]

bzbell様

ん～、けれども正しい日本語が日本人にとって必ずしも分かりやすいとも限らず。。。
少なくともおいらはbzbell様の文章は理解しやすく非常に呑みこみ易いので大変助かっています。
おそらく、読者の立場がお分かりになる方なんでしょうね！

ではでは。

#12: Posted by bzbell @ February 12, 2007 [REPLY]