更新日: 2022 / 08 / 10

超簡単!Googleカレンダーを埋め込む方法を4ステップで解説

カテゴリー: コーディング

スケジュールや予定の管理ができるGoogleカレンダーをホームページやブログに埋め込む方法を紹介します。

Googleカレンダーは自分で使うだけでなく、誰かと共有したりWebサイトに載せることで多くの人と予定を共有できます。

埋め込み方法は簡単なので、スケジュールを表示したい場合にすぐに設置できます。

  1. Googleカレンダーの埋め込む手順

    1. 1.Googleカレンダーにアクセスして設定画面を開く
    2. 2.埋め込むカレンダーを選択
    3. 3.埋め込みコードをコピー
    4. 4.コードをWebサイトに設置
  2. Googleカレンダーのデザインをカスタマイズするには?

  3. Googleカレンダーがうまく埋め込めない時は?

    1. Googleカレンダーの埋め込みコードがない
    2. 埋め込んだGoogleカレンダーが表示されない
  4. まとめ

Googleカレンダーの埋め込む手順

GoogleカレンダーをWebサイトやブログに埋め込むには次の手順で作業を行います。

  1. Googleカレンダーにアクセスして設定画面を開く
  2. 埋め込むカレンダーを選択
  3. 埋め込みコードをコピー
  4. コードをWebサイトに設置

それぞれ具体的に解説します。

1.Googleカレンダーにアクセスして設定画面を開く

まずはパソコンでGoogleカレンダーにアクセスして、右上にある歯車アイコンから「設定」を選択します。

Googleカレンダーの埋め込む手順 1.Googleカレンダーにアクセスして設定画面を開く

2.埋め込むカレンダーを選択

設定をクリックするとカレンダー全体の設定画面に移動します。左側にあるメニューから埋め込みたいカレンダーを選択します。

Googleカレンダーの埋め込む手順 2.埋め込むカレンダーを選択

3.埋め込みコードをコピー

カレンダーをクリックすると、選択したカレンダーの設定画面に移動します。

このページの「予定のアクセス権限」のところで「一般公開して誰でも利用できるようにする」にチェックを入れます。

Googleカレンダーの埋め込む手順 3.埋め込みコードをコピー1

チェックできたらページの下の方にある「カレンダーの統合」のところにある「埋め込みコード」をクリックしてコピーします。

Googleカレンダーの埋め込む手順 3.埋め込みコードをコピー2

4.コードをWebサイトに設置

コードをコピーできたらWebサイトの設置したい場所にペーストして完了です。

<iframe src="https://calendar.google.com/calendar/embed?src=examplegmail.com&ctz=Asia" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Googleカレンダーのデザインをカスタマイズするには?

埋め込みたいGoogleカレンダーのデザインをカスタマイズすることもできます。

デザインを変更するには、先ほどのカレンダーの設定ページで埋め込みコードの下にある「カスタマイズ」ボタンを押します。

ボタンを押すとカレンダーのデザインや表示内容をカスタマイズできるページに移動します。

Googleカレンダーのデザインをカスタマイズするには?

表示のところで不要なものを非表示にしたり、週の開始日を月曜日に変更したり、背景色を変更することができます。

Googleカレンダーがうまく埋め込めない時は?

Googleカレンダーが埋め込めない場合や表示されない場合は以下ことを確認してください。

Googleカレンダーの埋め込みコードがない

埋め込みに必要なコードはパソコンでのみ取得できます。カレンダーアプリでは埋め込みコードを生成できないので注意してください。

埋め込んだGoogleカレンダーが表示されない

Googleカレンダーが表示されない場合は、コードがちゃんと埋め込めているか、Googleカレンダーが一般公開設定にされているかを確認してください。

まとめ

Googleカレンダーはいろんな場面に無料で使えてすごく便利。イベントの予定や予約状況などの告知用に使われることが多いです。

埋め込みする際はある程度デザインの変更や表示内容の変更が可能なので必要な部分だけに絞ったシンプルな表示もできます。