July 31, 2004
月送りカレンダー
カレンダーなんかいらないっと取っ払っちゃってましたが、mavericyard*さんのところに設置方法が説明されていた「月送りカレンダー」はちょっと便利かもってわけで設置してみました。
なぜだか、カレンダーの下にあなぼこが開いちゃいましたが、まぁ、ご愛嬌ということで。。。
ついでに、アーカイブにスクロールもつけました。
こちらは、PIROBLOGさんのところの説明を参考にさせて頂きました。
mavericyard*さん、PIROBLOGさんに感謝です。
==追記==
カレンダーの下のあなぼこは解決しました。
カレンダーのスタイルシートの設定がおかしかっただけでした。。。
設置方法を一応、ここにもメモしとこっと。。
【月送りカレンダー】 by mavericyard*さん
1 : カレンダーフォルダを作成
・ まずは カレンダーファイルを保存するフォルダを作ります。
・ archive ディレクトリに calendar という名前のフォルダを作ってください。
2 : カレンダーのスタイルシートテンプレートを作成
・ [テンプレートの編集] で新しいインデックステンプレートを作ります。
・ テンプレートの名前 style-calendar , 出力ファイル名 calendar.css , テンプレートの中身は下記。
・ カレンダーのレイアウトはここで変えます。
@charset "EUC-JP";/*
##########################################
月送りカレンダー用スタイルシート
##########################################
*//* ページ本体---------- */
body {
background: #FFFFFF;
margin: 0px;
}
/* 見出し---------- */
h1,h2,h3 {
margin: 0px;
padding-right: 0px;
ｐａｄｄｉｎｇ-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
}
/* 【カレンダー全体】---------- */
#links {
width: 198px;
float: center;
background: #FFFFFF;
border-color: #000000;
border-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
/* リンク文字---------- */
#links A {
text-decoration: none;
color: #777777;
}
#links A:hover {
color : #AAAAAA;
}
/* 日付書体---------- */
.calendar {
font-family: verdana,"Times New Roman", arial,Osaka,sans-serif;
font-size: 9px;
color: #000000;
font-weight: normal;
background: #FFFFFF;
border-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/* 月の書体---------- */
.calendarhead {
font-family: verdana,"Times New Roman", arial,Osaka,sans-serif;
font-size: 11px;
color: #000000;
font-weight: bold;
text-decoration: none;
/* background: #FFFFFF;---*/
padding-top: 10px;
/* padding-right: 0px;---*/
padding-bottom: 5px;
/* padding-left: 0px;---*/
}
/*ここから下の (.sidetitle) と (.side) は styles-site.css と同じにした方がいいかも*/
/* ヘッダー帯と書体---------- */
.sidetitle {
font-family: georgia,verdana,"Times New Roman",arial,Osaka,sans-serif;
font-size: 10px;
color: #CCCCCC;
font-weight: normal;
letter-spacing: 0.1em;
text-align: center;
background: #555555;
border-color: #777777;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
margin-top: 2px;
margin-right: 5px;
margin-bottom: 2px;
margin-left: 5px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 2px;
}
/* サブコンテンツ---書体---------- */
.side {
font-family: "MS UI Gothic","ＭＳ Ｐゴシック",Osaka,verdana,sans-serif;
font-size: 12px;
color: #666666;
font-weight: normal;
letter-spacing: 0em;
/* text-align: center;---*/
line-height: 145%;
/* background: #FFFFFF;---*/
/* border-color: #FFFFFF;---*/
/* border-style: solid;---*/
/* border-top-width: 1px;---*/
/* border-right-width: 1px;---*/
/* border-bottom-width: 1px;---*/
/* border-left-width: 1px;---*/
margin-top: 3px;
margin-right: 6px;
margin-bottom: 3px;
margin-left: 6px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
3 : カレンダーのアーカイブテンプレートを作成
・ [テンプレートの編集] で新しいアーカイブテンプレートを作ります。
・ テンプレートの名前 Calendar , テンプレートの中身 ↓
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" /><title><$MTBlogName$></title>
<link rel="stylesheet" href="<$MTBlogURL$>calendar.css" type="text/css" /><MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense></head>
<body ><div id="links">
<div align="center" class="calendar">
<table border="0" cellspacing="4" cellpadding="0" margin="0" summary="Monthly calendar with links to each day's posts">
<caption class="calendarhead">
<MTArchivePrevious>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.php">〈 </a>
</MTArchivePrevious><$MTArchiveDate format="%B %Y"$>
<MTArchiveNext>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.php"> 〉</a>
</MTArchiveNext>
</caption><tr height="20">
<th abbr="Sunday" align="center"><span class="calendar">Sun</span></th>
<th abbr="Monday" align="center"><span class="calendar">Mon</span></th>
<th abbr="Tuesday" align="center"><span class="calendar">Tue</span></th>
<th abbr="Wednesday" align="center"><span class="calendar">Wen</span></th>
<th abbr="Thursday" align="center"><span class="calendar">Thu</span></th>
<th abbr="Friday" align="center"><span class="calendar">Fri</span></th>
<th abbr="Saturday" align="center"><span class="calendar">Sat</span></th>
</tr><MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center"><span class="calendar">
<MTCalendarIfEntries><MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" title="[<$MTEntryTitle$>]" target="_top">
<$MTCalendarDay$></a>
</MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</span></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar></table>
</div>
</div>
</body>
</html>
4 : 関連付け
・ [ブログの設定/アーカイブの設定] で新しくテンプレートを追加します。
・ 新しく追加ボタンを押して、アーカイブの種類を Monthly , テンプレートを Calendar にします。
・ 保存すると Monthlyアーカイブの所に Calendar テンプレートが追加されます。
その右の アーカイブファイルのテンプレート に次のように記入します。
(ラヂオボタンは Date-Based Archive のままにして置きましょう)
<$MTArchiveDate format="calendar/%Y/%m/index.php"$>
5 : カレンダーの設置
・ [テンプレートの編集] で Main Index の任意の場所に次のコードを挿入します。
・ 元のカレンダーは消す前にコメントアウトしておきます。
<div align="center" class="side">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="180" height="160"scrolling="NO" frameborder="0" marginwidth="0" marginheight="0"></iframe>
</div>
【スクロールバー】 by PIROBLOGさん
スクロールバーをつけるのは簡単です。
<div style="overflow: auto; height: 400px;">
BlogPeople コード
</div>
このようにすると「height」で確保した高さを超えたとき自動的にスクロールバーが表示されます。また、このテクニックは BlogPeople 以外の普通の内容でも使えます。