2004年1月20日

月間移動可能なカレンダー

この記事を読むのに 約9分20秒 かかります

カレンダーを今月分と前月分表示していたんですが、iframeを使う方法に切り替え、月間移動可能なカレンダーにしました。

Sukesam blog: 月間移動可能なMovableTypeのカレンダー

月間移動可能なMovableTypeのカレンダー
MovableTypeのカレンダーをみてempty pages (some movable type tips & tricks) tags/calendar iframeを参考に
カレンダーの移動が可能なようにテンプレートなどを作り直してみた。

技法公開に感謝いたします。

私の場合。
カレンダー専用のhtml格納場所を作成。

<MTBlogURL>archives/calendar

新しいアーカイブ・テンプレートを作成。
テンプレート名: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$>calstyle.css" type="text/css" />
<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>
</head>
<body>
<div align="center" class="calendar">
<table border="0" cellspacing="4" cellpadding="0" summary="Monthly calendar with links to each day's posts">
<caption class="calendarhead">
<MTArchivePrevious>
<a href="<MTBlogURL>archives/calendar/<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/calendar/<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>
</caption>
<tr height="20">
<th abbr="Sunday" align="center"><span class="calendar">日</span></th>
<th abbr="Monday" align="center"><span class="calendar">月</span></th>
<th abbr="Tuesday" align="center"><span class="calendar">火</span></th>
<th abbr="Wednesday" align="center"><span class="calendar">水</span></th>
<th abbr="Thursday" align="center"><span class="calendar">木</span></th>
<th abbr="Friday" align="center"><span class="calendar">金</span></th>
<th abbr="Saturday" align="center"><span class="calendar">土</span></th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center"><span class="calendar">
<MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank></span></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</body>
</html>

カレンダー専用のスタイルシートを作成。
テンプレートの名前:calendar stylesheet
出力ファイル名:calstyle.css
内容は以下。

@charset "EUC-JP";
A { color: #D00; text-decoration: underline; }
A:link { color: #D00; text-decoration: underline; }
A:visited { color: #900; text-decoration: underline; }
A:active { color: #E00; text-decoration: underline; }
A:hover { color: #E00; text-decoration: underline; }
.calendar {
font-family:verdana, arial, sans-serif;
font-size: x-small;
color: #111;
text-align:left;
text-transform:lowercase;
}
.calendarhead { 
font-family:verdana, arial, sans-serif;
color:#111;
font-size:small;
font-weight:bold;
padding:2px;
text-align:left;
} 

BLOGの設定→アーカイブの設定から新しいmonthlyアーカイブを追加。
このとき、アーカイブの種類をmonthlyに、テンプレートをcalendarにする。

<2004.2.13追記>
アーカイブファイルのテンプレートは、以下のようにしました。

calendar/<$MTArchiveDate format="%Y%m"$>.html

これで再構築してみて、カレンダー用のページが<MTBlogURL>archives/calendarに作成されることを確認する。
カレンダー用のページが作成できていれば、Main indexのテンプレート中に、組み込む。

<div class="sidetitle">
カレンダー
</div>
<div align="center" class="calendar">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y%m">.html" frameborder="0" marginwidth="0" marginheight="0"></iframe>
</div>

<追記 at 2004.3.03>
ミススペル修正。

<追記 at 2005.03.05>
これだけですと、月初にその月のエントリーがまだ無いとき、該当月のカレンダーも作成されていないため、カレンダーが表示されません。その後で回避方法についても記しましたが、わかりやすくするために、ここにリンクを記しておきます。こちらもご覧ください。

<追記 at 2008.12.23>
以下にMT4.23で再作成したときの2008版について記しました。こちらもご覧ください。

Posted by BB at 2004/01/20 14:57
Category : Movable Type | Comments [1] | Trackbacks [7]

 
Related Posts Plugin for WordPress, Blogger...

この記事を読んだ人が読んだ他の記事

トラックバック

» カレンダーを変更 from tomolog.
BBBLOGさんの方法でカレンダーを月間移動可能に変更しました。 設置後、Firefoxで"http://〓index.html"まで入力しないとアクセスできなくなって少しあわてましたが、カレンダーに使用するCSS のcontent-typeの記述を追加してみたら解決しました。ヨカッタ。 :) 以下、参... 続きを読む

» 二本足の贅沢 from neco de R
乍恐縮英単語の綴を御改可被下候 続きを読む

» 月間移動可能なカレンダー from maruchannel
以下を参考にカレンダーの月間移動を可能にしてみた。BBBLOG: 月間移動可能なカレンダー ついでにカレンダーの月クリックで、各月のアーカイブへリンクするように、上の方法でつくったcalendarテンプレートを改造。 archives/calendar/.html" title="« " onmouseove... 続きを読む

» 月別専用暦の改造 from neco de R
この記事を参考に月別アーカイブ専用の月間移動可能なカレンダーを設置して見ました。有り難う御座います。 続きを読む

» カレンダー改造 from 日々是堕落
前から思っていたのだが、MOVABLETYPEのデフォルトのカレンダーは当月 (最終更新月)のみの表示であるため、昔のエントリーを見るときは月ごとの一覧から 見なくてはならない。 たが、ここは日記サイトである。 日記である以上、「何月何日には何をした」とい... 続きを読む

» 大変参考になりました! from Funkalogic
BBBLOG: 月間移動可能なカレンダー... 続きを読む

» アーカイブとカレンダー表示 from おおきに京都
 カレンダー専用フォルダに書き出しこれを読み込ませるようしたかったので  「ウェブログの設定」「アーカイブの設定ページ」でアーカイブの種類に「月別」の優先を    Date-Based Archiveにしました。  カレンダーファイルをインデックッスファイルなどに読みんだ... 続きを読む

コメント[1]

このページを参考にさせてもらいました。
ありがとうございます。