前回、 ●今さら普通のカレンダー設置。 というエントリーの通り、横型カレンダーを設置してレイアウトが崩れてしまったのでコソコソはずしてしまったんす(苦笑)。じゃあ、レイアウトが崩れないように縦置きすりゃ良いじゃん、ということで縦置きしてみますた。

やり方は簡単。

カレンダーを入れる場所を確保するため、真ん中のメインコンテンツ部分をちょいと(35px)右へずらしスペースをあけ、そこにテーブルレイアウトでカレンダーを突っ込んでいます。

ソースは下記。


<table width="100%" class="calendar" cellpadding="2" summary="カレンダー">
<tr>
<td class="calendar-head"><$MTDate format="%B"$>月</td>
</tr>
<MTCalendar>
<tr>
<td class="calendar-day" <MTCalendarIfToday>style="border : 1px solid #8FABBE;"</MTCalendarIfToday>>
<MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</td>
</MTCalendar>
</tr>
</table>


カレンダー位置のスタイルシート周りは以下。

/* カレンダー全体 */
.calendar {
 background: #F5F5F5;
 border : 1px solid #8FABBE;
 position : absolute ;
 left : 185px;
 top : 96px;
 width : 15px;
}