【WordPress】プラグイン「Event Organiser」のスマホのレイアウト変更

2025年2月24日

【WordPress】プラグイン「Event Organiser」のスマホでのレイアウト変更

今回はプラグイン「Event Organiser」を左の標準レウアウトから右のレイアウトに変更します。

DEMO PAGE

プラグイン「Event Organiser」を追加

プラグインの追加からイベントカレンダー設置までは下記のページをご覧下さい。

SWELL-SIGNALDESIGN

【WordPress】プラグイン「Event Organiser」でシンプルなイベントカレンダーを設置 | SWELL-SIGNALDESIGN 今回はWordPressのカレンダープラグイン「Event Organiser」を使用して、デザインはシンプルに、カレンダーにはイベント名のみで詳細ページへはリンクしない、簡易的なカレ…

ショートコードを追加

左に「＜」・右に「＞」・真ん中に「年月」・「今日」を非表示

[eo_fullcalendar titleformatmonth="Y年n月" headerLeft="prev" headerCenter="title" headerRight="next"]

CSSを “style.css” に追加

外観＞テーマファイルエディタ＞style.cssに下記の内容を追加

@media screen and (max-width: 600px) {

/*年月と月送り*/
.fc-toolbar {
    margin-bottom:1em !important;
}
.fc-toolbar .fc-left {
    float:left !important;
}
.fc-toolbar .fc-right {
    float:right !important;
}
.fc-toolbar .fc-center {
    display:inline-block !important;
}

/*日付と曜日*/
.fc-day-number {
display: flex !important;
justify-content: flex-end;
padding: 0px 0px 0px 0px !important;
border-bottom: none !important;
}
.eo-fullcalendar .fc-day-number.fc-past, .eo-fullcalendar .fc-day-number.fc-future {
padding: 5px 15px 5px 0px !important; /*日付と曜日の上下左右余白*/
width: 140px !important; /*日付と曜日の横幅*/
text-align:right !important; /*日付と曜日右寄せ*/
}
.fc-list-header-right {
order: 1 !important;
font-size:14px; /*文字サイズ*/
}
.fc-list-header-right::after {
content: '日'; /*日付の数字横に追加*/
}
.fc-list-header-left {
order: 2 !important;
font-size:14px; /*文字サイズ*/
}
.fc-event-container::before {
padding: 0px 0px 0px 0px !important;
}

/*当日の日付と曜日*/
.fc-day-number.fc-today {
display: flex !important;
justify-content: flex-end;
padding: 0px 0px 0px 0px !important;
border-bottom:none !important;
}
.eo-fullcalendar .fc-day-number.fc-past, .eo-fullcalendar .fc-day-number.fc-future, .eo-fullcalendar .fc-day-number.fc-today {
padding: 5px 15px 5px 0px !important;
width: 140px !important;
text-align:right !important;
}
.fc-widget-content .fc-today {
border-top: 1px solid #ccc !important;
}

/*日付曜日とイベント名*/
.fc table {
table-layout: auto !important;
}
.fc-content-skeleton {
display:table !important;
}
.fc-content-skeleton thead {
float: left !important;
}
.fc-content-skeleton tbody {
float: right !important;
}

}

今回は、プラグイン「Event Organiser」のスマホのレイアウトを変更する方法でした。

動作確認： Mac mini M2 – Safari iPad Air 4 – Safari iPhone 12 – Safari