メインコンテンツにスキップ

Googleカレンダーを埋め込む

Embedボックスを利用して、GoogleカレンダーをWebページに埋め込む方法をご紹介します。Googleカレンダーをサイトに埋め込むと、スケジュールをサイト訪問者に共有できます。

今週アップデートされました

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

(1) Googleカレンダーのコードを取得する

注意: カレンダーは、共有相手に設定した相手にしか表示されません。カレンダーをすべてのサイト訪問者に表示するには、カレンダーの公開範囲を変更します。詳しくは、一般公開の Google カレンダーを作成、管理する方法をご覧ください。

  1. パソコンで Google カレンダーを開きます。埋め込みコードはパソコンでのみ取得できます。Google カレンダー アプリでは取得できません。

  2. [設定] をクリックします。

  3. 画面左側で、埋め込むカレンダーの名前をクリックします。

  4. [カレンダーの統合] をクリックします。

  5. [埋め込みコード] で [カスタマイズ] をクリックします。

  6. カレンダーの表示オプションを選択します。
    ・幅と高さがそれぞれ 500 以上のディメンションを選択します。
    ・[ナビゲーション ボタン] をオフにすると、ユーザーはキーボード ショートカットのみを使用してカレンダーを移動できるようになります。

  7. 上部の埋め込みコードの横にある [クリップボードにコピー] をクリックします。

詳しいiframeコードの取得方法については、以下、Googleのサポートをご覧ください。

(2) Studioに埋め込みボックスを設置する

スクリーン上に、Embed(埋め込み)ボックスを追加します。

  1. ナビゲーションで追加アイコンをクリックします。

  2. [基本]タブをクリックします。

  3. [埋め込み]セクションから[Blank]の埋め込みボックスをクリックします。

  4. 埋め込みボックスがスクリーン上に配置されます。

(3) 埋め込みボックスにリンクを設定する

(1)で取得したリンクを、(2)で設置したボックスに設定します。

  1. 埋め込みボックスをクリックします。

  2. 右パネル上で[埋め込み]タブを選択します。右パネルが閉じている場合は開いてください。

  3. [埋め込みコード]の入力フィールド内で[エディタを開く]をクリックします。

  4. [埋め込みコードを編集]画面の左側に表示される編集画面で、もともと入っている文字を削除し、Googleカレンダーでコピーしたリンクを貼り付けて[保存]します。

  5. 公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。

こちらの回答で解決しましたか?