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

Home ＞日記＞このサイトについて＞ MovableType ＞月間移動可能なカレンダー

2005年2月22日

以前「diving to ...」のサイトを参考に月めくりのできるカレンダーにしました。
ただしそのまま使うと私のレイアウトでは型崩れしてしまうので多少変更しました。
忘れないためにメモしておこうと思います。

私がやったことはこんな感じです。
オリジナルとはスタイルシートなどだいぶ変わっています。

[作成手順]
①カレンダー用のテンプレートを作成。
②カレンダー用スタイルシートを作成。
③アーカイブの設定で月別アーカイブを追加。
④メインページ(index.html)にカレンダーを設置。
⑤カレンダー部分のスタイルシートの変更。
⑥サイトの再構築

長くなるので「続きを読む」に詳細を書いてあります。
興味のある方だけどうぞ。

[作成手順詳細]
①カレンダー用のテンプレートを作成。
カレンダー用のHTMLファイルが独立するためテンプレートの作成をします。

管理メニューより
→「テンプレート」
→「アーカイブに関連したテンプレート」
→「新しいアーカイブテンプレートを作る」をクリック

テンプレートの編集画面が表示されるので以下の内容を設定します。

・テンプレートの名前　　→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 class="calendar">
<table summary="投稿されたエントリーへのリンク付き月間カレンダー"">

<caption class="calendarhead">
<MTArchivePrevious>
<a href="<MTBlogURL>archives/<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/<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>
<th abbr="Sunday">日</th>
<th abbr="Monday">月</th>
<th abbr="Tuesday">火</th>
<th abbr="Wednesday">水</th>
<th abbr="Thursday">木</th>
<th abbr="Friday">金</th>
<th abbr="Saturday">土</th>
</tr>

<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>

<td>
<MTCalendarIfEntries><MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"
target="_top"><$MTCalendarDay$></a>
</MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank></td>

<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>
</div>

→設定が終わったら「保存」をクリック。

②カレンダー用のスタイルシートテンプレート作成。

管理メニューより
→「テンプレート」
→「インデックステンプレート」
→「新しいインデックステンプレートを作る」をクリック。

テンプレートの編集画面が表示されるので以下の内容を設定します。

・テンプレートの名前　→カレンダー

・出力ファイル名　　　→calstyle.css

・テンプレートの中身

*
{color:#744734;
background:transparent;
font:normal normal normal 100%/1.5em osaka,"ＭＳＰゴシック",sans-serif;
margin:0;
padding:0;
text-align:left;
text-decoration:none;}

body
{
font-size:95%;
background-color:#336633; /* 背景濃い緑 */
}

/* ↓ リンクの色 */
a {text-decoration: underline;}
a:link {color: #df723b;}
a:visited {color: #df723b;}
a:active { color: #fcc28a; }
a:hover {color: #fcc28a;}
/* ↑ リンクの色 */

.calendar {
line-height: 120%;
font-size: small;
text-align: center;
}

.calendar table {
background-color:#fefbcc; /* クリーム色 */
border-collapse: collapse;
border: 1px solid #669966; /* グリーン */
empty-cells:show;
width: 100%;
height: 100%;
}

/*年月表示部分*/
.calendar caption {
color: #fefbcc; /* クリーム色 */
font-size: small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .2em;
}

/*曜日表示部分*/
.calendar th {
background-color: #e14545; /* 赤 */
color: #fefbcc; /* クリーム色 */
text-align: center;
font-weight: normal;
}

/*日付表示部分*/
.calendar td {
text-align: center;
border: 1px solid #669966; /* グリーン */
}

③アーカイブの設定でMonthlyアーカイブを追加する。

管理メニューより
→「ウェブログの設定」
→「アーカイブの設定」
→「新しく、テンプレートとアーカイブを関連付ける」
　　・アーカイブの種類：月別
　　・テンプレート：calendar
　　を選択し「追加」ボタンをクリック
→アーカイブの月別欄に「calendarテンプレート」が追加されていることを確認。
→追加された「calendarテンプレート」の「アーカイブ・ファイルのテンプレート」に
以下の内容を設定。（カレンダーのファイルパス）
　　<$MTArchiveDate format="%Y_%m.html"$>

※アーカイブの種類のチェックボックス
　　月別・日別にチェックがついていることを確認。
　　（私は日別にチェックがついてなくて作成できてませんでした。）
　　月別の優先ラジオボタンは日付アーカイブに付いていることを確認。

「変更を保存」ボタンをクリック。

④メインページ(index.html)にカレンダーを設置。
「テンプレートの編集」でメインページ(index.html)のカレンダー表示用を削除し
以下のタグをコピーする。

<div id="calendar"> <iframe name="cal-iframe" src="<MTBlogURL>archives/<MTDate format="%Y_%m">.html" frameborder="0" marginwidth="0" marginheight="0"></iframe> </div>

⑤カレンダー部分のスタイルシートの変更。
型崩れを防ぐためカレンダー用iframeのサイズを固定にしました。

「テンプレートの編集」でスタイルシート(styles-site.css)のカレンダー表示用を削除し
以下のタグをコピーする。

div#calendar iframe{ width:160px; height:170px; }

⑥サイトの再構築
サイト全体を再構築してください。

投稿者おーたむ : 17:55 | MovableType | コメント [2] | トラックバック [1] | ▲top

エントリー

このエントリーのURL:

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

このリストは、次のエントリーを参照しています: 月間移動可能なカレンダー:

» 月間移動可能なカレンダー from @delicious
いまひとつうまいこと出来なかった「移動式カレンダー」ですが、やっと設置できまし... [続きを読む]

トラックバック時刻: 2005年2月27日 20:37

コメントありがとうございます

おーたむさんありがとー！
この通りやったらばっちり設置できました！

投稿者じゅんじゅん : 2005年2月27日 20:38

どーいたしましてー。
見た目崩れるとどこ直していいのかわからないのが問題だよね～。
無事出来てよかったです。

投稿者おーたむ : 2005年2月28日 23:53

よろしければコメントください。

スタイル：

Diary＠多読の小部屋

Contens