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

Movable Type 備忘録

月移動できるカレンダーにする

Jun192006
Vote:
http://bizcaz.com/archives/2006/06/19-000355.php
Categories: Customize
Tags: Calendar
Social Bookmark

Prev Page: トラックバック一覧をポップアップ画面にする
Next Page: MovableTypeに年別アーカイブを追加する

今までずっと疑問に思ってたことが、カレンダーの必要性です。
少なくともわたしのブログでは、アクセス解析でもほとんどアクセスがありません。

オブジェとしか思っていないカレンダーを少しでも見栄えよくしようと思ってかわいいフラッシュ・カレンダーを設置していました。

でも、1つ問題があってフラッシュ・カレンダー設置したはいいけど、XHTMLの構文チェックでエラーしてしまうんです。
XHTMLの構文に拘っていたわたしにとっては致命的で、JavaScriptを使ってフラッシュ・コードを表示させるようにしていました。

でも、これでもまだ問題があったんです。
実はGoogleのウェブマスターのためのガイドラインで気になることが書いてあったんです。
以下ちょっと引用します。

技術関連のガイドライン

Lynx などのテキストブラウザを使用してサイトを確認する。ほとんどの検索エンジンスパイダーは、クロール時に Lynx に表示される形式で各サイトを認識します。テキストブラウザで、Javascript、cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能を使用して作成されたサイトの一部が表示されない場合は、検索エンジンスパイダーがサイトをクロールするときに問題が発生する可能性があります。

