TopMovable Typeカスタマイズカレンダー > 2004年9月
2004年9月24日

月送りカレンダー

September 24,2004 11:34 PM
Tag:[, , ]
Permalink

月送りカレンダーカレンダーを月送りタイプに変更するカスタマイズです。このカスタマイズを行うことでスクリーンショットのように年月の横に前月(および次月)のカレンダーへのリンクが表示されます。
参考サイトは下記です。ありがとうございました。

以下、公開テンプレート用にデザインを修正した手順メモです。

2006.10.10 追記現在 Ajax 月送りカレンダーを公開中です。

1.アーカイブテンプレート用ディレクトリ設定

この項目はアーカイブテンプレート専用のディレクトリを作成するためのものです。月送りカレンダーのためだけの設定ではありませんが、この設定を行うことでトップディレクトリ(index.html があるディレクトリ)をすっきりさせることができます。

注:この設定を行うと他のアーカイブテンプレートのURLも変更されます。変更したくない場合は、この項目をスキップしてください(ただし3項および5項のリスト内にある "archives/" を削除してください)。

設定方法は次の通りです。ご利用のバージョンを確認して「3.2 以降」または「3.1x 以前」のいずれかを行ってください。

1.1 バージョン 3.2 以降

管理メニューの「設定」→「公開」の「アーカイブの設定」にチェックをいれて、その下に表示されたフォームに下記の内容を設定。

アーカイブURL:http://ブログURL/archives/
アーカイブパス:アーカイブURLまでのパス

例えば、当サイトの場合、

アーカイブURL:http://www.koikikukan.com/archives/
アーカイブパス:/home/koikikukan/public_html/archives

という具合になります。

1.2 バージョン 3.1x 以前

管理メニューの「ウェブログの設定」→「基本設定」の「ローカル・アーカイブ・パス」と「アーカイブのURL」に、上記と同様、

ローカル・アーカイブ・パス:アーカイブURLまでのパス
アーカイブのURL:http://ブログURL/archives/

を設定します。

2.カレンダー用スタイルシート作成

ご利用のバージョンを確認して「3.2 以降」または「3.1x 以前」のいずれかを行ってください。

2.1 バージョン 3.2 以降

管理メニューの「テンプレート」→「インデックス」→「テンプレートを新規作成」をクリック。次画面で下記を設定します。設定が終わったら「保存」をクリック。

テンプレートの名前:カレンダー用スタイルシート
出力ファイル名:calendar.css
テンプレートの中身:リスト1をコピー&ペースト

2.2 バージョン 3.1x 以前

管理メニューより「テンプレート」→「インデックステンプレート」右の「新しいインデックステンプレートを作る」をクリック。次画面で下記を設定します。設定が終わったら「保存」をクリック。

