本サイト内のコンテンツはNORILOGが独自に制作しています。メーカー等から商品提供を受けることもありますが、その場合は記事内に明記しております。コンテンツの内容や評価に関するランキングの決定には一切関与していません。メーカー等の指示による表示部分にはPRを表記します。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。詳しくはサイト運営ポリシーをご覧ください。
レスポンシブサイトにGoogleカレンダーを適用する必要がある案件があり、個人的に備忘録として書き残しておきたいと思います。同じく悩んでる方がいましたら参考にして頂ければと思います。
いろいろ悩んで調べていたのですが、こちらの記事が大変参考になりました。
目次 表示
この記事を書いた人
Apple製品の他、カメラやドローンが好きです。趣味で2021年から登山やキャンプもはじめました。国交省全国包括許可承認取得済 三陸特/アマ無線4級/DJI CAMPスペシャリストを取得。運営者の詳しい情報はこちら
レスポンシブ用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カレンダーがレスポンシブ表示されるはずです。悩んでいる方がおりましたら、ぜひ参考にして頂ければと思います。
まずは15日間お試し無料ができます！
サーバー容量は余裕の 200GB～！ 1つの契約でたくさんのサイトを運営したい方クリエータやアフィリエイターにぴったりのサービスです。