もうお気づきの人もいると思いますが、話には聞いていたJavaScriptがSEO的にはマイナス…というのはまんざらでもないようです。
つか、SEOのことよく分かってませんけどね (;￣∇￣A はは

- 2006.08.24 追記 -

JavaScriptがSEO的にマイナス…と聞いてましたが、実際のところあまり関係ないような気がします。
しばらく様子みたりしましたが、JavaScript使ってないからって検索エンジンの上位表示されるたわけでもないし、使ってたって上位表示されるサイトもあるわけでして、ホントに検索エンジンの上位表示を狙うなら、トータル的にSEO対策しないとあまり効果ないような気がします。

最近ではAjaxを多用されてるサイトもありますしねぇ。

ということで、便利なJavaScriptもあるので気にせず使うことにしました (￣∇￣)/

ということで、カレンダーの必要性に疑問を持っていたわたしは、迷うことなくフラッシュ・カレンダーを取り外し!!
かといって、なくしちゃうのもさみしい…ということで、別な形でカレンダーを設置し直しました。

今回は、月移動できるカレンダー＋テンプレート内をすっきりさせるカスタマイズをやってみました。

今回紹介するカレンダーのカスタマイズは、テンプレート内からカレンダーのコードを外に出して、<iframe>タグで表示させるカスタマイズです。

カスタマイズ方法

まずは、カレンダーのテンプレートを作成します。
MovableType(ムーバブルタイプ)の管理画面の左サイドバーにある「テンプレート」というリンクをクリックして、画面上部にある「アーカイブ」というリンクをクリックします。
そうすると、エントリ・アーカイブなどのテンプレート一覧が表示されます。

そして、右上にある「テンプレートを新規作成」とありますので、そのリンクをクリックしてください。
入力内容は以下の通りです。
1. テンプレート名：カレンダー(任意)
2. このテンプレートにリンクするファイル：未記入でいいです。
3. テンプレートの内容：以下のコードをコピペします。
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" /><title><$MTBlogName$></title>
5. <link rel="stylesheet" href="<$MTBlogURL$>style/styles-site.css" type="text/css" />
6. </head>
7. <body class="calendar-body"><center>
9. <div id="calendar" class="hide">
10. <table align="center" width="160" border="0" cellspacing="4" cellpadding="0" summary="Monthly Calendar">
12. <caption>
13. <MTArchivePrevious><a href="<MTBlogURL><MTArchiveDate format="%Y/%m/calendar">.html"> ≪</a></MTArchivePrevious>
15. <$MTArchiveDate format="%B %Y"$>
17. <MTArchiveNext><a href="<MTBlogURL><MTArchiveDate format="%Y/%m/calendar">.html"> ≫</a></MTArchiveNext>
18. </caption>
20. <tr>
21. <th abbr="Sunday"><span class="sun">Su</span></th>
22. <th abbr="Monday"><span class="mon">Mo</span></th>
23. <th abbr="Tuesday"><span class="tue">Tu</span></th>
24. <th abbr="Wednesday"><span class="wed">We</span></th>
25. <th abbr="Thursday"><span class="thu">Th</span></th>
26. <th abbr="Friday"><span class="fri">Fr</span></th>
27. <th abbr="Saturday"><span class="sat">Sa</span></th>
28. </tr>
30. <MTCalendar month="this">
31. <MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
32. <td align="center"><span class="days">
33. <MTCalendarIfEntries>
34. <MTEntries lastn="1">
35. <a href="<$MTEntryLink archive_type="Daily"$>" title="[<$MTEntryTitle$>]" target="_top"><$MTCalendarDay$></a>
36. </MTEntries>
37. </MTCalendarIfEntries>
39. <MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
40. <MTCalendarIfBlank> </MTCalendarIfBlank>
41. </span></td>
43. <MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
44. </MTCalendar>
45. </table>
46. </div>
48. </center></body>
49. </html>
一通り入力したら保存して再構築します。
次に、月別アーカイブに関連付けします。
MovableType(ムーバブルタイプ)の管理画面左にある、「設定」というリンクをクリックして、画面上にある「公開」というリンクをクリックします。

画面下の方に「マッピングを新規作成」とあるのでそれをクリックします。
設定内容は以下の通りです。
1. アーカイブの種類：月別を選択します。
2. テンプレート：先ほど作ったカレンダーを選択します。
選択したら右横にある「追加」ボタンをクリックすると、カレンダー用のテンプレートがマッピングされます。

一覧表示されたカレンダー用テンプレートのドロップダウンリストから、「カスタマイズする」を選択してください。
そして、出力フォーマットとして以下のように入力してください。
1. %y/%m/calendar.html
これは日付アーカイブのファイル名が %y/%m/%i/index.html で作成されるので、カレンダー用のファイル名を%y/%m/calendar.htmlと指定しています。
例えば、今月(2006/06)の日付アーカイブは 2006/06/index.html ですが、カレンダーは 2006/06/calendar.html で作成されます。

入力したら、変更を保存ボタンをクリックして再構築します。
次に、トップページのテンプレートを変更します。
トップページで表示しているカレンダーのコードを削除して、任意の場所に以下のコードを追加します。
1. <iframe name="calendar" src="<MTBlogURL><MTDate format="%Y/%m/calendar">.html" width="160" height="120" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe>
カレンダー用のテンプレートを透過にしたい場合には、以下のコードをお使いください。
ただし、以下のコードでは、<iframe>タグの属性に allowtransparency はないので、XHTMLの構文チェックではエラーになります。
1. <iframe name="calendar" src="<MTBlogURL><MTDate format="%Y/%m/calendar">.html" width="160" height="120" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true"></iframe>
青い字の部分は先ほどマッピングしたカレンダー・テンプレートのファイル名を指定しています。
赤い字の部分は各自のブログデザインに合わせてサイズを変更します。
一通り変更したら保存して再構築します。
次にスタイルシートを変更します。
わたしが使っているスタイルシートは以下の通りです。
1. body.calendar-body {
2. background: none;
3. font-size: 11px;
4. line-height: 120%;
5. }
7. #calendar {
8. font-family: Verdana, Arial, sans-serif;
9. color:#ffc2c2;
10. }
12. /*カレンダーのタイトル(年)*/
13. #calendar caption {
14. }
16. /*カレンダーの曜日*/
17. #calendar th {
18. height: 20px;
19. }
21. /*カレンダーの日付*/
22. #calendar td {
23. }
25. #calendar a:link,
26. #calendar a:visited,
27. #calendar a:active {
28. font-size: 11px;
29. color: #990000;
30. }
31. #calendar a:hover {
32. position: relative;
33. bottom: 1px;
34. font-size: 11px;
35. }
お好みで色、フォントサイズなどを変更してくださいな。