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

Programming

今回は、自分又は自社の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マップも同じように埋め込むことが出来ます。詳しくは以下。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました