« | Home | »

2005.01.08

Movabletypeの横書きカレンダー

Movabletypeのカレンダーはデザイン上の意味はあっても、あまり利用価値はあるように思えません。
そこで、Netで調べたら横書きのカレンダーにしていらっしゃる方がおり、これなら、じゃまにならないで良い感じです。
しかし、オリジナルのものは単純に日にちの数字が横に並ぶだけで、月の初めでまだ記事を書き込んでいないときなどは、カレンダーの感じがしません。
せめて、日曜日ぐらいは色を付けたいと思い少し改造しました。

1.Main Indexの改造

横書きカレンダーの場合はBannerの下にくっ付けて表示するのが普通と思われますので、以下にbanner部分からの内容を書きます。

<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1">
<$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>
<div id="calendar" class="calendar-head">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#9cbe8c"
summary="カレンダー">
<tr>
<td align="right" width="70">
<div class="calendar-month"><b><$MTDate format="%Y  %B :"$>
</b></div></td>
<td>
<MTCalendar>
<span class="calendar-date">
<MTCalendarWeekHeader><font color=#FF0000>
</MTCalendarWeekHeader>
<MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>">
<$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$>
</MTCalendarIfNoEntries>
<MTCalendarWeekHeader></font>
</MTCalendarWeekHeader>
</span>
</MTCalendar>
</td>
</tr>
</table>
</div>

2. 次にStylesheetの変更です

#calendar {
padding-left: 50px;
background:  #9cbe8c;
}
.calendar-head {
font-family:"MS Pゴシック", "Osaka";
color:#FFF;
ont-size: small;
font-weight:bold;
padding-left:2px;
text-align:left;
}
.calendar-date {
font-family:"MS Pゴシック", "Osaka";
color:#FF0;
font-size:     small;
font-weight: normal;
background: #9cbe8c;
line-height:  100%;
padding-left: 2px;
text-align:    left;
}

コメント

コメントはありません

コメントフィードを購読する

コメント投稿





コメント本文に次の(X)HTMLタグを使えます:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)