【簡単】Googleカレンダーのサイト埋め込みとカスタマイズ方法を解説

「お客さんとイベント情報や営業日を共有したい」

「営業スケジュールをカレンダーで管理したい」

Googleカレンダーは、Googleが無料で提供しているスケジュール管理ツールです。

クラウド上に保存されており、Googleアカウントを持っている方とならどこでもスケジュールを共有できます。

またGoogleカレンダーはWEBサイトへ埋め込むこともでき、お店の営業日やスケジュール管理について非常におすすめです。

こちらの記事では、Googleカレンダーのサイトへの埋め込み方法からカスタマイズ、最新の予約機能の活用方法などについて画像を用いながら解説します。

是非最後まで読んでGoogleカレンダーを活用してみてください。

GoogleカレンダーをWEBサイトへ埋め込む方法

まずはGooleカレンダーをWEBサイトへ埋め込む方法を説明します。

Googleカレンダーを開く

最初にGoogleカレンダーを開き、画面左側【他のカレンダー】の右側にある【＋】マークをクリックし【新しいカレンダーを作成】を選択してください。

画像01

画像02

新しいカレンダーを作成に必要な情報を入力

【新しいカレンダーを作成】をクリックすると、入力箇所が表示されます。

それぞれ【名前】と【説明】の箇所に自身の目的に合った内容を入力し【カレンダーを作成】をクリックしてください。

今回は、店舗やイベント情報を管理するためのカレンダーとして【カレンダー１】という名前にしました。

【カレンダーを作成】をクリックしたら、【マイカレンダーの設定】の中に先ほど作成したカレンダーが追加されます。

埋め込みコードをWEBページに貼り付け

作成したカレンダーを選択し【設定と共有】をクリックします。

プルダウンの中の【予定のアクセス権限】をクリックし【一般公開して誰でも利用できるようにする】にチェックを入れます。

また右側の項目について【予定の表示(すべての予定の詳細)】を選択します。

次にプルダウンの中の【カレンダーの統合】を選択し【埋め込みコード】に移動してください。

埋め込みコードにあるHTMLコードをコピーし、自身が表示させたいWEBサイトに貼り付けて完了です。

WordpressにGoogleカレンダーを埋め込む方法

先ほどGoogleカレンダーからコピーしたHTMLコードについて、Wordpressへの埋め込み方法を紹介します。

貼り付けたい記事でカスタムHTMLを選択

貼り付けたい記事で、ブロックエディタの【＋】ボタンを押すと様々な効果が表示されるため、その中から【カスタムHTML】を選択してください。

GoogleカレンダーでコピーしたHTMLコードを貼り付け

【カスタムHTML】の中にGoogleカレンダーでコピーしたHTMLコードを貼り付けて完了です。

Googleカレンダーをスマホ対応(レスポンシブ対応)にする方法

Googleカレンダーの埋め込み機能は、直近のデザイン刷新（Material Design 3の適用）により、標準でレスポンシブ対応（スマホやPCの画面サイズに合わせた自動幅調整）が行われるようになりました。

そのため、新たに取得した埋め込みコードを使用する場合は、複雑なCSS設定を行わなくても自動的にスマホできれいに表示されます。もし現在埋め込んでいるカレンダーがスマホで見切れてしまう場合は、Googleカレンダーの設定画面から埋め込みコードを再取得して貼り替えることをおすすめします。

※以下は、意図的にサイズを固定したい場合や、旧デザインのままでレスポンシブ対応させたい場合の手動CSS設定方法です。

Wordpressに貼り付けたHTMLコードの前後に、以下のコードを入力して更新します。

【iframe・・】の前に、下記のコードを入力してください。

<div class="googleCalender">

＜/iframe＞の後ろには、こちらのコードを入力します。

</div>

Wordpressのホーム画面にて【外観】から【カスタマイズ】をクリックします。

カスタマイズ画面から【追加CSS】をクリックし、CSSコードを入力する場所を開きます。

以下のCSSコードを貼り付けて公開を押してください。

/*　Googleカレンダー（スマホ表示） */ .googleCalender iframe { width:100%; max-width:800px; height:400px; } /*　Googleカレンダー（PC表示） */ @media (min-width: 960px) { .googleCalender iframe { height:600px; } }

スマホ画面での表示を確認し、画面全体が表示されていたら完了です。

Googleカレンダーのカスタマイズ方法

次にGoogleカレンダーのカスタマイズについて説明します。

Googleカレンダーのカスタマイズにより表示内容や、サイズを変更することが可能です。（※アップデートによりモダンなデザインへとUIが改善されています）

