◆カレンダーのカスタマイズ

こんにちは、カスタマイズと復興支援で頑張るたっくんです。

今日は、カレンダーをカスタマイズしてみました。

殺風景なカレンダーも、工夫次第でだいぶ見栄えがよくなりますね。

変更前

変更後

CSS編集

以下のCSSを追加してみてください。

注：新CSS編集デザイン用のカスタマイズです。

/*カレンダーのカスタマイズ*/
.calendar td a{
color:#ffffff;/*記事のある日の文字色*/
background-color:#3eb370;/*記事のある日の背景色*/
display:block;
}
.calendar{
color:#333333;/*カレンダーの文字色*/
}
.calendar caption{
color:#333333;/*月の文字色*/
}
/*カレンダー曜日の文字背景色*/
.calendar .sun{/*日曜日*/
color:#ffffff;/*文字色*/
background-color:#ff0000;/*背景色*/
}
.calendar .mon{/*月曜日*/
color:#ffffff;/*文字色*/
background-color:#999999;/*背景色*/
}
.calendar .tue{/*火曜日*/
color:#ffffff;/*文字色*/
background-color:#999999;/*背景色*/
}
.calendar .wed{/*水曜日*/
color:#ffffff;/*文字色*/
background-color:#999999;/*背景色*/
}
.calendar .thu{/*木曜日*/
color:#ffffff;/*文字色*/
background-color:#999999;/*背景色*/
}
.calendar .fri{/*金曜日*/
color:#ffffff;/*文字色*/
background-color:#999999;/*背景色*/
}
.calendar .sat{/*土曜日*/
color:#ffffff;/*文字色*/
background-color:#0000ff;/*背景色*/
}

色は、適宜変更してください。

いつもお世話になっています。

今回は、こちらの記事を参考にしました。

ありがとうございます。

あなたも、ぜひ参考にしてみてください。

⇒カレンダー　記事のある日にアイコン （実験委員さん）

⇒カレンダー　曜日の加工 （実験委員さん）

⇒カレンダーを上手に使ってみよう。[新デザイン用] （kiyoさん）

@takumi_heigenをフォロー

---