Googleカレンダーを埋め込んでレスポンシブ化する方法

今回は、自分又は自社のGoogleカレンダーをホームページやランディングページなどのWEBサイトに埋め込みをして、ユーザーへ営業時間などイベント事などの予定を共有する方法を紹介いたします。

Googleカレンダーの設定

カレンダーを埋め込むには、まずはGoogleカレンダー側で少しだけ設定いたします。

自分のGoogleカレンダーにアクセスし『マイカレンダー』にあるカレンダーリスト横の点3つの『オーバーフローメニュー』から『設定と共有』を開きます。

設定項目の『アクセス権限』の「一般公開して誰でも利用できるようにする」にチェックします。

次に設定項目『カレンダーの結合』の部分にある埋め込みコードをコピーしときます。

サイトへの埋め込み方

静的サイトなら直接HTMLファイルの表示させたい場所に、先ほどコピーした埋め込みコードをペーストします。

レスポンシブ（画面幅によっての大きさを自動調整）で表示する場合はdiv要素で囲ってクラスを作成してから以下のCSSのように記述して下さい。もしくは埋め込みコードののwidth部分をwidth=”90%” height=”500″くらいに変更するなどして下さい。

CSS

.Gcalendar {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  }
   
  .Gcalendar iframe,
  .Gcalendar object,
  .Gcalendar embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }

上記CSSで表示が崩れたら下記のCSSを試してみて下さい。

メディアクエリありのCSS

@media (max-width: 767px) {
          .Gcalendar {
            position: relative;
            padding-bottom: 90%;
            padding-top: 30px;
            height: 0;
            overflow: hidden;
            }
             
            .Gcalendar iframe,
            .Gcalendar object,
            .Gcalendar embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            }
          }

WordPressにカレンダーを載っける場合は、投稿ブロックの『カスタムHTML』を追加してそこに先ほどの埋め込みコードをペーストして下さい。