WordPressの「カレンダーウィジェット」をカスタマイズするための備忘録

ブログはカレンダーがあった方が何となく落ち着きがよいので「カレンダーウィジェット」を導入しているのですが、使用しているテーマによってはそのままではデザイン的に合わない場合がほとんどだと思います。

特に目立つのが「幅」が合わないことでしょう。

カラムの幅に合わせて、ついでに枠も表示させて、曜日に色を付けて、と自分なりにCSSを少しいじってみました。

備忘録代わりに載せておきます。

カスタマイズしたカレンダーウィジェットのCSS

元のCSSは

★カレンダーウィジェットに枠をつけるCSSカスタマイズ方法

に載っているものを利用させてもらいました。感謝！

枠を付けるのが前提であれば、

ピンク色の部分を好みのサイズや色に変更するだけでOKです。

カレンダーに関するCSSが指定されていないテーマでは、下記のCSSを丸ごとコピーして、テーマ（あるいは、子テーマ）の「style.css」に貼り付けてください。

カレンダーに関するCSSが指定されているテーマでは、追記したい部分だけをコピーして、貼り付けてください。

（WordPressの使用歴は長いですが、カスタマイズに関しては初心者ですので、自己責任でお願いいたします。）

/*****************************
*カレンダーに枠と曜日の色を付ける
*****************************/
#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;
width: 300px;
margin-left: 0px;
}
#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;
}

”子”テーマが推奨の理由

テーマの制作者が子テーマを用意してくれている場合は、子テーマを導入して、諸々のカスタマイズは子テーマ上で行うのが推奨されます。

理由は、親テーマ上でカスタマイズしている場合、テーマのアップデートをすると、それまでのカスタマイズがデフォルトに戻ってしまうからです。

私は、これまで子テーマを持つテーマを利用したことがなかったので、子テーマに慣れていなくて今までの調子でカスタマイズをやってしまいました。

初めからカスタマイズをやり直すのも時間がかかるので、今のところは子テーマを導入していませんが、時間の余裕ができたときにやり直そうかなと思っています。

子テーマの持つ意味を理解していなかったために、導入が遅れた失敗談でした。

Are you happy with this information?

いいね！とクリックして下さると励みになります。m(._.)m