カレンダーCSS（1）
- Category : blog > serene bach / 2006.07.24 Mon 00:38
- permalink
- comment:1 1153997951
- trackback:0
Serene Bach用のカレンダー用独自タグから吐き出されるタグと、クラス名などをメモ。
calendarブロックは、次の４パターンあります。
サイトのテンプレートやcss読み込んだりしてブログテンプレート作るとき、うっかり同じ名前のクラス名をつけちゃってると、なんでカレンダー崩れるの？？なんてことに…。Serene BachのCalendarのクラス名、ちょっとは頭に入れておかないと、そういうトラブルを招きかねません…（泣）
サンプル（境界線あり）/サンプル（境界線なし）
（ソース見たい方は参考にどうぞ。一部、サンプル用に直でstyle=""って打ち込んでますが、カスタマイズに関係ないのでスルーしてね。リンク色は適当につけてます。オンマウスでコメント出るようにしてますのでご参考までに。）
calendarブロックは、次の４パターンあります。
- {calendar} テーブル型のカレンダーを表示します。
- {calendar2} テーブル型のカレンダーを月表示と曜日と共に表示します。
- {calendar_horizontal} 横型のカレンダーを表示します。
- {calendar_vertical} 縦型のカレンダーを表示します。
サイトのテンプレートやcss読み込んだりしてブログテンプレート作るとき、うっかり同じ名前のクラス名をつけちゃってると、なんでカレンダー崩れるの？？なんてことに…。Serene BachのCalendarのクラス名、ちょっとは頭に入れておかないと、そういうトラブルを招きかねません…（泣）
{calendar}を使って、曜日は自由にカスタマイズしたい場合
- 曜日表記しない
- 日本語で曜日を表したい場合
- 日曜や土曜の表記の色を変えたい場合
サンプル（境界線あり）/サンプル（境界線なし）
（ソース見たい方は参考にどうぞ。一部、サンプル用に直でstyle=""って打ち込んでますが、カスタマイズに関係ないのでスルーしてね。リンク色は適当につけてます。オンマウスでコメント出るようにしてますのでご参考までに。）
▼タグ
<!-- BEGIN calendar -->
<table border="0" cellpadding="0" cellspacing="0" class="weekname">
<tr align="center">
<td class="sunday">日</td>
<td>月</td>
<td>火</td>
<td>水</td>
<td>木</td>
<td>金</td>
<td class="saturday">土</td>
</tr>
</table>
{calendar}
<!-- END calendar -->
▼境界線ありcss
/* Begin Calendar Area */
/* 曜日 */
table.weekname {
color: #999999;
font-family: Verdana, "ＭＳ ゴシック", "Osaka−等幅";
font-size: 10px;
width: 180px;
height: 20px;
/* 境界線 */
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
/* /境界線 */
}
table.weekname td {
/* 境界線 */
border-right: 1px solid #dddddd;
/* /境界線 */
}
/* 日曜日 */
table.weekname td.sunday {
color: #E697AE;
}
/* 土曜日 */
table.weekname td.saturday {
color: #9EBECB;
}
/* カレンダー */
table.calendar {
color: #999999;
font-family: Verdana, "ＭＳ ゴシック", "Osaka−等幅";
font-size: 10px;
width: 180px;
/* 境界線 */
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
/* /境界線 */
}
table.calendar td {
text-align: right;
padding: 3px;
/* 境界線 */
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
/* /境界線 */
}
/* 日付セル */
table.calendar td.cell {
}
/* 月移動セル */
table.calendar td div.calendar_month {
letter-spacing: 1px;
}
/* 今日の文字 */
span.today {
border-bottom: 1px dashed #9EBECB;
color: #9EBECB;
}
/* 月間リンク色 */
.calendar a {
font-weight: bold;
text-decoration: none;
}
.calendar a:link {
color: #9EBECB;
}
.calendar a:visited {
color: #79B39D;
}
.calendar a:hover {
color: #A3CC37;
}
/* 月移動リンク色 */
.calendar div.calendar_month a {
text-decoration: none;
}
.calendar div.calendar_month a:link,
.calendar div.calendar_month a:visited {
}
.calendar div.calendar_month a:hover {
}
/* /End Calendar Area */
境界線なしバージョンcss
/* Begin Calendar Area */
/* 曜日 */
table.weekname {
color: #999999;
font-family: Verdana, "ＭＳ ゴシック", "Osaka−等幅";
font-size: 10px;
width: 180px;
height: 20px;
}
table.weekname td {
text-align: right;
}
/* 日曜日 */
table.weekname td.sunday {
color: #E697AE;
}
/* 土曜日 */
table.weekname td.saturday {
color: #9EBECB;
}
/* カレンダー */
table.calendar {
color: #999999;
font-family: Verdana, "ＭＳ ゴシック", "Osaka−等幅";
font-size: 10px;
width: 180px;
}
table.calendar td {
text-align: right;
padding: 3px 0px;
}
/* 日付セル */
table.calendar td.cell {
}
/* 月移動セル */
table.calendar td div.calendar_month {
letter-spacing: 1px;
}
/* 今日の文字 */
span.today {
border-bottom: 1px dashed #9EBECB;
color: #9EBECB;
}
/* 月間リンク色 */
.calendar a {
font-weight: bold;
text-decoration: none;
}
.calendar a:link {
color: #9EBECB;
}
.calendar a:visited {
color: #79B39D;
}
.calendar a:hover {
color: #A3CC37;
}
/* 月移動リンク色 */
.calendar div.calendar_month a {
text-decoration: none;
}
.calendar div.calendar_month a:link,
.calendar div.calendar_month a:visited {
}
.calendar div.calendar_month a:hover {
}
/* /End Calendar Area */
次回は{calendar2} を使ったバージョンやってみます。
Comments