Home > index > 月別アーカイブをカレンダー風にする方法

月別アーカイブをカレンダー風にする方法

このサイトの月別アーカイブはカレンダー風になっています。（←左の画像みたいなもの、クリックするとポップアップ表示で拡大されます。）一目で何日の記事なのかわかりやすくしたいためです。

これを気にいってくれた友達に「テンプレ公開してーーー！」と頼まれたので記事にすることにしました。自分が作ったものを、気にいってもらえるのも嬉しいわ。（ネタにもなるし・笑）

今使ってる月別アーカイブとはほぼ一緒になるはずのテンプレートモジュールとスタイルシートです。

カレンダー風月別アーカイブ

captionに年月が表示
日付、曜日、記事タイトル、カテゴリー
土曜日：青字、水色背景、日曜日：赤字にピンク色背景
記事タイトルはリスト表示、リンクは記事アーカイブへ

よくあるカレンダーのように、祝日などもお休み扱いにすることもよく考えたらできるのかも。そこまで考えてません（笑）

「テンプレートモジュール：ブログ記事の概要(月別)」はカレンダー（テーブル）部分のみです。私はこの部分だけをモジュールにして、月別用ブログ記事アーカイブに読み込ませています。もちろんアーカイブマッピングも月別だけ。ブログ記事アーカイブを条件分岐させて読み込ませてもよかったけど、後々わかりづらくなりそうだったので。

Calenderタグを使用しています。<MTCalendar month="this">～</MTCalendar>を使って、一ケ月分のカレンダーを表示（1～31日）を行っています。

MTCalendarIfEntriesはブログ記事が投稿された日、MTCalendarIfNoEntriesはブログ記事が投稿されてない日を判断する条件タグなので、これを使ってブログ記事が投稿された日には、ブログ記事タイトルが表示されるようにしています。

<table summary="<MTArchiveDate format="%Y-%m">" class="monthlyCalendar"> <caption><$MTArchiveTitle$></caption> <thead> <tr> <th class="listDay">日</th> <th class="listWeek">曜</th> <th class="listTitle">タイトル</th> </tr> </thead> <tbody> <MTCalendar month="this"> <MTCalendarIfEntries> <MTEntries> <MTEntriesHeader> <tr abbr="<$MTCalendarDate format="%A" language="en" $>" class="<$MTCalendarDate format="%A" language="en" $>"> <th class="listDay"><$MTCalendarDay$></th> <th class="listWeek"><$MTCalendarDate format="%a" $></th> <td class="listTitle"><ul> </MTEntriesHeader> <li><a href="<$MTEntryLink archive_type="Individual"$>"><$MTEntryTitle$></a> <span>(<MTEntryCategories glue=", "><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel pmhc=""$>"><$MTCategoryLabel pmhc=""$></a></MTEntryCategories>)</span></li> <MTEntriesFooter> </ul> </td> </tr> </MTEntriesFooter> </MTEntries> </MTCalendarIfEntries> <MTCalendarIfNoEntries> <tr abbr="<$MTCalendarDate format="%A" language="en" $>" class="<$MTCalendarDate format="%A" language="en" $>"> <th class="listDay"><$MTCalendarDay$></th> <th class="listWeek"><$MTCalendarDate format="%a" $></th> <td class="listTitle"></td> </tr> </MTCalendarIfNoEntries> </MTCalendar> </tbody> </table>

スタイルシートは以下のような感じで指定しています。たぶんこのまま使えば今のサイトと同じようなデザインになるはずなので、後は好みで変更してください。

/*-------------------------------------- 月別アーカイブ ---------------------------------------*/ table.monthlyCalendar { border-collapse: collapse; margin: 0 20px 0.5em 20px; width: 90%; border: 1px solid #aaa; } table.monthlyCalendar th { border: 1px solid #ddd; color: #666; background-color: #bea4a7; text-align: center; } table.monthlyCalendar td { border: 1px solid #ddd; } table.monthlyCalendar tbody th.listDay, table.monthlyCalendar tbody th.listWeek { background-color: #fff; padding: 0 10px; width: 1em; font-weight: normal; } table.monthlyCalendar tr.Sunday th, table.monthlyCalendar tr.Sunday td{ background-color: #ffe5e5; } table.monthlyCalendar tr.Saturday td, table.monthlyCalendar tr.Saturday th { background-color: #e5e5ff; } table.monthlyCalendar tr.Sunday th{ color: red; } table.monthlyCalendar tr.Saturday th { color: blue; } table.monthlyCalendar ul { margin-top:0.2em; margin-bottom:0.2em; }

カレンダー風月別アーカイブ、探すと同じようなカスタマイズしてる人を見かけます。ただあまり月別アーカイブを見ることがないので、気づかないけど（爆）

他にもおもしろいカスタマイズあったら見てみたいなー。ちなみに、「記事の画像を使ったカレンダー風月別アーカイブ」もずーっと考えてるのですが、どうもしっくりくるデザインが浮かばない・・・・。１日に１記事とは限らないのがつらいなー。そのうちいい案が浮かぶだろうか。

エントリーURL:

この記事のURL: http://web.tkobeya.net/archives/2008/08/27_1234.php

トラックバック(0)

この記事のトラックバックURL: /45

コメント(4)

じゅんじゅんさん

「テンプレ公開してーーー！」と言った友だちです(笑)。
お手数おかけしました！そして、ありがとう！！
催促したくせに、自分の方は準備ができてなかったりするので（まだMT3）、
無事にいろいろ終わったら、お礼はまたあらためてさせてください。

＞記事の画像を使ったカレンダー

これ、おもしろそーだね。
いろいろイメージがふくらんでワクワクしました。
うまいこといったら、また紹介してね！（わたしもガンバル！）

| 返信

おーたむさん

じゅんじゅんさん、ネタ提供ありがとう。
いつもいつもちゃんと記事にしようと思いつつほったらかしなことが多いし、何より自分の作ったものを気にってもらえるのはうれしいです。
じゅんじゅんさんちのバージョンアップも楽しみにしてます。

「記事の画像を使ったカレンダー」いいでしょー。夢は広がるけど、でもこうスマートなイメージが浮かばないのよね。
じゅんじゅんさんもいい案あったらぜひ教えてね。（作ってくれてもOK)
私もいろいろ考えてみます。

| 返信

miya さん

はじめまして。
miyaと申します。

カレンダーを利用したページを見つけたので、コメントさせていただきました。
「記事の画像を使ったカレンダー」を作ったので、よろしければご覧ください。

デザイン的なところは、ダメダメなんですが、１日の投稿で最大で４件まで対応しています。

| 返信

おーたむさん

はじめまして。コメントありがとうございます。
ブログ見せていただきましたが、シンプルで素敵ですね。
欲張ってはいけないということをひしひしと感じます（笑）
画像を使ったカレンダーもシンプルで見やすくていいですね。
今度是非参考にさせてください。
めったに更新しないサイトですが、よろしければまた遊びに来てください。

| 返信