テンプレートの名前:カレンダー用スタイルシート
出力ファイル名:calendar.css
テンプレートの中身:リスト1をコピー&ペースト
@charset "<$MTPublishCharset$>";
body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
}
.calendar {
    color: #444444;
    text-align: center;
}
.calendarhead {
    font-size: 9px;
    letter-spacing: .2em;
}
.calendar table {
    padding: 0;
    border-collapse: collapse;
}
.calendar th {
    padding-top: 5px;
    font-size:8px;
    width : 20px ;
}
.calendar td {
    padding: 2px 0;
    font-size:10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.holiday {
    color: #e50003;
}
.saturday {
    color: #0000ff;
}
リスト1:カレンダー用スタイルシート

3.カレンダー用アーカイブテンプレート作成

ご利用のバージョンを確認して「3.2 以降」または「3.1x 以前」のいずれかを行ってください。

3.1 バージョン 3.2 以降

管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。次画面で下記を設定します。設定が終わったら「保存」をクリック。

テンプレートの名前:カレンダー
テンプレートの内容:リスト2(本日の日付部分がboldになるようにしています)

3.2 バージョン 3.1x 以前

管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。次画面で下記を設定します。設定が終わったら「保存」をクリック。

テンプレートの名前:カレンダー
テンプレートの内容:リスト2(本日の日付部分がboldになるようにしています)
<!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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" /><title><$MTBlogName$></title>
<link rel="stylesheet" href="<$MTBlogURL$>calendar.css" type="text/css" /> 
</head>
<body >
<div class="calendar">
<table id="calendarTable" summary="<$MTArchiveDate format="%Y/%m"$>">
<caption class="calendarhead">
<MTArchivePrevious>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.html"><</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$> 
<MTArchiveNext>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.html">></a>
</MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday" ><span class="holiday">Sun</span></th>
<th abbr="Monday" >Mon</th>
<th abbr="Tuesday" >Tue</th>
<th abbr="Wednesday" >Wed</th>
<th abbr="Thursday" >Thu</th>
<th abbr="Friday" >Fri</th>
<th abbr="Saturday" ><span class="saturday">Sat</span></th>
</tr>
 
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span<MTCalendarIfToday> class="today"</MTCalendarIfToday>></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</body>
</html>
リスト2:カレンダー用アーカイブテンプレート

4.ファイルの関連付け

ご利用のバージョンを確認して「3.2 以降」または「3.1x 以前」のいずれかを行ってください。

4.1 バージョン 3.2 以降

予め、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成 」をクリックして下記の設定を実施。

アーカイブの種類:月別(またはMonthly)
テンプレート:カレンダー

設定後、「追加」をクリック。正常に保存されると下の「月別」の欄にカレンダーテンプレートが追加されます。追加された部分の設定は下記の通りです。

「優先」欄のラジオボタン:日付アーカイブのまま
「出力フォーマット」欄:リスト3
calendar/%y/%m/%i
リスト3:出力フォーマット(3.2 以降)
「アーカイブの設定」画面設定が完了した後の「アーカイブの設定」画面は左のようになります。設定内容が誤っていると正常にカレンダーが生成されません。ご注意ください。

4.2 バージョン 3.1x 以前

管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施。

アーカイブの種類:月別(またはMonthly)
テンプレート:カレンダー

設定後、「保存」をクリック。正常に保存されると下の「月別」の欄にカレンダーテンプレートが追加されます。

追加された部分の設定は下記の通りです。

「優先」欄のラジオボタン:日付アーカイブ(またはDate-Based Archive)のまま
「アーカイブ・ファイルのテンプレート」欄:リスト4
<$MTArchiveDate format="calendar/%Y/%m/index.html"$>
リスト4:アーカイブ・ファイルのテンプレート(3.1 以前)
「アーカイブの設定」画面設定が完了した後の「アーカイブの設定」画面は左のようになります。設定内容が誤っていると正常にカレンダーが生成されません。ご注意ください。

5.カレンダーの設置

「テンプレートの編集」 で各テンプレートのカレンダー表示用タグ・リスト5(赤色)を全て削除し、カレンダー表示用の iframe タグのリスト6(青色)と入れ替えてください。

<div class="side">
<div class="calendar">
<table border="0" cellspacing="4" cellpadding="0" align="center" summary="投稿した日にリンクする月別のカレンダー">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr>
<th abbr="Sunday"><span class="calendar"><font color="#e50003">Sun</font></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><font color="blue">Sat</font></span></th>
</tr>
 
<MTCalendar> 
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center" <MTCalendarIfToday>bgcolor="#ffffe0"</MTCalendarIfToday>><span class="calendar">
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> </MTCalendarIfBlank>
</span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>

リスト5:カレンダー用テンプレートタグ

<div align="center" class="side">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.html" width="150" height="115" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>

リスト6:月送りカレンダー用 iframe タグ

6.サイトの再構築

以上です。これで過去の日別アーカイブへのリンクが有効になりました。
なお iframe を使用している関係上、カレンダー下の空白については制御することはできません(6週表示で丁度良い高さになります)。

2004.10.02 追記
その月のエントリーが存在しない状態で(コメント等により)再構築されるとカレンダーが表示されない状態になります。元サイトの記事を見てもこれという策はないみたいです(なぜ普通のカレンダーが生成されてこちらが生成されないのかは?です)。
回避策は、月が変わる前に空のエントリーを一旦「公開」で登録し、その後削除しておけばカレンダーが生成されます。ただしエントリーがないため前月のカレンダーに移動すると今月に戻るリンクがなく、動作的にはやや妙な感じです。
これを回避する場合は、月送りカレンダー・毎月1日に表示されない不具合を改善を参照ください。

2004.10.04 追記
カレンダーからのリンクは日別アーカイブを参照する設定にしてますので、以下のいずれかの設定を実施してください。

【パターン1】
管理メニュー左より「ウェブログの設定」をクリックし、次ページの右上で「アーカイブの設定」をクリック。次ページで「アーカイブ」というタイトルの設定欄がありますので「日別」の左のチェックボックスをつけて再構築してください。
個人的にはこちがお勧めです(趣味の問題ですが)。

【パターン2】
テンプレートのカレンダーの設定部分に

<a href="<$MTEntryLink archive_type="Daily"$>">

というのがありますので、これを

<a href="<$MTEntryPermalink$>">

に変更。こちらはカレンダーを使っているテンプレート全てを修正する必要があります。

両者の違いですが、前者は1日分のエントリーが全て表示されるページにリンクされます。後者はその日の(多分)最初の個別アーカイブのエントリーにリンクされます(その代わりコメント欄も併せて表示されます)。

2004.12.21 追記
「カレンダーの設置」の説明の中で入れ替え前のカレンダータグを明示しました。

2005.01.04 追記
項番付与変更しました。また3項の青色部分のiframeのサイズを修正(幅160→150/高さ110→115)しました。

2005.02.02 追記
タイトルを「カレンダー切り替え」から「月送りカレンダー」に変更しました。

2005.02.24 追記
カレンダーファイルの拡張子を .php から .html に変更しました(PHPスクリプトが存在しないため)。

2005.06.05 追記
1日に表示されなくなる不具合を解消する記事へのリンクを追加しました。

2005.06.08 追記
2項の説明を修正しました。また設定後の画面を追加しました。

2005.10.31 追記
3.2-ja 用の記述を追加しました。また項番の割り振りを修正しました。

2006.03.23 追記
CSSとテンプレートの内容を見直しました。

2006.03.27 追記
テンプレートの日付アーカイブリンクに target 属性指定がもれてましたので修正しました。

2006.09.10 追記
記述を全面的に見直しました。

2006.09.12 追記
table 要素に id 属性を追加しました(休日表示カスタマイズのため)。

Comments [138] | Trackbacks [60]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3