CREARC

Designer's Blog

0

レスポンシブサイトにGoogleカレンダーを適用する必要がある案件があり、個人的に備忘録として書き残しておきたいと思います。同じく悩んでる方がいましたら参考にして頂ければと思います。

いろいろ悩んで調べていたのですが、こちらの記事が大変参考になりました。

レスポンシブ用CSS

.cal_wrapper {
max-width: 960px; /* 最大幅 */
min-width: 300px; /* 最小幅 */
margin: 2.0833% auto;
}
.googlecal {
position: relative;
padding-bottom: 100%; /* 縦横比 */
height: 0;
}
.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* 画面幅が768px以上の場合の縦横比の指定 */
@media only screen and (min-width: 768px) {
.googlecal { padding-bottom: 75%; }
}

上記のコードをstyle.cssへ追加。各個人のテーマ用CSSファイルへ追加してください。
固定ページ等、表示したい場所へ以下のHTMLの埋め込みコードを記載

表示・埋め込みタグ用HTML

<div class=”cal_wrapper”>
<div class=”googlecal”>
<発行されるGoogleカレンダーのiframeのコード>
</div>
</div>

これでうまくGoogleカレンダーがレスポンシブ表示されるはずです。悩んでいる方がおりましたら、ぜひ参考にして頂ければと思います。



コメントはこちら

TOPへ戻る