top

横一列カレンダー

横一列カレンダーは以前に1回導入したことがあります。その時はMdN社のウェブログ・デザインという本を参考にしてタグを組みました。要は普通のカレンダーからテーブルを無くすだけなんですが。

■基本形1

<$MTDate format="%B %Y"$>|
<MTCalendar>
<MTCalendarIfEntries><MTEntries lastn="1">
<a title="<$MTEntryTitle$>" href="<$MTEntryPermalink$>">
<$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$>
</MTCalendarIfNoEntries>
</MTCalendar>

これが横一列カレンダーの基本原型です。上のタグは無装飾の状態なので、全体を<div>~</div>で囲んで好きなスタイルで装飾するといいと思います。

■基本形2(ダイナミック・パブリッシング対応版)
3.2のダイナミック・パブリッシングには上のタグではカレンダーのリンクが正常生成されないバグがあるので、それを回避するためにリンク先は個別頁ではなく日別頁とし、あらかじめアーカイブマッピングで日別頁のアドレスを決めておきます。
ここでは日別頁のアドレスを<$MTBlogURL$><$MTArchiveDate format="%Y%m%d"$>.htmlとしたものとして例示しています。

<$MTDate format="%Y&nbsp;%b"$>|
<MTCalendar>
<MTCalendarIfEntries>
<MTEntries><MTDateHeader>
<a href="<$MTBlogURL$><$MTArchiveDate format="%Y%m%d"$>.html" title="</MTDateHeader>[<$MTEntryTitle$>]<MTDateFooter>">
<$MTCalendarDay$>
</a>
</MTDateFooter></MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<$MTCalendarDay$>
</MTCalendarIfNoEntries>
</MTCalendar>

ダイナミック対応の横一列カレンダーの基本原型です。上のタグは無装飾の状態なので、全体を<div>~</div>で囲んで好きなスタイルで装飾するといいと思います(もちろん、このタグも静的生成でも3.3のダイナミックでも使えます)。

■応用編~月移動横一列カレンダー
カレンダーを月移動させる方法はこちらをご覧下さい。ここでは差し替えるタグのみ載せています。今回はカレンダーの日付からは日別エントリー頁に飛ぶようにしてみました(あらかじめ設定で日別アーカイブにチェックを入れておきます)。

静的生成用のカレンダーアーカイブ

<!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" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="Movable Type <$MTVersion$>" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<title><$MTBlogName encode_html="1"$>: カレンダー</title>
</head>
<body class="calendarbody">
<MTArchivePrevious>
<a href="<$MTBlogURL$>calendar/<$MTArchiveDate format="%Y_%m"$>.html">&lt;</a>&nbsp;</MTArchivePrevious>
<b><$MTCalendarDate format="%Y&nbsp;%b"$></b>|
<MTCalendar month="this">
<MTCalendarIfEntries>
<MTEntries><MTDateHeader>
<a href="<$MTBlogURL$><$MTArchiveDate format="%Y%m%d"$>.html" title="</MTDateHeader><$MTEntryTitle$><MTDateFooter>" target="_top"><$MTCalendarDay$></a>
<MTElse>&nbsp;|&nbsp;</MTElse></MTDateFooter></MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$>
</MTCalendarIfNoEntries>
</MTCalendar>
<MTArchiveNext>
&nbsp;<a href="<$MTBlogURL$>calendar/<$MTArchiveDate format="%Y_%m"$>.html">&gt;</a></MTArchiveNext>
</body>
</html>

☆上の例では<$MTBlogURL$><$MTArchiveDate format="%Y%m%d"$>.htmlの部分を、アーカイブマッピングで決めた日別頁のアドレスで指定していますので、3.2のダイナミックパブリッシングでも使えます。

<$MTBlogURL$>calendar/<$MTArchiveDate format="%Y_%m"$>.htmlの部分は、
<$MTArchiveLink$>にすれば月別頁に飛びます。(target="_top"の指定が必要)
上の例ではiframe内で移動するようにしているので、表示している頁はそのままで、カレンダーだけがスッスッと切り替わる感じになります。

☆アーカイブの設定にチェックを付けている場合は、<$MTBlogURL$>の代わりに<$MTBlogArchiveURL$>を使って下さい。

なお、同じ日に複数エントリーのあった場合、その日の全部のエントリータイトルを出すやり方は
小粋空間さんのカレンダーのリンクにツールチップを設定する
を参考にさせていただきました。もともとカレンダーにはその日のタイトルを表示するスタイルにしていたのですが、複数エントリーを表示する方法は分からなかったんですよね。ありがとうございました。

カレンダー用のスタイルシート

スタイルシートは以下のものに差し替え。

/* 月移動カレンダー */

.calendarbody {
font-size: 11px;
line-height: 150%;
color: #808080;
background-color: #FFFFFF;
background-image: url("")
}

赤字の部分は好きな値にしましょう~。

(2006年8月11日追記)

 

トラックバックURL

トラックバックされる際にはこの記事へのリンクをお願い致します

コメントを投稿

 


 <注意>
 ご利用のブラウザ、設定ではコメントのプレビューおよび投稿はご利用になれません。
 コメント投稿の際はお手数ですがjavascriptをオンにして下さい。
 *javascriptオフのまま投稿ボタンを押すと送信内容が消えますのでご注意下さい。