皆さま、こんにちは。
営業日や診療日、開館日などをWEBサイト上でテキストではなくカレンダーデザインで一覧表示させたいというニーズは根強くあります。やはり1ヶ月が一目でわかるカレンダーは皆に便利です。
WEBサイトでカレンダーを表示させたい場合、毎月のカレンダーをデザインツールやPowerPoint等で作り、画像にしてアップロードし、表示させる方法があります。画像はデザインを自由にできますが、デメリットは臨時休業など修正があると画像が作り直しになり、手間がかかることです。
コードやツールを活用してWEBサイト上に表示させると、画像を作る作業がなくなります。専門的な知識がなくてもカレンダーを作り、WEBサイトに表示させる方法は、主に以下の3つがあります。
- HTMLタグでカレンダーを作りコードを書き込む
- Googleカレンダーを表示させる
- WordPressのカレンダープラグインを使う
一つひとつ、手順とメリットデメリットをご紹介します。
１．HTMLタグでカレンダーを作りコードを書き込む
カレンダーはtableタグと色を割り振るclassの設定で作ることができます。
営業日と休業日で背景色を変えれば、1ヶ月を見通せるカレンダーが作れます。
WEB上に無料ツールがあり、年月を設定すると簡単にHTMLタグを生成できます。コピーし、表示させたい部分にペーストします。
▼［無料ツール］カレンダーテーブル用HTMLタグを生成する
https://www.jtm.gr.jp/tools/001-calendargenerate.html
書き出されるHTMLにclassもすでに設定されていて、年月が書かれたセルはcellTableHead、日曜日にはcellSunday、土曜日はcellSaturday、休日（祝日や休業日）はcellHolidayと、すでに割り振られています。
今WEBサイトで使っているスタイルシートにclassと各背景色を書き加えることで好きな色のカレンダーができます。class設定まで行われているのがこのツールの便利なところです。
■メリット
・非常に表示が速く軽いカレンダーができる
・サービスに依存せず、どんなWEBサイトでも表示できる
■デメリット
・HTMLとCSSの知識が少し必要
・現在のWEBサイトのHTML等を編集する権限が必要
・自動更新ではないため定期的に変更する必要がある
少し手間はかかりますが、サービスに依存しない軽いカレンダーを求める方におすすめです。
次はGoogleのカレンダーを書き出して表示させる方法です。
2．Googleカレンダーを表示させる
今回紹介する3つの中で最も多くのWEBサイトで使われていると思われるのが、Googleカレンダーの活用です。
簡単に仕組みをご説明すると、Googleアカウントを作るとGoogleカレンダー機能が使えるようになりますので、Googleカレンダーに自由に予定を書き込み後、そのカレンダーをWEB上で表示させます。
①Googleアカウントで（お持ちでなければ作成）、Googleカレンダーへログイン
祝日はデフォルトで準備されているので表示できます。非表示にしたいときは左サイドバーのチェックを外します。
カレンダーに適宜予定を書き込んでいきます。日付部分をクリックすると予定が書き込める画面が開きます。タイトル部分がカレンダーに表示されるので、伝わりやすいよう【臨時休業】【店休日】【休診日】等書き込みます。
繰り返し機能もあります。例えば、毎週木曜日が定休日なら”繰り返し設定”すると次月以降も自動更新されます。
②歯車マーク＞設定＞カレンダー選択 タイトルなど初期設定を実施
共有は、カレンダー上部にある歯車マークから設定ページへ移動します。
アカウントに紐付いたカレンダーがたくさんあると左サイドバーに並んで出てきますので、その中からWEBサイトに共有したいカレンダーを選択します。
共有したいカレンダーを選択すると、様々な設定が出てくるため、以下の変更を実施します。
- タイトルを適したものへ変更
- カレンダーの内容説明を書き込み
- “一般公開して誰でも利用できるようにする”にチェック
その後、画面下にある【埋め込みコード】をコピーします。表示やサイズを確認するには【カスタマイズ】からできます。
③サイズ、表示調整
プレビューが表示されるため、目で確認しながら表示を調整できます。
調整が終わったら埋め込みコードをコピーし、WEBサイトの表示したいところへ貼り付けます。
■メリット
・複数人が予定を書き込んでも1つのカレンダーにまとめられる
・高機能なカレンダーを無料で使える
■デメリット
・Googleアカウントが必要
・現在のWEBサイトのHTMLもしくはウィジェット等を編集する権限が必要
・デザイン性は特に優れていない
Googleカレンダーと一目でわかるデザインのため、慣れている人は見やすいですが、少し無機質な雰囲気になってしまいます。WEBデザインから浮いてしまうかもしれないのが懸念点です。
それでも、これだけ高機能なカレンダーが無料で使えることはありがたいと思います。コードもコピーするだけなのでかなり設定は簡単といえます。迷ったらGoogleカレンダーを選択するとよいと思います。
3．WordPressのカレンダープラグインを使う
WordPressでWEBサイトを構築しているのであればプラグインも利用できます。今回はカレンダープラグイン【XO Event Calendar】を使ったカレンダー表示方法をご紹介します。
https://ja.wordpress.org/plugins/xo-event-calendar/
■無料、日本語対応
2024年4月現在、バージョンも更新されていて利用数も多いプラグインです。日本製で、WordPressの投稿機能を使って表示を追加するスタイルです。
①プラグイン【XO Event Calendar】をインストール、有効化
②左サイドバーから設定する
左サイドバーに【イベント】項目が追加されます。
定期的な休みは”休日設定”で行い、臨時休業などは”新規イベントを追加”から項目追加します。本来イベントカレンダーなので、店舗で実施される企画やキャンペーン、特別な日の紹介などもブログのように書き込みしやすいのが特徴です。
WordPressのウィジェットでサイドバーやフッターに表示を追加できます。カレンダー自体のデザインを触るのはクリックで簡単にとはいきませんが、項目を追加して表示させるのは簡単です。
■メリット
・シンプルなカレンダーをウィジェットで表示できる
・開発者のサポートも丁寧に行われている
・投稿との連動も可能で
■デメリット
・WordPressで構築されたWEBサイトでのみ利用可能
・祝日を自動表示できないため毎年手動入力（入力の仕方は解説あり）する必要がある
イベントが多いお店、カレンダーをしっかり活用したい企業にはおすすめのプラグインです。
まとめ
WEBサイト上にカレンダーがあると、来店型の店舗やクリニックでは、カレンダーを確認するためにWEBサイトへ訪問者が何度も訪れる傾向があります。リピート訪問の動機とするためにもカレンダーの表示は有効だと考えます。WEBサイトは繰り返し見てもらう習慣を持ってもらうことで知らせたい情報が伝えられ、WEBサイトの力を発揮できると考えます。
今回の記事では専門的な知識を持っていなくてもできるだけカレンダーを表示できる方法をお伝えしましたが、デザインをWEBサイトに合わせたいなど調整が複雑になるときは制作会社さんやデザイナーさん、コーディング担当者さんなどに対応をお願いするとスムーズだと思います。