今回は、自分又は自社のGoogleカレンダーをホームページやランディングページなどのWEBサイトに埋め込みをして、ユーザーへ営業時間などイベント事などの予定を共有する方法を紹介いたします。
Googleカレンダーの設定
カレンダーを埋め込むには、まずはGoogleカレンダー側で少しだけ設定いたします。
自分のGoogleカレンダーにアクセスし『マイカレンダー』にあるカレンダーリスト横の点3つの『オーバーフローメニュー』から『設定と共有』を開きます。
設定項目の『アクセス権限』の「一般公開して誰でも利用できるようにする」にチェックします。
次に設定項目『カレンダーの結合』の部分にある埋め込みコードをコピーしときます。
サイトへの埋め込み方
静的サイトなら直接HTMLファイルの表示させたい場所に、先ほどコピーした埋め込みコードをペーストします。
レスポンシブ（画面幅によっての大きさを自動調整）で表示する場合はdiv要素で囲ってクラスを作成してから以下のCSSのように記述して下さい。もしくは埋め込みコードののwidth部分をwidth=”90%” height=”500″くらいに変更するなどして下さい。
.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を試してみて下さい。
@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』を追加してそこに先ほどの埋め込みコードをペーストして下さい。
↓うまくいくと下記のカレンダーのように誰でも見ることが可能なカレンダーが表示されます。↓
このカレンダーに営業時間やイベント開催日などを入れていけば、サイトに来たユーザーも見ることができます。
以上が「Googleカレンダーを埋め込んでレスポンシブ化する方法」でした。
ユーザーにスケジュールを見せることが重要な仕事などの場合、経費をかけて何かプログラムを導入するのも良いが今回のようにカレンダーを共有する方法でも可能なので、用途に応じて使い分けるのも良いかと思います。
Googleマップも同じように埋め込むことが出来ます。詳しくは以下。
