「Event Organiser」はWordPressのプラグインで、複数のイベント管理やイベント詳細ページの作成に適しています。
デザインの拡張が高い点、そしてワードプレス内ですべて完結できる点が魅力的です。また、カテゴリごとに色分けすることができ、複数のイベントの作成が可能になっています。
プラグインのインストール
「Event Organiser」で検索し、プラグインをダウンロードしてインストールします。
ショートコードを固定ページ等に張り付けて使用します。下記は現在使用しているショートコードです。
eo_fullcalendar titleformatmonth="Y年 n月" responsivebreakpoint="0"カレンダーのデザインを変更する
既存の表示方法の日付表示は、文字が右端に寄っていますが、見ずらいと感じたので中央に位置してみました。
また、土曜日と日曜日の文字色を、それぞれ青と赤に変更してみました。
具体的にはCSSの調整するだけでOKです。カスタマイズ例のCSSを以下に示しました。
変更前
変更後
CSSの記述例
記述場所はどこでもOKですが、テーマアップグレードの影響を受けない子テーマに記述するのが良いと思います。
/*日曜日の色を変える*/
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table thead
.fc-sun {
color: #ff0000;text-align: center;
}
/*土曜日の色を変える*/
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table thead
.fc-sat{color: #0000ff;text-align: center;}
/*月曜日の文字を中央に*/
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table thead
.fc-mon{text-align: center;}
/***火***/
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table thead
.fc-tue{text-align: center;}
/***水***/
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table thead
.fc-wed{text-align: center;}
/***木***/
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table thead
.fc-thu{text-align: center;}
/***金***/
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table thead
.fc-fri{text-align: center;}
コメント