二〇〇五年 八月 三日（水）

400blogカレンダーのカスタマイズ

[Blog記録]

なんだかいじっていたらカレンダーが消えたので（爆）新しく横型にしてみた。

小粋空間: 月送りカレンダー（横型・リアルタイム版）

カレンダーテンプレートの設定
管理メニューの「テンプレート」クリック→「アーカイブに関連したテンプレート」の右側にある「新しいアーカイブ・テンプレートを作る」をクリック。次画面で下記を設定してください。
・テンプレートの名前：カレンダー（名称は何でもOKです）
・このテンプレートにリンクするファイル：（設定不要）


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1./ Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<link rel="stylesheet" href="<$MTBlogURL$>calendar.css" type="text/css" />
<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>
</head>
<body >
<div class="calendar">
<span class="calendarHead">
<MTArchivePrevious>
<a href="<$MTBlogURL$>archives/calendar/<$MTArchiveDate format="%Y/%m/index" $>.php">＜</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y" language="en"$>
<MTArchiveNext>
<a href="<$MTBlogURL$>archives/calendar/<$MTArchiveDate format="%Y/%m/index" $>.php" >＞</a>
</MTArchiveNext>／
</span>
<?php $day = date(j); $year = date(Y); $month = date(m); ?>
<MTCalendar month="this"><MTCalendarIfEntries><?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = "today"; } else { $style = "notoday"; } ?><span class="<?php print "$style"; ?>"><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = "today"; } else { $style = "notoday"; } ?><span class="<?php print "$style"; ?>"><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></MTCalendar>
</div>
</body>
</html>


スタイルシートも用意する（calendar.css）

a,
a:link,
a:visited,
a:active {
color: #8FABBE;
background: none;
}
a:hover {
color: #006699;
background: underline;
}
.calendar {
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
}
.calendarHead {
color:#666666;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Arial, sans-serif;
padding-right: 5px;
}
.notoday {
margin-right:4px;
color:#666666;
font-size: 11px;
font-family: Verdana, Arial, sans-serif;
}
.today {
margin-right:4px;
color:#666666;
font-size: 11px;
font-family: Verdana, Arial, sans-serif;
border : 1px solid #999999;
}

カレンダーテンプレートを月別アーカイブに関連付け
管理メニューの「ウェブログの設定」クリック→次ページ右上「アーカイブの設定」クリック→次ページの「新しく、テンプレートとアーカイブを関連付ける。」欄で下記の設定にして「追加」をクリック。

次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「アーカイブファイルのテンプレート」に下記を設定。

<$MTArchiveDate format="calendar/%Y/%m/index.php"$>

カレンダーを入れる場所に以下を追加。

<div id="globalnavi">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="698" height="20" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>
<script type="text/javascript" language="javascript">
<!--
setAttributeByTagNameAndAttribute(1, 'iframe', 0, 'height', '27');
-->
</script>

スタイルシート（もともとあるやつ）に以下を追加

#globalnavi {
text-align: center;
padding-bottom: 5px;
border-bottom : 1px solid #666699;
}

修正したテンプレートの <head>～</head> の間に下記を追加

<script type="text/javascript" src="<$MTBlogURL$>util.js" charset="utf-8"></script>

あと、よくわからないスクリプトを適当な位置にアップロード（多分メインのあるあたりでよろしいかと・・・）
util.jsのダウンロード一番下の方にある。

はうっっ