まず、作成したカレンダーを選択し【設定と共有】を選択してください。

プルダウンのなかの【カレンダーの統合】を選択し【カスタマイズ】というボタンをクリックします。

カスタマイズを開くと、左側の項目で設定の変更が可能です。

変更できる設定は以下になります。

タイトルの表示or非表示
ナビゲーション表示or非表示
日付の表示or非表示
印刷アイコンボタン表示or非表示
メニューの表示or表示
タイムゾーン表示or非表示
枠線表示or非表示
幅・高さ
デフォルトのビュー
週の開始日
日本語
表示するカレンダー

表示

項目のチェックを外すことで、表示か非表示かを選ぶことが可能です。

例えば【印刷】のチェックを外すと、【印刷】ボタンが非表示になります。

幅・高さの調整

【幅】と【高さ】に数字を入力することで、カレンダーのサイズを調整できます。

プレビューで大きさを確認しながら、自分の理想のサイズに調整しましょう。

デフォルトのビュー

【週】【月】【スケジュール】という３つから表示形式を選ぶことができます。

週の開始日

週の開始日について【土曜日】【日曜日】【月曜日】から選択が可能です。

言語

複数の言語に対応していますが、特に必要なければ【日本語】のままで問題ありません。

タイムゾーン

言語と同じく複数の国に対応していますが、特に必要なければ【日本】のままで問題ありません。

Googleカレンダーがスマホで表示されない場合

iPhoneのサファリ(Safari)でGoogleカレンダーを表示すると、以下のような画面（「私はロボットではありません」などのループ）が表示される方がいます。

原因はiOSのバージョンアップによりサファリ(Safari)が【サイト越えトラッキングを防ぐ】という仕組みをオンに設定しているためです。

以前は、サイト訪問者にこのセキュリティ設定をオフにしてもらう案内が一般的でしたが、現在では推奨されていません。解決策としては以下の３つになります。

【推奨】カレンダーへの直接リンク（ボタン）を設置する

埋め込みカレンダーの下に「カレンダーが表示されない方はこちら」というテキストリンクやボタンを設置し、Googleカレンダーの公開URLへ直接誘導するのが最も確実で親切な運用回避策です。

別のブラウザを利用する

GoogleChromeなど別のブラウザで表示できる旨をサイト上に記載しておくことも有効です。

Googleカレンダーのアクセス権限を一般公開にする

作成したカレンダーを選択し【設定と共有】を選択します。

プルダウンのなかの【予定のアクセス権限】を選択し【カスタマイズ】というボタンをクリックします。

【予定のアクセス権限】の項目から【一般公開して誰でも利用できるようにする】にチェックを入れたら完了です。

【最新機能】「予約スケジュール」でWebから予約を受け付ける

単にカレンダーで予定や営業日を表示するだけでなく、Webサイト上でそのまま予約を受け付けたい場合は、Googleカレンダーの新しい「予約スケジュール（Appointment Schedules）」機能が非常に便利です。

従来の「予約枠」に代わって標準機能となったこの予約スケジュールでは、Googleアカウントを持たない外部ユーザーからの予約受付が可能になりました。また、Webサイトへ「予約ボタン（クリックでポップアップ表示）」や「インライン予約フォーム」として直接埋め込むこともできます。Stripe連携による決済やリマインダーメール送信もサポートされており、より高度な予約獲得に貢献します。

組織で利用する際の注意点：カレンダーの所有権

企業や店舗で「イベント用」や「営業日用」などの共有カレンダー（セカンダリカレンダー）を運用し、それをWebサイトに埋め込んでいる場合は注意が必要です。

Googleのデータライフサイクル仕様の変更により、カレンダーの作成者（オーナー）のアカウントが退職等で削除されると、そのユーザーが作成した共有カレンダーも自動的に削除され、Webサイト上から消滅してしまうリスクがあります。担当者が変わる場合は、アカウントを削除する前に、重要な埋め込みカレンダーの所有権を必ず別のアカウントへ譲渡（Transfer ownership）するようにしてください。

どんどんGoogleカレンダーを使用しよう

Googleカレンダーをウェブサイトに表示することで、簡単にスケジュールを確認したり、お客様と情報共有したりと様々な活用方法があります。

また、最新の予約スケジュール機能を活用すれば、日程調整から予約獲得までスムーズに行えるようになります。もし、さらに詳細なチーム間の日程調整や、自社の商習慣に合わせた高度なカスタマイズが必要になった場合は、より専門的な日程調整ツールの導入も検討してみてください。

今回の記事を参考にして、是非ウェブサイトを使いやすくしてください。