G Tips

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

  • Release

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

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

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

埋め込みの完了

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

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

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

HTMLで埋め込み

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

作業時間:3分

埋め込みカレンダーの選択
アイコンをタップ

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

項目を選択
設定と共有をクリック

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

埋め込みコードを取得
設定画面の操作

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

埋め込みコードを貼りつけ
埋め込みの完了

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

レスポンシブ対応か?

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

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

HTML
<div class="calendar-content">
  Google カレンダーからコピーした埋め込みコード
</div>
CSS
.calendar-content iframe {
  width: 100%;
}

スマホ表示されない場合

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

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

設定を選択

「設定」を選択します。

safariを選択

「Safari」を選択します。

詳細を選択

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

ウェブサイトデータを選択

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

Googleを選択

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

削除ボタンをタップ

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

WordPressで埋め込み

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

WordPress画面

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

予定リストの埋め込み

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

カスタマイズをクリック

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

タブをクリック

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

予定リストを選択

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

コピーする

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

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

埋め込み支援ツール

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

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

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

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

埋め込みの完了

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

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

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

埋め込み支援ツール

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

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

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

デザインをカスタマイズ

カスタマイズ済みのカレンダー

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

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

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

色分け

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

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

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

パラメータを変更する

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

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

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

実行結果
showTabs=0タイトルが表示
showTitle=1タイトルが非表示
showTabs=0表示切替タブが非表示
showTabs=1表示切替タブが表示
showPrint=0印刷ボタンが非表示
showPrint=1印刷ボタンが表示
showDate=0表示期間を非表示
showDate=1表示期間を表示
showNav=0前の期間、今日、後の期間への移動ボタンが非表示
showNav=1前の期間、今日、後の期間への移動ボタンが表示
hl=jaカレンダーの表示言語を日本語にする
hl=enカレンダーの表示言語を英語にする
src=ja.japanese%23holiday%40group.v.calendar.google.com日本の祝日を表示する

Facebookページに埋め込み

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

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

Facebookページの操作

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

Page Top