web制作・ホームページ制作!自社で日々簡単更新!

WebサイトにGoogleカレンダーをレスポンシブ設置

ebサイトにGoogleカレンダーをレスポンシブ設置前回に引き続き今回もご自身のWebサイトにGoogleカレンダーを設置する方法を解説いたします。今回はGoogleカレンダーをレスポンシブ対応させる設定を記載して行きます。

Android、iphone等の縦表示でピッタリサイズが合わない!もしくは縦表示、横表示を繰り返すと動作が不安定になるといった場合に下記の方法をお試しください。

私が実際のWeb制作でうまくいった方法です。


viewport、メディアクエリーを設定する

viewportとは、
スマートフォン、タブレットで表示する際のサイトの見え方の指定です。

メディアクエリーとは、
ウインドウサイズやデバイス解像度などの様々な条件に応じて適用するスタイルを切り替える機能です。

今回は詳しい説明は割愛させていただきます。

Googleカレンダー設定で取得したコードをWebサイトにそのまま貼り付ける


前回の記事(WebサイトにGoogleカレンダーを設置する)で取得したコード(iframe要素)

Google カレンダー埋め込み支援ツール

このコードをいじると、表示枠内に正しく表示されないので、そのまま設定する。
width:800→width:100%とする ×


スタイルシート(css)に下記のコードを記載し、サーバーにアップする


ブレイクポイントを設定する前に設定

/* オブジェクト設定 */
embed,
iframe,
object{
	max-width: 100%;
}

iphone縦(横幅:320px)で枠内にぴったり表示


6-2

実機でもピッタリ表示されました。
是非、ご活用ください。