WP-Calendarのカスタマイズ

WP内臓のカレンダーがださいので、Sense of Wonderと言う所で公開している情報を元にカスタマイズした。

これなら使っても良いね。
style.cssにcssのタグを貼り付けるだけで変更出来るのが便利このうえない。

ちょっと公開しているタグを変更したので変更点をhighlightしておく。
サイドバー目一杯表示してセンタリングしただけ。

/*****************************
*カレンダーに枠を付ける
*****************************/
#wp-calendar {
border-collapse: collapse;
border-top-width: 1px;
border-right-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-top-color: #999;
border-right-color: #999;
margin: 0 auto;
width: 100%;
}
#wp-calendar thead tr th {
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #999;
border-left-color: #999;
}

/*土曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(7){
background-color: #C0DDF9;
}

/*日曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(1){
background-color: #F5D0D3;
}

/*月曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(2){
background-color: #FFFEDB;
}

/*火曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(3){
background-color: #FFFEDB;
}

/*水曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(4){
background-color: #FFFEDB;
}

/*木曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(5){
background-color: #FFFEDB;
}

/*金曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(6){
background-color: #FFFEDB;
}

#wp-calendar td {
text-align: center;
padding: 0px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #999;
border-left-color: #999;

}
#wp-calendar caption {
font-weight: bold;
text-align: left;
}
#wp-calendar tbody tr #today {
font-weight: bold;
background-color: #FFE5FF;
}

全然知らなかったのだが、WP同士だとリンクすると自動的にコメントしてたんだな。

後は、土日祝に色がついたらと思ったらプラグインがあった
休日表示付きリアルタイムカレンダー for WordPress

 

コメント