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