Googleカレンダーをモバイル用にレスポンシブ設定する

GoogleカレンダーをただWebサイトに載せてしまうと、スマートフォンで見た際に全体が見えない状態になってしまいます。それを解決するためにHTMLとCSSコードを使い、レスポンシブ使用にしていきます。

まずは、GoogleカレンダーのHTMLコードを取得していきます。

1、Google カレンダーを開きます。

2、カレンダーページの右上にある歯車マークをクリックし、『設定』を選択します。

3、対象となるカレンダーを選択してください。

4、『カレンダーの統合』をクリック

5、『カスタマイズ』をクリック

6、別ウィンドウが開きます。このページでは、カレンダーのカスタマイズを行うことができます。好きな設定を行って頂き、カレンダー上の『埋め込みコード』のコード最後部分にある二つの四角が重なったようなマークをクリックしてください。

これでHTMLコードの取得は終了です。

7、取得したコードの<div class="google-cal"> と　</div>を付け加えます。※そのほかの部分は自身のカレンダーコードになりますので、<div class="google-cal">と</div>だけを下の例のように付け加えてください。



<div class="google-cal">
<iframe src="************" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

</div>

8、7でコードを書き換えたので、そのコードをカレンダーのHTMLコードは表示させたい部分に入力をしてください。

今度は、モバイル用にレスポンシブ設定をするHTMLコードの入力をします。

上記のカレンダーのHTMLコードとは別に、下にあるHTMLコードをそのままコピーし、

カレンダーを載せたページの設定　＞　SEO（検索エンジン最適化）ページ設定　＞　HTMLヘッダーコードのカスタマイズ　の部分に入力します。



<style>
.google-cal iframe {
width:100%;
max-width:800px;
height:400px;
}

@media (min-width: 750px) {

.google-cal iframe {
height:600px;
}

}
</style>

最後に公開ボタンを押して終了です！