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

【コピペOK】Googleマップをレスポンシブで入れる方法
【コピペOK】Googleマップをレスポンシブで入れる方法
最近はワードプレスやbootstrapなど、PCとスマートフォンに対応した画面サイズで自動でコンテンツ表示が切り替わる「レスポンシブ」なサイトが多くなってきてます。
2016-02-18 01:32

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を使う事で潰れない様に調整します。

<div class="embed-container">iframeのコピーしたコード</div>
@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はレスポンシブにするため、メディアクエリを使って画面サイズによって切り分けてます。
この時のサイズは、それぞれ自分のサイトに合わせて変更してください。

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

responsive-the-google-calendar-2

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

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

あわせて読むと効果的な記事
【コピペOK】Googleマップをレスポンシブで入れる方法
【コピペOK】Googleマップをレスポンシブで入れる方法
最近はワードプレスやbootstrapなど、PCとスマートフォンに対応した画面サイズで自動でコンテンツ表示が切り替わる「レスポンシブ」なサイトが多くなってきてます。
2016-02-18 01:32

ABOUTこの記事をかいた人

1998年からWEB関連の仕事に従事。角川グループのWEB会社に入社し、ディレクター、デザイナーとして経験を積む。2004年よりフリーランスとして活動し、2008年に法人を設立。サイトの制作だけでなく運用保守や紙媒体も行う。専門学校の非常勤講師も経験。