px*blog  > blog > serene bach
よく使うファイル名 | main | ソーシャルブックマーク

カレンダーCSS（1）

Serene Bach用のカレンダー用独自タグから吐き出されるタグと、クラス名などをメモ。

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

compare auto insurance quote | 2011/07/17 10:14 AM
Hi, i think that i noticed you visited my weblog thus i came to �go back the favor�.I'm trying to find issues to enhance my web site!I assume its good enough to use a few of your concepts!!
<a href=http://transferinitiated.info/less-costly-auto-insurance-rates-might-be-acquired-with-a-auto-insurance-estimates-assessment/>compare auto insurance quotes</a>
<a href=http://cheeryviewpoint.com/you-now-can-view-car-insurance-quotations-online/>auto insurance quotes comparison</a>
<a href=http://darkencater.com/precisely-why-you-may-need-to-accomplish-automobile-insurance-quotes-comparison/>compare auto insurance quote</a>
credit report score | 2011/07/08 04:50 PM
I liked your post about px*blog | カレンダーCSS（1）. Your website is very informative. Thank you for all your hard work.
Irratstirus | 2011/03/18 09:29 PM
nealmayborn|I love Emma, sorry Lili . . .鏤�

<a href="http://securedrugstock.org/?p=167">zithromax pill shape</a>

thplousaqq
はむ | 2006/07/27 07:59 PM
さっぱり分からんけどなんかすごいねこのブログ。

Post


ご利用のブラウザ、設定ではご利用になれません。

Trackbacks

Trackback URL：
Permalink URL：
Search this site
Categories

pagetop