今回は、ホームページにお店の定休日を発信するのに便利な定休日カレンダーを実装する方法を解説します。
カレンダーを表示することで、テキストで表示するよりも一目で定休日が分かるようになります。
お店のホームページを運営されていて定休日の案内を分かりやすくしたい方は、ぜひ参考にしてみてください。
ホームページに定休日カレンダーを実装する3つの方法
ホームページに定休日カレンダーを実装する方法は3つあります。
- 方法①：HTMLでホームページにカレンダーを実装する方法
- 方法②：Googleカレンダーを使ってホームページにカレンダーを実装する方法
- 方法③：WordPressのプラグインを使ってホームページにカレンダーを実装する方法
それぞれのメリット・デメリットは、以下の通りです。
| メリット | デメリット | |
|---|---|---|
| 方法① | ◯自由にデザインをカスタマイズできる | △コードの知識が必要 △月毎に手動でカレンダーを更新する必要がある（実装次第では回避可能。） |
| 方法② | ◯コードの知識がなくても実装できる ◯Googleカレンダー上で予定を更新するだけで、サイトにも反映される | △ デザインの自由度が低い |
| 方法③ | ◯コードの知識がなくても実装できる | △将来的に仕様変更や利用停止の影響を受ける可能性がある △表示内容やデザインのカスタマイズ性は、使用するプラグインに依存する |
以下で具体的なやり方を解説します。
HTMLでホームページにカレンダーを実装する方法
まずはHTMLでホームページにカレンダーを実装する方法です。
コードの知識がある方であれば、HTMLでカレンダーを実装することで、自由なデザインのカレンダーを実装できます。
一方、月が変わるたびにカレンダーを手動で更新する必要がある点には注意が必要です。
以下に、カレンダーを実装するためのサンプルコードを紹介していますので、ご自身のホームページのデザインに合わせて、スタイルを調整しながら活用してみてください。
See the Pen HTMLカレンダー by E-VALUE WORKS (@evw) on CodePen.
Googleカレンダーを使ってホームページにカレンダーを実装する方法
続いて、Googleカレンダーを使ってホームページにカレンダーを実装する方法です。
カレンダーの中に、その日の予約状況や開催予定イベントといった情報を表示させたい場合は、Googleカレンダーを埋め込む方法が便利です。
STEP. 1：新規カレンダーの作成
「他のカレンダーを追加」をクリックします。
「新しいカレンダーを作成」をクリックします。
カレンダーのタイトルや説明文、タイムゾーンを指定して「カレンダーを作成」をクリックします。
以上で、新しいGoogleカレンダーが追加されました。
STEP. 2：予約状況、イベント情報の登録
次に、新しく追加されたカレンダーに予約状況やイベント情報など、ユーザーに見せたい情報を追加しましょう。
まずは、新しく追加したカレンダー以外の予定は非表示にしておきます。
Googleカレンダーに新しい予定を追加する場合は、画面左上の「作成」をクリックします。
「予定」をクリックします。
タイトルや時間、場所や説明文を記載して「保存」をクリックします。
この際、作成した予定が、新しく作成したカレンダーと正しく紐付いているかを確認します。
以上で、Googleカレンダーに予定を追加できました。
STEP. 3：カレンダーの公開設定
続いて、カレンダーの公開設定を行いましょう。
カレンダー名の右側に表示されている縦三点メニュー（︙）をクリックします。
「設定と共有」をクリックします。
画面を下に少しスクロールすると「予定のアクセス権限」と書かれた箇所があるので、こちらで「一般公開して誰でも利用できるようにする」にチェックを入れます。
「OK」をクリックします。
これでGoogleカレンダーを一般公開できるようになりました。
なお、一般公開する内容も設定できます。ここでは「予定の表示（すべての予定の詳細）」にチェックを入れておきます。
STEP. 4：カレンダー埋め込みコードの取得
最後に、カレンダーの埋め込みコードを取得しましょう。
カレンダー名の右側に表示されている縦三点メニュー（︙）をクリックします。
「設定と共有」をクリックします。
画面を下の方にスクロールすると「埋め込みコード」があるので、こちらをコピーします。
あとは表示させたい場所でコードをペーストすればOKです。
Googleカレンダーの横幅や高さなど簡単なデザインのカスタマイズを行いたい場合は、埋め込みコード下の「カスタマイズ」から行えます。
参考：Googleカレンダーのレスポンシブ対応
親要素の横幅に合わせて縦横比率を保ったまま埋め込んだカレンダーが拡大・縮小されるようにしたい場合は、埋め込みコードを<div class=”responsive-calendar”></div>で囲いCSSを追記します。
<div class="responsive-calendar">
<!-- Googleカレンダー埋め込みコード -->
</div>.responsive-calendar iframe {
width: 100%;
height: 100%;
aspect-ratio: 4/3;
}これで、aspect-ratio: 4/3としているので、縦横比率4対3を保ったまま、拡大・縮小されるようになります。
WordPressのプラグインを使ってホームページにカレンダーを実装する方法
最後に、WordPressのプラグインを使ってホームページにカレンダーを実装する方法です。
プラグインの場合、将来的に仕様変更や利用停止の影響を受ける可能性があるものの、WordPressの管理画面から簡単操作で導入できるのがメリットです。
2025年12月時点で、定休日を表示させるのにおすすめのプラグインは「XO Event Calendar」です。
XO Event Calendarは、シンプル・簡単操作で休みやイベントなどの行事の2種類の予定を登録することができます。
実際の使い方は割愛しますが興味がある方は、「XO Event Calendar 使い方」などで調べてみて下さい。
WordPressで定休日の表示だけでなく、時間帯予約や宿泊予約までできるカレンダーをお探しの方は、「Booking Package」がおすすめです。
Booking Packageを使った宿泊予約カレンダーの作成方法は以下の記事で解説しているので、ご興味がある方はこちらもあわせてご覧ください。
（関連記事）WordPressの予約システム「Booking Package」の使い方・宿泊施設向け予約カレンダーを作成する方法
まとめ
今回はホームページに定休日カレンダーを実装する方法を解説しました。
お店のホームページを運営されていて定休日の案内を分かりやすくしたい方は、ぜひ本記事を参考にカレンダーを実装してみてください
今回は以上になります。最後までご覧頂き、ありがとうございました。
