さて６回目である。引き続き参考にしたのは、「即実践！ブログ徹底カスタマイズ術」(技術評論社)である。
今回は、カレンダーを月移動可能なカレンダーを設置する。書籍と書籍にも紹介されているsukesamさんのホームページを参考に作成してみたが、どうもうまくいかない。そこで、スタイルシートはそのまま使えるように変更してみた。
※表示するためHTMLタグの<>を[]に変換している。
まず、以下のテンプレートを「新しいアーカイブ・テンプレートを作る」から「calendar」というテンプレート名で保存します。
[!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 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$]” /]
[title][$MTBlogName$][/title]
[link rel=”stylesheet” href=”[$MTBlogURL$]styles-site.css” type=”text/css” /]
[MTBlogIfCCLicense]
[$MTCCLicenseRDF$]
[/MTBlogIfCCLicense]
[/head]
[body]
[div id=”container”]
[div id=”left-side”]
[div class=”sidebar”]
[div align=”center” id=”calendar”]
[table summary=”記事のリンク付き月間カレンダー” border=”1″]
[MTArchivePrevious]
[a href=”[MTBlogURL]archives/[MTArchiveDate format=”%Y_%m”].html” title=”« [MTArchiveDate format=”%B %Y”]” onmouseover=”window.
status='[MTArchiveDate format=”%B %Y”]’; return true” onmouseout=”window.status=”;return true”]«[/a]
[/MTArchivePrevious]
[$MTArchiveDate format=”%B %Y”$]
[MTArchiveNext]
[a href=”[MTBlogURL]archives/[MTArchiveDate format=”%Y_%m”].html” title=”» [MTArchiveDate format=”%B %Y”]” onmouseover=”window.
status='[MTArchiveDate format=”%B %Y”]’; return true” onmouseout=”window.status=”;return true”]»[/a]
[/MTArchiveNext]
[tr]
[th abbr=”日曜日”]日[/th]
[th abbr=”月曜日”]月[/th]
[th abbr=”火曜日”]火[/th]
[th abbr=”水曜日”]水[/th]
[th abbr=”木曜日”]木[/th]
[th abbr=”金曜日”]金[/th]
[th abbr=”土曜日”]土[/th]
[/tr]
[MTCalendar month=”this”]
[MTCalendarWeekHeader][tr][/MTCalendarWeekHeader]
[td align=”center”]
[MTCalendarIfEntries]
[MTEntries lastn=”1″][a href=”[$MTEntryPermalink$]” target=”_top”]
[$MTCalendarDay$][/a][/MTEntries][/MTCalendarIfEntries]
[MTCalendarIfNoEntries]
[$MTCalendarDay$][/MTCalendarIfNoEntries]
[MTCalendarIfBlank] [/MTCalendarIfBlank][/td]
[MTCalendarWeekFooter][/tr][/MTCalendarWeekFooter][/MTCalendar]
[/table]
[/div]
[/div]
[/div]
[/div]
[/body]
[/html]
次はアーカイブの設定です。「ウェブログの設定」画面で、「新しく、テンプレートとアーカイブを関連付ける」という欄で、アーカイブの種類を「月別」、テンプレートを「calendar」を指定して追加します。追加された月別のcalendarテンプレートの右のテキストボックスに
[$MTArchiveDate format=”%Y_%m.html”$]
を入力して、変更を保存します。スタイルシートは標準のものを利用します。
メインページの左サイドの最後にインラインフレームでcalendarテンプレートを設定します。
[h2]高機能カレンダー[br /](月移動可能)[/h2]
[iframe name=”cal-iframe” src=”[MTBlogURL]archives/[MTDate format=”%Y_%m”].html” frameborder=”0″ marginwidth=”0″ marginheight=”0″ width=”200″ height=”180″ scrolling=”no”][/iframe]
なんか少し右(中央)にずれています。文字のサイズを大きくすると明らかに標準のカレンダーとは違う表示である。あと一歩というところか。標準のカレンダーと入れ替えようかと思ったが、諦めた。まだまだ続く・・・予定。