横型カレンダー (Normal版)｜Materializing [マテリアライジング]

サイドバーに表示させていたカレンダーを、横型タイプに変えてみました。
カレンダーって、何日にエントリー書いたのか一目で判別出来るので、その点で便利です。ほぼ自分用って感じなので、ジャマにならないようフッター部に置いてみました。

カレンダーコード

<div id="calendar_ob">
<MTIfArchiveTypeEnabled archive_type="Monthly">
<MTArchiveList archive_type="Monthly" lastn="1">
<a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/"$>" title="年別アーカイブへ"><$MTArchiveDate format="%Y"$></a>
</MTArchiveList>
</MTIfArchiveTypeEnabled>
/
<MTIfArchiveTypeEnabled archive_type="Monthly">
<MTArchiveList archive_type="Monthly" lastn="1">
<a href="<$MTArchiveLink$>" title="月別アーカイブへ"><$MTDate language="en" format="%m"$></a>
</MTArchiveList>
</MTIfArchiveTypeEnabled>
：
<MTCalendar>
<span<MTCalendarIfToday> id="calendar_ob_today"</MTCalendarIfToday>>
<MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" title="日別アーカイブへ"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
</span>
</MTCalendar>
</div>

CSS追加

/* Horizontal Calendar */
#calendar_ob {
	margin: 0px auto;
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	color: #BBBBBB;
	float: none;
	width: 100%;
	background: #555555;
	padding: 3px 0px;
	text-align: center;
}

#calendar_ob_today {
	border: 1px solid #FFFFFF;
	color: #FF9999;
	font-weight: bold;
}

#calendar_ob a:link { color: #99CCFF; }
#calendar_ob a:visited { color: #99CCFF; }
#calendar_ob a:active { color: #FF9999; background-color: #000000; }
#calendar_ob a:hover { color: #FF9999; background-color: #000000; position:relative; top:-3px; }

以上

横型カレンダー (Normal版)

カレンダーコード

CSS追加

カテゴリ

トラックバック(0)

About This Site