開発 デザイン

【WordPress】Cocoonのカレンダーのデザインを変更する

Cocoonサイドバーのウィジェットのカレンダーをカスタマイズする方法です。
デフォルトでは以下のような表示になっています。
(黄色の日付が記事を投稿した日、オレンジの日付が当日の日付)

これを、以下のようなデザインにしていきます。

タイトル

.wp-calendar-table caption:beforeで下線の設定をしています。

完成図

土日だけ色を設定する

土曜日は左から数えて6番目のth要素にあたるのでnth-child(6)、日曜日は最後のth要素になるのでlast-childを使って色を指定します。

完成図

前月と翌月のページネーションをカスタマイズする

デザインは前月・翌月共通です。
.wp-calendar-navでボタンの配置、.wp-calendar-nav aで文字、背景色等を設定します。

完成図

-開発, デザイン

© 2021 Studio Yamimin Powered by AFFINGER5