グーグルカレンダーのレスポンシブ対応

ずっと気になっていたばくのサイト、うどん屋「麦~バク~」をようやくやり替える事になった。

いちばん重要な事はレスポンシブ対応。もはやこれは必須だ。

単純にテーマをレスポンシブにしてみたが、googleカレンダーがどうにもならない。

単純に張り付けただけだと、

こうなってしまうのでスタイルを適用させる。

色々なスタイルを試したが、どうしても土曜日が切れてしまうのだ。

最終的にCSSを


.googleCalendar iframe {
  width: 100%;
  height: 400px;
}
@media all and (min-width: 768px) {
  .googleCalendar iframe {
	height: 600px;
  }
}

これにして、

さらにgoogleのコードの 【2FTokyo” style=”border-】の部分の【FTkyo】の後ろに

<div class="googleCalendar"> <iframe src="calendar.google.com~~~Asia%2FTokyo&showPrint=0&showTabs=0
" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe> </div>

【&showPrint=0&showTabs=0】を書き込む

これで上手くいった。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

2 + ten =

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください