Q.イベントカレンダーで「定休日」とは別に背景色を変更したい日があります。
当記事ではイベントカレンダーの以下の変更方法をご紹介しています。
・特定の日の背景色・文字色の変更
・「定休日」の背景色・文字色の変更
GAIAを検討されている方へイベントカレンダー機能について詳しく知りたい方は以下の記事をご覧ください。
サイト内にカレンダーを表示できるWordPressテーマ「GAIA」。イベント情報を管理できるカレンダーを美しいデザインで再現できるのがGAIAの最も大きな特徴です。高い操作性で、イベント紹介ページとの連携もスムーズになっています。
A.下記の方法でご対応ください。
〇を任意のカラーコードに変更して、TCDテーマ＞基本設定＞カスタムCSSに入力してください。
・特定の日付の背景色や文字色を変更する
.p-calender--202309 .p-calender__body-item--20,
.p-calender--202309 .p-calender--sp__body-item--day-20 {
background-color: 〇; /* 背景色 */
color: 〇; /* 文字色 */ }
「202309」「20」の部分でそれぞれ「年月」と「日付」を指定できます。上記の記述は2023年9月20日のマスの背景色と文字色を変更しています。
・定休日の背景色や文字色を変更する
.p-calender__body-item-type--holiday,
.p-calender--sp__body-item--holiday {
background-color: 〇; /* 背景色 */
color: 〇; /* 文字色 */ }
デフォルトの背景色は、TCDテーマ＞基本設定＞カラーの「サブカラー」を透過率20%にした色が適用されます。サイト内全体の統一感を持たせるための仕様です。
関連記事「当日」「過去の日付」「未来の日付」に対して日付のマスを装飾する方法を紹介しています。
2024.01.26
TCDテーマGAIA：イベントカレンダーの「当日」マスの背景色・文字色を変更する方法
Q.カレンダーを表示させたときに、「当日」のマスを目立たせることは可能でしょうか？ GAIAのイベントカレンダーでは、「当日」のほか「過去」「未来」のクラスが各日のマスに割り振られているので、背景色・文字色・枠線といった内容の装飾が可能です。 関連記事以下の記事では、「定休日」と「特定の日付...
この記事は役に立ちましたか？
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます！