Google カレンダーの埋め込み対応について

皆さんはGoogle カレンダーの埋め込み機能を使ったことはありますか？

今回こちらの記事では、カレンダーの埋め込み方法や、デザイン、トラブルシューティングなどについて詳しくお伝えします。ぜひ参考にしてみてください。

Google カレンダーをサイト（ホームページ）へ埋め込み

Google カレンダーは上記のように、ご自身で管理しているホームページやブログにタグを埋め込むことで、簡単に表示することができます。

大元のGoogle カレンダーを更新すると、その内容も反映してくれるので非常に便利です。

お店の営業カレンダーや、何らかのチームなどでのスケジュール共有などに用いられることが多いようです。

HTMLで埋め込み

では具体的にどのようにすれば埋め込みができるのか、その方法を解説します。

埋め込みたいカレンダーの「その他」アイコンをクリックします。

「設定と共有」を選択します。

①埋め込みコードをクリックして、②右クリックし、③「コピー」を選択します。

コピーした埋め込みコードを、ホームページやブログに貼りつけることで、こちらの画面のようにGoogle カレンダーが表示されます。

レスポンシブ対応か？

上記の操作で埋め込みを行っただけの場合は、レスポンシブ対応にはなりません。

取得した埋め込みコードを以下で紹介するタグで囲った上で、CSSにスタイルを追加することでレスポンシブ対応になります。

HTML

<div class="calendar-content">
  Google カレンダーからコピーした埋め込みコード
</div>

CSS

.calendar-content iframe {
  width: 100%;
}

スマホ表示されない場合

スマホでうまく表示されない場合は、スマホのブラウザに残るキャッシュが影響してうまく表示されていないという可能性があります。

ブラウザのキャッシュを削除する方法は以下の通りです。

「設定」を選択します。

「Safari」を選択します。

下にスクロールしていき、「詳細」を選択します。

「Webサイトデータ」をタップします。

埋め込みを行ったサイトを右にスライドします。※ここでは「google.co.jp」を右にスライドします。

「削除」ボタンをタップします。これでキャッシュの削除は完了です。再度、Google カレンダーを埋め込んだサイトを開いて確認してみてください。

WordPressで埋め込み

世界的に有名なCMS（コンテンツ・マネジメント・システム）であるWordPressでも、Google カレンダーの埋め込みは可能です。

WordPressの投稿入力画面で、①上記で紹介した埋め込みコードを貼りつけ、②「公開」ボタンをクリックします。これでWordPressで管理しているサイトへの埋め込みが完了します。

予定リストの埋め込み

Google カレンダーの予定リストを埋め込むことも可能です。

上記で紹介した、埋め込みコードを取得する手順通りに途中まで進めますが、こちらの画面の「カスタマイズ」ボタンをクリックします。

「デフォルトのビュー」タブをクリックします。

「予定リスト」を選択します。

この状態で表示される「埋め込みコード」をコピーすると、予定リストがデフォルトで表示された状態のGoogle カレンダーを埋め込むことができます。

埋め込み支援ツールを利用する

Google カレンダーの埋め込み支援ツールとは、これまでにも登場している、設定画面から「カスタマイズ」ボタンをクリックしたときに表示されるこちら画面です。

上記にて紹介した、予定リストをデフォルト表示にする変更や、カレンダーの背景色の設定など、埋め込みカレンダーの細かな変更を行うことができます。

デザインのカスタマイズに関しては、本記事の下部にて詳しく解説していますのでぜひ参考にしてみてください。

Google カレンダーの埋め込みサンプル

Google カレンダーを埋め込むと上記のように表示されます。

表示内容は簡単にカスタマイズすることができるので、下記の内容を読み進めて、ご自身に合う表示を見つけてみてください。

Google カレンダーの埋め込みをカスタマイズする

上記にて紹介した通り、Google カレンダーは埋め込み支援ツールを使用することで簡単に表示をカスタマイズできます。

デザインから、デフォルトの表示設定などの機能的な面まで、意外と細かい設定が可能です。

チェックをつけたり外したり、タブから選択したりと、感覚的な操作でカスタマイズができるので、PC操作が苦手という方もすぐに慣れます。

デザインをカスタマイズ

デザインの面では、「背景色の変更」「枠線の有無の変更」「表示内容の変更」が可能です。

それぞれ、赤枠内を操作することにより、横に表示されているプレビューに適用されます。

納得のいくデザインが出来上がったら、その時点での埋め込みコードをコピーして、サイトに貼りつけましょう。

色分け

埋め込みを行ったカレンダーの、スケジュールごとの色分けに関しては以下の記事にて詳しく解説しています。

大元のカレンダーで色を変更しただけでは反映されないので、別途操作が必要です。

少々ややこしい操作なので、スクリーンショットとテキストを読みながらゆっくりと進めてみてください。

Google カレンダーの色分け方法について

パラメータを変更する

Google カレンダーの埋め込みコードは、パラメータを変更することによって細かなカスタマイズが可能です。

しかし、現在では埋め込み支援ツールが実装されているので、パラメータを意識するよりもツールを使用したほうが手早くできますし、ミスも少ないです。

パラメータでカスタマイズしたいという方は、以下に一覧を用意していますで参考にしてみてください。

Facebookページに埋め込み

FacebookページへのGoogle カレンダーの埋め込みは、以前は外部提供のアプリを利用することで可能でしたが、現在は不可能となっています。

そのため、Facebookページを使ったスケジュールの共有については、Facebookページの「イベント」機能を使って周知するのをおすすめします。

Facebookページの画面右上、「メニュー」アイコン内の「イベント」から設定を進めてみてください。