【iPhone 15】最新情報・キャリア別の価格比較

コピペで使える!WordPressにGoogleカレンダーの埋め込みコードをレスポンシブで表示する方法

本サイト内のコンテンツはNORILOGが独自に制作しています。メーカー等から商品提供を受けることもありますが、その場合は記事内に明記しております。コンテンツの内容や評価に関するランキングの決定には一切関与していません。メーカー等の指示による表示部分にはPRを表記します。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。詳しくはサイト運営ポリシーをご覧ください。

レスポンシブサイトに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カレンダーがレスポンシブ表示されるはずです。悩んでいる方がおりましたら、ぜひ参考にして頂ければと思います。

まずは15日間お試し無料ができます!

サーバー容量は余裕の 200GB~! 1つの契約でたくさんのサイトを運営したい方クリエータやアフィリエイターにぴったりのサービスです。



コメントの通知/購読設定
受け取る通知
guest

0 件のコメント
Inline Feedbacks
全てのコメントを見る