WordPressのカレンダーに枠をつけるCSSカスタマイズ

WordPressのカレンダーはレスポンシブ対応とかは必要ないはずなのでカスタマイズしたカレンダーはスマホでもOK!のはずが原型のままだったので、取り合えず曜日(1~7)設定を、(1)を日曜日と(7)を土曜日だけに指定する修正をして「カスタマイズのスマホ画面」で確認、無事にカスタマイズしたカレンダー表示になった。

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

子テーマの追加CSS又は、スタイルシートに追加

/***カレンダーに枠CSS***/
#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: 260px;
    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 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 {
    background-color: #F5D0D3;
}

カレンダーに関しては解決ができたが、しかし、ログインしないと曜日の切り替えができないのはなぜなのか?、原因はTwentySeventeenテーマ自身にあるようだ。

TOP

Copyrighted Image