ヒヨコ君増殖中テンプレート

横型カレンダー挿入の手引き

テンプレートのバージョンはできるだけ最新の物をご使用ください。

■ 横型カレンダーHTMLの挿入

まず初めに横型カレンダー用のHTMLを記述します。

<!-- ▼横型カレンダー -->

<div id="calender2">

<ul>

<li><a href="<%prev_month_link>"><%prev_year>年<%prev_month>月</a></li>

<li>≪</li>

<!--calender2-->

<li><%days> </li>

<!--/calender2-->

<li>≫</li>

<li><a href="<%next_month_link>"><%next_year>年<%next_month>月</a></li>

</ul>

</div>

<!-- ▲横型カレンダー END -->

挿入場所は直下です。

■ 横型カレンダーCSSの挿入

/* ----------------横型カレンダー設定 */

#calender2 {
	background-color: #E3E3E3; /* 背景色 */
	color: #f7f7f7;
	text-align: center;
	font-size: 10px;
	padding-bottom: 8px;
	padding-top: 8px;
}

#calender2 ul {
	margin: 0px;
	padding: 0px;
}

#calender2 li {
	display: inline;
	padding: 0px 0px 0px 0px;
}

/* 通常時リンクカラー */
#calender2 a:link {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}
/* 訪問済みリンクカラー */
#calender2 a:visited {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}
/* マウスを上に重ねた時リンクカラー */
#calender2 a:hover {
	color: #FF9900;
}
/* クリックした時リンクカラー */
#calender2 a:active {
	color: #FFCC00;
}

挿入場所はスタイルシート内ならどこでも構いませんが、とりあえずカスタマイズしやすいように上部にコピペすると良いでしょう。。いろいろな色に変更してみて自分のテンプレートに見合うデザインにしてください。

以上で横型カレンダー挿入完了です