カレンダーのデザイン(1)

カレンダーのデザインはCSSで指定されています。
今日は、そのCSSを読み解いてみます。

私もCSSをきちんと理解してない初心者ですが、頑張って頭を使ってみました。(`・ω・´)っ


ページデザインごとに違うので、一例としてテンプレート「light pole」のCSSを見てみます。

j090625-1.gif


これが「light pole」のカレンダーのデザイン。
シンプルで見やすいから、私のお気に入り♪

私の好みはおいといて(笑)。
カレンダーに関する部分は8項目ありますね。
似たような名前で混乱しそうですが、1つずつ落ち着いて見てみましょう。
(と自分に言い聞かせてます^^;)

では、まず、CSSの中のカレンダーに関する部分は次のところ。

#calendar {
margin-top:0px;
margin-bottom:30px;
font-size:12px;
padding:5px;
border:1px solid #C6C6C6;
width:228px;

}
#calendar table {
width:100%;
background-color:#F2F2F2;
}
#calendar th {
background-color:#E1E1E1;
border-right:2px solid #F2F2F2;
font-weight:bold;
}
.calendarhead {
padding:4px 0px 4px 0px;
font-weight:bold;
font-size:12px;
font-family:Verdana;
background-color:#F2F2F2;
color:#5D5D5D;
}
.calendarhead a{
color:#5D5D5D;
}
.calendarhead .calendarday{
color:#5D5D5D;
}

.calendarday {
padding:3px;
margin-bottom:10px;
color:#5D5D5D;
font-size:10px;
font-family:Verdana;
}
.calendarday a {
font-weight:bold;
}



「#って一体何なのっ?」という話は、ちゃんと解説されているサイト・ブログがたくさんありますので、そういうところを読んでいただいて(笑)。
「idセレクタ」で検索すると、いっぱいヒットしますよー。

j090625-2.gif


#calendar ⇒ カレンダー全体(年月タイトル+カレンダー)
margin-top:0px;
margin-bottom:30px;
font-size:12px;
padding:5px;
border:1px solid #C6C6C6;
width:228px;

カレンダーの外枠(border:1px solid #C6C6C6)や枠線の内側の余白(padding:5px)がここで指定されています。
ページのHTMLを見ると、
<div id="calendar">
<table>カレンダーの部分</table>
</div>

ってことになってます。


#calendar table
 ⇒ 曜日+日付の部分

カレンダーは表でできてます。

#calendar th ⇒ 曜日

テーブルのthの部分が曜日になってます。
テーブルとかthのタグが何の話かわかるよって前提で話を進めちゃいます。わからなかったら、他のサイト・ブログをご参照ください。用語を一つひとつ解説してると話が大きくなりすぎちゃうので、本筋がなんだかわからなくなっちゃうから…ってことでご理解ください。

j090625-3.gif


背景色が#E1E1E1です。
ヘッダーの写真に合わせてここの色を変えるといい感じになるのでは♪


.calendarhead ⇒ タイトル(年月)部分
.calendarhead a ⇒ その部分のリンク

<< 2009年06月 >>」というところです。
本文のリンク色は地の分とは違う色にしますけど、カレンダーのタイトル(年月)はいつでもリンクが貼られているわけだし、タイトルでもあるので、色が違うとヘンな感じがしますね。
だから、リンクなしの文字と同じ色で指定して、
.calendarhead a{color:#5D5D5D;}
になってるんじゃないですかね。


.calendarday  ⇒ 曜日+日付
.calendarday a ⇒ その部分のリンク

「カレンダーの日付だけ文字サイズが小さいのはちょっと…」と思う私みたいなヒトは、ここの「font-size:10px;」をいじればOK。
「light pole」では、リンク(記事を書いた日にち)は太字になる指定になっています。テンプレートによっては標準のままです。
標準のままにしたいときは、
.calendarday a {font-weight:normal;}
にします。
テンプレートが標準だけど太字にしたい場合は
.calendarday a {font-weight:bold;}
にします。

なお、今日現在使っているテンプレートでは、

j090625-4.gif


.calendarday a {
font-weight: bold;
border-bottom: 2px solid #6180a3;
}
となっています。
下線が2pxあると見やすいと思いませんか?

それから、日付にカーソルを合わせると、文字が反転するようになっていて、
.calendarday a:hover {
color: #fff;
background: #6180a3;
}
という指定がしてあります。



参考までに。
カレンダー部分のHTMLの構造はこんな感じになってます。
<div id="calendar">
<table>
<caption class="calendarhead"><span class="calendarday"><a>2009年06月</a></span></caption>
<tr>
<th class="calendarday">月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
<th>日</th>
</tr>
<tr class="calendarday">日付…第1週</tr>
<tr class="calendarday">日付…第2週</tr>
<tr class="calendarday">日付…第3週</tr>
<tr class="calendarday">日付…第4週</tr>
</table>
</div>

tdに1日ずつ入れてね。




この記事へのコメントが 0 件あります


この記事へのトラックバック