Googleカレンダーを色分けしてホームページに表示する

Home » 診療時間・医院情報 » Googleカレンダーを色分けしてホームページに表示する

Googleカレンダーで管理している予定（休診日・午前のみ診療・代診の日など）を、予定の種類ごとに色を分けてホームページに表示する方法をご紹介します。

「Googleカレンダー上で予定に色を付けても、ホームページでは1色になってしまう…」という場合は、この記事の手順で設定してください。

目次

はじめに：色分けのしくみ

ホームページに表示したGoogleカレンダーでは、色は「予定」ごとではなく「カレンダー」ごとに決まります。予定を1つずつ色変えしても、ホームページ上には反映されません。

たとえば「休診」と「午前のみ診療」と「代診」を色分けしたいなら、カレンダーを3つ作ります。

色はカレンダーごとに決まる：休診・午前のみ診療・代診のカレンダーを重ねて表示したイメージ

準備：どのGoogleアカウントで作るか決めておく

できれば、クリニック専用のGoogleアカウントを作って使うことをおすすめします。

  • 院長先生の個人の予定が、誤ってホームページに表示されるのを防げる
  • スタッフの方に予定の入力をお願いするときも、個人用アカウントのパスワードを共有しなくて済む
  • 院長の交代など、担当が変わったときにも引き継ぎがしやすい

院長先生の個人アカウントで作る場合は、次の点に気をつけてください。

  • 手順1で新しく作ったカレンダーだけをホームページに表示してください。
  • 手順4の「表示するカレンダー」で、個人用のカレンダーのチェックを必ず外してください。

準備：どの予定を何色にするか決めておく

作業を始める前に、表示したい予定の種類と色を決めておくとスムーズです。
例えば下記のようなイメージです。

カレンダー名（例） 入れる予定 色の例
休診 臨時休診、学会・研修による休診 赤
午前のみ診療 午後休診の日 オレンジ
代診 院長不在・代診医が担当する日 青
予防接種・健診 予防接種外来、健診の実施日 緑

1. 予定の種類ごとにカレンダーを作る

パソコンでGoogleカレンダーを開き、左側の「他のカレンダー」の横にある「＋」を押して「新しいカレンダーを作成」を選びます。

「名前」に準備で決めたカレンダー名（例：休診）を入力し、「カレンダーを作成」を押します。

カレンダーの作成が終わったら、左上の矢印からカレンダー画面に戻ります。

色分けしたい種類の数だけ、この作業を繰り返します。

2. カレンダーを一般公開する

画面左側に表示されている、作成したカレンダー名にマウスを合わせて「︙」→「設定と共有」を開きます。

「予定のアクセス権限」の「一般公開して誰でも利用できるようにする」にチェックを入れ、「予定の詳細の表示」を選択します。

作ったカレンダーすべてで、この設定を行ってください。1つでも公開し忘れると、そのカレンダーの予定だけ表示されません。

※一般公開したカレンダーの予定は、誰でも見られる状態になります（予定の追加・編集・削除はできません）。患者さんのお名前など、公開してはいけない情報は入力しないでください。

3. 予定を登録する

予定を作成するときに、どのカレンダーに入れるかを選びます。
たとえば臨時休診なら「休診」カレンダーを選びます。

※この画面で色を指定してもホームページ上では反映されません。

4. 表示するカレンダーと色を設定する

いずれか1つのカレンダー名にマウスを合わせて「︙」→「設定と共有」を開き、「カレンダーの統合」の中にある「カスタマイズ」を押します。

左下の「表示するカレンダー」でホームページに表示したいカレンダーすべてにチェックを入れます。
※個人用のカレンダーなど、表示したくないものはチェックを外してください。

各カレンダー名にマウスを合わせて「︙」をクリックし、それぞれの色を指定します。
画面右側のプレビューで、色分けされて表示されているか確認できます。

ここで選んだ色が、ホームページ上の予定の色になります。

5. 埋め込みコードをコピーする

全ての設定が終わったら、画面上部にある「埋め込みコード」の横にあるコピーボタンをクリックします。

6. 埋め込みコードをショートコードとして登録する

埋め込みコードはショートコードとして登録してからページに設置すると、ページ編集の際に誤ってコードが崩れるのを防げます。

ホームページの編集管理画面の左メニューから「共通コード・ショートコード」を押し、「新規作成」を押します。

タイトルに管理しやすい名前（例：Googleカレンダー）を入力し、「スクリプト」欄に手順5でコピーした埋め込みコードを貼り付けて、「公開」を押します。

公開すると、タイトルの下に [wv_script id='〇〇〇〇〇〇'] のようなショートコードが表示されます。これを括弧も含めてコピーします。

7. ページにショートコードを貼り付ける

カレンダーを表示したいページの編集画面を開き、表示したい位置に手順6でコピーしたショートコードを貼り付けて、「更新」（または「公開」）を押します。

※この時ショートコードを中央寄せにするとカレンダーも中央に配置できます。

ページを開き、カレンダーが色分けされて表示されていれば完了です。

予定を追加・変更するときは

ホームページ側の作業は不要です。Googleカレンダーで予定を追加・変更すれば、ホームページの表示にも自動で反映されます（反映まで少し時間がかかることがあります）。

新しい種類のカレンダーを追加したときや、色を変えたいときは、手順4〜5をやり直し、手順6で登録したショートコードの「スクリプト」欄の中身を新しい埋め込みコードに差し替えてください。ページに貼ったショートコードはそのままで大丈夫です。

うまく表示されないときは

予定がすべて同じ色になる

  • 予定がすべて同じカレンダーに入っていないか確認してください。予定ごとに付けた色は、ホームページには反映されません。
  • 手順4の「表示するカレンダー」で、色を分けたいカレンダーにすべてチェックが入っているか確認してください。

一部の予定が表示されない

  • そのカレンダーが一般公開されているか確認してください（手順2）。
  • 手順4で、そのカレンダーにチェックが入っているか確認してください。チェックを入れ直した場合は、新しい埋め込みコードに差し替えが必要です。

時間がずれて表示される

  • 手順4の画面でタイムゾーンが日本標準時になっているか確認してください。

補足：休診日の表示だけでよい場合

休診日・診療日の表示だけが目的であれば、Googleカレンダーを使わずに、サイトに用意されている「休診日カレンダー」でも設定できます。

休診日カレンダーの設定についてはこちらをご覧ください。