TopMovable Typeカスタマイズカレンダー > 2005年12月
2005年12月 6日

月送りカレンダー(簡易版)

December 6,2005 11:58 PM
Tag:[, , ]
Permalink

月送りカレンダー(簡易版)月別アーカイブページに表示されたカレンダーに、簡単に月送り用のリンクをつけるカスタマイズです。

通常の1ヶ月カレンダーは月送りができないため、過去に作った日別アーカイブへのリンクがなくなってしまうという欠点があり、月送りカレンダーが急速に普及したという経緯があります。ですが、月送りカレンダーは専用のアーカイブテンプレートを作ったり、表示のために iframe 要素を使用したりと、やや複雑なカスタマイズになるというのが難点でした。

このカスタマイズではそのような手間はいらず、下にあるリストを貼り付ければ通常のカレンダーが月送りカレンダーに早代わりします。また Serena Bach(sb) のように、前月または次月のリンクをクリックするとページ全体も切り替わるのが利点です。

ただし月送りになるのは月別アーカイブページのみです(利用可能なアーカイブが限定されているので「簡易版」と命名しました)。メインページやカテゴリー・アーカイブ、エントリー・アーカイブは1ヶ月表示のままです。
簡易版といっても、カレンダーの切り替えが必要なのは基本的に月別アーカイブなので、個人的にはお勧めのカスタマイズです。

ひとつだけ注意事項がありまして、日付アーカイブテンプレートは他の日別アーカイブページ・週別アーカイブページと兼用になっていますが、このカスタマイズを行うと、これらのアーカイブのカレンダーにも同様のリンクが設定されることになります。ただし日別アーカイブではこのリンクが昨日(または明日)、週別アーカイブでは先週(または次週)のリンクになり、見栄えとしてはやや妙なものになります。

このため、カスタマイズ前の日別アーカイブテンプレートを丸ごとコピーした、新しい日付アーカイブテンプレートを作り、日別アーカイブ(または週別アーカイブ)はこのテンプレートと関連づけることをお勧めします(やっぱり面倒!というツッコミはなしで)。
新しくアーカイブテンプレートを作る方法は、このエントリーでは割愛しますので、アーカイブテンプレート作成方法を参照ください。

以下、カスタマイズ方法です。

1.テンプレートを修正する

管理画面から「テンプレート」→「アーカイブ」をクリックして「日付アーカイブ」を選択します。カレンダーを表示したい位置に下記のリストを挿入します。デフォルトテンプレートは1カラムのため、ここでは公開テンプレートを例にしています。本日の日付を表示するリアルタイムカレンダーも組み込んでます。
デフォルトテンプレートの場合は、事前に2カラムまたは3カラムへの変更を行ってください。

<!-- カレンダー開始 -->
<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTCalendarDate format="%B %Y"$>">
<caption class="calendarhead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">«</a> </MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">»</a></MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></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"><span class="blue">Sat</span></span></th>
</tr>
 
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span class="calendar"></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries sort_order="ascend">
<MTDateHeader><a href="<$MTEntryPermalink archive_type="Daily"$>" title="</MTDateHeader><$MTEntryTitle$><MTDateFooter>" target="_top"><$MTCalendarDay$></a><MTElse> / </MTElse></MTDateFooter>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
</MTIfArchiveTypeEnabled>
<!-- カレンダー終了 -->
 
