[WordPress.com] Google カレンダーのレスポンシブ対応についての考察

googlecalendar01

Google カレンダーのレスポンシブ対応についての考察です。

Google カレンダーをレスポンシブ対応させる方法(テーマによっては手直しが必要)

以下のような感じのCSSを追加し、

.calendar-container {
	position: relative!important;
	padding-bottom: 90%;
	padding-top: 30px;
	height: 0;
}

.calendar-container iframe,
.calendar-container object,
.calendar-container embed {
	position: absolute!important;
	top: 0;
	left: 0;
	width: 100%!important;
	height: 100%!important;
}

@media screen and (max-width: 460px) {
    .calendar-container {
		padding-bottom: 140%;
	}
}

.entry-content img,#content embed,#content object,#content iframe,#content video {
    border: 1px solid #eeeeee!important;
	padding: 6px!important;
	background-color: rgba(230,230,230,0.4)!important;
	border-radius: 3px;
}

固定ページ等に以下のような感じのものを追加すると、

<div class="calendar-container">
[googleapps domain="www" dir="calendar/embed" query="height=600&wkst=1&bgcolor=%23ffffff&src=creco.net_j54hnj1scpsa0oasqma0v0n4h0%40group.calendar.google.com&color=%23182C57&src=ja.japanese%23holiday%40group.v.calendar.google.com&color=%232952A3&ctz=Asia%2FTokyo" width="800" height="600" /]
</div>

Google カレンダーがレスポンシブ対応できるようです。mac の safari とかでは機能しているようです。

Google カレンダーのレスポンシブ対応についての考え方

パソコンでの表示では問題ないと思うのですが、iPhone の場合、WordPress.com のテーマでは、Google カレンダーが画面からはみ出てしまったりすることがあるようです。理屈としては、カレンダーを縮めるか、逆にテーマをカレンダーに合わせて大きくするか、ということになるかと思います。

このような現象を回避するためには、カレンダーをかこっているボックスをひとつひとつチェックしていって、少なくとも、カレンダーが表示される画面では、「overflow:hidden」を解除してやればいいようです。今のところ、この考え方で、いろいろと不具合が解消されるケースが多いです。

googlecalendar01

CSS設定の各部の説明

.calendar-container {
	position: relative!important;
	padding-bottom: 90%;
	padding-top: 30px;
	height: 0;
}

.calendar-container iframe,
.calendar-container object,
.calendar-container embed {
	position: absolute!important;
	top: 0;
	left: 0;
	width: 100%!important;
	height: 100%!important;
}

この部分は、YouTube のレスポンシブ対応の応用です。

「padding-bottom:90%」の部分で縦横の比を調整します。詳しい説明は、こちらの記事にあるようです。

@media screen and (max-width: 460px) {
    .calendar-container {
		padding-bottom: 140%;
	}
}

この部分で、iPhone 等でのカレンダーの表示を縦長にして、ちょっとかっこよくしてやります。

.entry-content img,#content embed,#content object,#content iframe,#content video {
    border: 1px solid #eeeeee!important;
	padding: 6px!important;
	background-color: rgba(230,230,230,0.4)!important;
	border-radius: 3px;
}

このCSSは、カレンダーに枠をつける部分です。テーマによってはクラス名が対応せずに機能しませんし、他の表示にも影響しますので、その点、ご注意ください。この枠をつけると、iPhone 等で Google カレンダーが全部表示されるようになったり、勝手に伸び縮みする現象を抑えることができるようになったのですが、どうしてそうなるのか、理論的なことはよくわかりません。

なお、テーマによっては、これだけではカレンダーの右側が隠れてしまうことがあります。そのときは、カレンダーを囲んでいるボックスすべての「overflow:hidden」を外してあげるとうまくいくようですが、こちらの方もなぜそうなるのか、それとも他に原因があるのかなど、よくわかりません。

以上、ちょっとぐだぐだですが、少なくとも、考え方については参考になるのではないかと思ったので、公開した次第です。

投稿者: comemo

mac & iPad で情報をインテグレートする

One thought on “[WordPress.com] Google カレンダーのレスポンシブ対応についての考察

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。