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

カレンダーのデザイン(1)
の続きです。

カレンダーの日付エリアの背景は画像にすることもできます。
というわけで、今日は、テンプレート「突撃!合戦スタジアム」のカレンダーを改造してみます。


↑こんなデザインです



↑背景画像

この画像、何なんでしょう? 血のり?(-_-;)

き…気分を取り直して、CSSのカレンダーに関わるの次の部分いきましょう。
#calendar {
font-size:12px;
width:190px;
margin:0px;
padding-bottom:10px;
}
#calendar table {
background-image:url(http://blog.seesaa.jp/img/bg/battle_stadium/cal_bg.jpg);
background-repeat:no-repeat;
background-position:0px 0;
width:100%;
padding:0px 0;
margin:0 auto;
}
#calendar th {
padding:3px;
font-weight:normal;
text-align:center;
}
.calendarday a {
font-weight:normal;
color:#F27045;
}
.calendarhead{
background-image:url(http://blog.seesaa.jp/img/bg/battle_stadium/side_title.gif);
background-repeat:no-repeat;
background-position:top left;
padding:7px 0px 9px 0px;
font-weight:bold;
font-size:12px;
font-family:"MS P明朝";
color:#CCCCCC;
margin-bottom:5px;
}

.calendarhead a{
color:#CCCCCC;
}
.calendarhead .calendarday a{
color:#CCCCCC;
}
.calendarhead .calendarday{
color:#CCCCCC;
}

.calendarday {
padding:4px;
font-size:10px;
font-family:Verdana;
color:#ccc;
text-align:center;
}


「突撃!合戦スタジアム」を選んだのは、デフォルトでカレンダー背景に画像が使われていて分かりやすからったから。初心者はこうして改造しながら覚えていくものですわ(笑)。

カレンダーの背景は、
#calendar table {
background-image:url(http://blog.seesaa.jp/img/bg/battle_stadium/cal_bg.jpg);
background-repeat:no-repeat;
background-position:0px 0;
width:100%;
padding:0px 0;
margin:0 auto;
}
の部分。urlが入ってるから、見つけやすいですね!

ついでなので、calendarhead(年月)部分の背景も変えちゃいましょう。

デフォルトの色合いは黒板みたいな色なので、あえてまったく違うのにしてみました。
ここのところ蒸し暑いから、涼しげな画像にしました。(*^ー゜)ノ
Angelic(きゃのさん)のWeb素材を元に、若干加工させていただいたものです。


↑タイトル(年月)部分の背景画像



↑カレンダー本体の背景画像


新しく用意した背景画像の色が薄いので、それにあった文字色に変える必要がありますね。だって、文字色が#CCCCCCですよ? こんな色ですよ、こんな色。
文字の色を青(#F27045)にして、曜日(#calendar th)と日付のリンクを太字(font-weight:bold)にしました。リンク色は金魚と合いそうなので、そのままです。

#calendar table {
background-image:url(http://**自分でアップしたURL**);
background-repeat:no-repeat;
background-position:0px 0;
width:100%;
padding:0px 0;
margin:0 auto;
}
#calendar th {
padding:3px;
font-weight:bold;
text-align:center;
}
.calendarday a {
font-weight:bold;
color:#F27045;
}
.calendarhead{
background-image:url(http://**自分でアップしたURL**);
background-repeat:no-repeat;
background-position:top left;
padding:7px 0px 9px 0px;
font-weight:bold;
font-size:12px;
font-family:"MS P明朝";
color:#4A81B4;
margin-bottom:5px;
}

.calendarhead a{
color:#4A81B4;
}
.calendarhead .calendarday a{
color:#4A81B4;
}
.calendarhead .calendarday{
color:#4A81B4;
}

変更箇所は太字部分



こうなりました!
全然違う雰囲気になりましたよね♪
うーん、金魚が文字を邪魔してしまいましたか。月末に更新しないなら平気かなぁ(笑)。

この図柄なら、本当はページの背景色は白がいいんでしょうねー。
こんな感じで。↓



カレンダーもブログデザインの要素の一つ。
楽しく装飾して、センスアップできますように♪

br_banner_frog.gif



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


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