◆アメブロカスタマイズ カレンダーをカスタマイズ

こんばんわ！

0円アメブロカスタマイズのペカルマンです。

←応援して下さい。

あなたの1クリックで

間食が減ります（ぇ

よろしくお願いします。

さきほどブログ巡りしてたら

とても素敵なカスタマイズを紹介されているブログ

見つけました。

わざメーバ＠アメブロカスタマイズさんのこの記事 です。

カレンダーの表示を変えるというものです。

僕のカレンダーの場合

変更前がコチラ

カレンダーの上に画像貼っているのは別のCSSです＾＾；

で、変更後がコチラ↓　　↓　　↓

どうですか？見やすくって、いい感じでしょ？

こんな素敵なCSSを紹介された、わざメーバさん

尊敬しちゃうなぁ。

以下をCSSの最後に貼り付けてくださいね。

CSSの最後ってどこよ？って方はコチラ

貼り付けるのはこれの下の行からですよ＾＾；

/* サイドバーのカレンダーをカスタマイズする方法 */
#calendar table{ /* カレンダー */
width:148px;
margin-left:auto;
margin-right:auto;
border-collapse:collapse;
}
#calendar caption{ /* 月表示部 */
font-size:16px;
font-weight:bold;
}
#calendar th{ /* 曜日表示部 */
height:14px;
width:20px;
padding:0;
font-weight:normal;
background-color:#EAEAEA;
border:1px solid #999999;
}
#calendar .sun{ /* 日曜日の曜日表示 */
color:#FF0000;
}
#calendar .sat{ /* 土曜日の曜日表示 */
color:#0000CC;
}
#calendar td{ /* 日表示部 */
height:20px;
width:20px;
padding:0;
color:#999999;
background-color:#FFFFFF;
border:1px solid #999999;
}
#calendar td a{ /* 日付ページへのリンク */
display:block;
padding-top:2px;
height:18px;
width:20px;
font-size:12.5px;
font-weight:normal;
text-decoration:none;
background-color:#E0E0FF;
}
#calendar td a:hover{ /* オンマウス時 */
text-decoration:underline;
background-color:#FFFFCC;
}

赤字のカラーコードを変えると日付の背景

上の僕のブログでいう、薄い青色部分の色を変更できます。

水色のカラーコードを変えるとオンマウス時の

背景色を変更できますよ。　お好みで＾＾

最後までお読みいただき有難うございました。

0円アメブロカスタマイズのペカルマンでした。