<script type="text/javascript">
<!--
data = new Date();
year = data.getYear();
year = (year < 2000) ? year + 1900 : year;
month = data.getMonth() + 1;
date = data.getDate();
table = document.getElementById('calendarTable');
flag = 0;
summary = table.getAttribute('summary');
text = year + '年' + month + '月';
if (summary.indexOf(text) != -1) {
    elements = table.getElementsByTagName('span');
    for(k = 0; k < elements.length; k++) {
        if (elements[k].childNodes){
            if((elements[k].childNodes)[0].nodeName == 'A') {
                if((elements[k].childNodes)[0].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            } else {
                if (elements[k].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            }
        }
    }
}
//-->
</script>

設定したら保存・再構築してください。

2.通常カレンダーとの相違点

JavaScript を除いて、1ヶ月表示のカレンダーとの違いは、下記で示す部分です。削除または変更前を赤色で、追加または変更後を青色で示しています。

具体的には、2ヶ所ある MTDate タグを MTCalendarDate に変更し、MTCalendar に month 属性で this(今月)を付与します。あとは前月と次月のリンクを追加しています。

<!-- カレンダー開始 -->
<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTDate$MTCalendarDate format="%B %Y"$>">
<caption class="calendarhead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">«</a> </MTArchivePrevious>
<$MTDate$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">»</a></MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></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"><span class="blue">Sat</span></span></th>
</tr>
 
<MTCalendar month="this">
                :

3.日別アーカイブのカレンダーについて

冒頭で説明した通り、日別アーカイブはカスタマイズ前の日付アーカイブテンプレートを利用されていることが前提ですが、日別アーカイブも同じカレンダーを利用し、不要な前月および次月のリンク(<MTArchivePrevious>~</MTArchivePrevious> と <MTArchiveNext>~<MTArchiveNext>)を削除することで、ページに表示されている日と同じ月が表示されるようになります。

Comments [23] | Trackbacks [3]
2005年12月 4日

カレンダーのリンクにツールチップを設定する

December 4,2005 11:50 PM
Tag:[, , ]
Permalink

カレンダーのリンクにツールチップを設定するカレンダーのリンクにマウスをポイントすると、その日にエントリーした記事の全タイトルをツールチップ(説明)としてポップアップするカスタマイズです。最近失敗が多いので、IE/Firefox/Opera でリアルタイムカレンダー(JavaScript版)で動作の正常性を確認しています。スクリーンショットは IE6.0 でデフォルトテンプレートを使った場合の表示例です(ツールチップの表示はブラウザによって異なります)。

カレンダーを表示するタグの赤色部分を青色のものに書き換えてください(カレンダー全体のタグは省略しています)。

      :
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span class="calendar"></MTElse></MTCalendarIfBlank>
<MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
<MTEntries><MTDateHeader><a href="<$MTEntryPermalink archive_type="Daily"$>" title="</MTDateHeader><$MTEntryTitle encode_html="1"$><MTDateFooter>" target="_top"><$MTCalendarDay$></a><MTElse>&nbsp;/&nbsp;</MTElse></MTDateFooter></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
      :

上記のリストでは、記事を新着順に表示する設定になっています。順番を入れ替える場合は、

<MTEntries>

の部分を

<MTEntries sort_order="ascend">

に変更してください。

またタイトルとタイトルの区切り文字には "/" にしていますが、他の文字に変更する場合は

<MTElse>&nbsp;/&nbsp;</MTElse>

の赤色部分を任意の文字に書き換えてください。区切り文字の左右は文字実体参照 &nbsp; を使って空白を挿入していますので、不要であれば削除してください。

2007.03.06 追記
MTEntryTitle タグに encode_html 属性を追加しました。

Comments [10] | Trackbacks [7]
2005年12月 3日

リアルタイムカレンダー再修正のお知らせ

December 3,2005 11:51 PM
Tag:[]
Permalink

先日エントリーしたリアルタイムカレンダー(JavaScript版)ですが、スクリプトに誤りがあり、枠の装飾がきちんとできていないことが再度発覚致しました。この場をお借りしてお詫び申し上げます。
リストは修正し、日付にリンクのある場合とない場合の動作を IE/Firefox/Opera で確認致しました。2005/12/04 00:10 以前にリストを取得された方はお手数ですが、2項の作業を再度行ってくださいますよう、よろしくお願い致します。

なお <MTCalendar> ? </MTCalendar> の間の改行は変更されないよう、そのままお使いください。改行を変更されると Mozzila系ブラウザで装飾が行われなくなる可能性があります。

Comments [6] | Trackbacks [1]
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