カレンダーに月別で絵を載せる

  • このエントリーをはてなブックマークに追加
2008年5月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

カレンダーっぽくカレンダーの上に月ごとにかわる絵を載せてみようかなーとおもいまして、Movable TypeとCSSでうまくやる方法です。


カレンダーを一覧で見れるページをせいさくしてみました。

<table class="calendar July" id="date-2008-07" summary="Calendar" cellpadding="0" cellspacing="0">

このように、月の英語のclassと何年の何月のidをそれぞれのカレンダーのtableに指定しありますので、それぞれ月別にcssで画像を指定してげれば、うまく月別に絵がきりかわっていくカレンダーの出来上がりというわけです。

table.calendar {
	padding-top: 100px;
	background-image: url(../img/calendar.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

table.January {
	background-image: url(../img/January.gif);
}

table.February {
	background-image: url(../img/February.gif);
}

table.February {
	background-image: url(../img/March.gif);
}

table.April {
	background-image: url(../img/April.gif);
}

table.May {
	background-image: url(../img/May.gif);
}

table.June {
	background-image: url(../img/June.gif);
}

table.July {
	background-image: url(../img/July.gif);
}

table.August {
	background-image: url(../img/August.gif);
}

table.September {
	background-image: url(../img/September.gif);
}

table.October {
	background-image: url(../img/October.gif);
}

table.November {
	background-image: url(../img/November.gif);
}

table.December {
	background-image: url(../img/December.gif);
}

tableの上にpaddingをとり、画像をclass別に読み込めば完成です。

この年のこのつきだけは特別にしたい!という場合はIDをつかったら簡単にできます!

table#date-2008-07 {
	background-image: url(../img/date-2008-07.gif);
}

という具合です。

Mobale Type タグ

<MTArchiveList archive_type="Monthly">
	<table class="calendar <$MTArchiveDate format="%B" language="en"$>" id="date-<$MTArchiveDate format="%Y-%m"$$>" cellpadding="0" cellspacing="0" summary="Calendar"$>
	<caption><a href="<$MTArchiveLink$>" title="<$MTArchiveDate format="%B %Y"$>"><$MTArchiveDate format="%B %Y"$></a></caption>
		<tr>
			<th class="sunday">日</th>
			<th>月</th>
			<th>火</th>
			<th>水</th>
			<th>木</th>
			<th>金</th>
			<th class="saturday">土</th>
		</tr><MTCalendar month="this"><MTCalendarWeekHeader>
		<tr></MTCalendarWeekHeader>
			<td<MTCalendarIfToday>class="today"</MTCalendarIfToday>><MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></td><MTCalendarWeekFooter>
		</tr></MTCalendarWeekFooter></MTCalendar>
	</table>
</MTArchiveList>

IEだとうまく絵が表示されませんでした・・。tableのpaddingがきいてないらしいです。何かうまい方法あるかな・・。

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/20

このページの先頭へ戻る