【コピペOK】Googleカレンダーをレスポンシブで入れる方法

google

[nlink url=”https://laplace.link/google/responsive-the-google-map/” title=”【コピペOK】Googleマップをレスポンシブで入れる方法” excerpt=”最近はワードプレスやbootstrapなど、PCとスマートフォンに対応した画面サイズで自動でコンテンツ表示が切り替わる「レスポンシブ」なサイトが多くなってきてます。”]

Googleマップをレスポンシブで入れる方法に続く第2段!

今度はGoogleカレンダーをレスポンシブでいれる方法についてです。

Googleマップと同様、GoogleカレンダーをWEBサイトに入れて、イベントの告知をする方も多くなって来ているみたいです。

カレンダーに記載すると、WEBサイト上の情報も自動で反映されると言う動きをします。

カレンダーもマップと同様に“サイトに入れるだけ”だったら、簡単に入れる事ができます。

Googleカレンダーをレスポンシブでいれる方法

  1. Googleカレンダーから、右上にあるアイコンから、設定をクリック
  2. 左上の「カレンダー」タブをクリックして、埋め込むカレンダーの名前をクリック。[このカレンダーを埋め込む] セクションに表示される iframe コードをコピーします。
  3. ウェブサイトのエディタを開き、カレンダーを表示したい場所にコードを貼り付けます。

詳しい手順はこちらで確認してください。
https://support.google.com/calendar/answer/41207?hl=ja

WEBサイトに入れ込むとこんな感じです。

responsive-the-google-calendar-1

上がPCの画面サイズで見たもの。下がスマホサイズの画面でみたもの。

PCサイズの画面で見た時は、問題な無いのですが、
スマホサイズで見た時にマスが潰れてしまって問題ありな感じです。

以下のHTMLとCSSを使う事で潰れない様に調整します。

[html title=”HTML”]
<div class="embed-container">iframeのコピーしたコード</div>
[/html]

[css title=”CSS”]
@media (max-width: 320px) {
.embed-container {
position: relative;
padding-bottom: 120%;
height: 0;
overflow: hidden;
max-width: 100%;
}
}

@media (min-width: 992px) {
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
}
[/css]

CSSはレスポンシブにするため、メディアクエリを使って画面サイズによって切り分けてます。
この時のサイズは、それぞれ自分のサイトに合わせて変更してください。

HTMLとCSSを入れた時のスマホで見た時の画面はこんな感じです。

responsive-the-google-calendar-2

ぶっちゃけ、それでもカレンダーとして文字が入っても読めないよねw

って感じかもしれませんが、カレンダー自体はそれらしくなりますw

あわせて読むと効果的な記事
[nlink url=”https://laplace.link/google/responsive-the-google-map/” title=”【コピペOK】Googleマップをレスポンシブで入れる方法” excerpt=”最近はワードプレスやbootstrapなど、PCとスマートフォンに対応した画面サイズで自動でコンテンツ表示が切り替わる「レスポンシブ」なサイトが多くなってきてます。”]