コーディング

【対処法】スマホでGoogleカレンダーを表示したら縦長に伸びてしまう場合

  /
Googleカレンダーがスマホで見ると縦長になってしまう時の対処法

これで解決！比率を固定する方法

Googleカレンダーは、共有機能を使って誰でも予定を見られるように公開することができます。

しかし公開したGoogleカレンダーをサイトに埋め込んだ時、スマホで見る時だけ縦長いということはありませんか？

Googleカレンダー

縦長になると文字が見にくいという問題が出てきます。

これを解決するには、まずGoogleカレンダーの埋め込みコード内にある「width」と「height」の値を「100%」に指定します。

Googleカレンダー登録画面

Googleカレンダーの埋め込みコードをHTMLに記載するときは、適当なdivで囲んであげましょう。

<div class="google-calendar1">
<!-- Googleカレンダー埋め込みコード -->
<iframe src="https://calendar.google.com/calendar/embed?showTitle=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=l2q8t972riujr91ea8ajquuc1k%40group.calendar.google.com&amp;color=%232F6309&amp;ctz=Asia%2FTokyo" style="border-width:0" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
<!-- Googleカレンダー埋め込みコード -->
</div>

それから以下のCSSを追加すると、縦横比が固定されるため、PCで見てもスマホで見ても同じ比率で表示することができます。

.google-calendar1 {
    width: 100%;
    position: relative;
}
.google-calendar1:before {
    content: "";
    display: block;
    padding-top: 65%;
}
.google-calendar1 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

「.google-calendar1:before」の「padding-top」で高さを取っているので、%の値を変えると好きな比率に変更できます。

実際に埋め込んでみました

完成形はこんな感じです。

スマホで見ても、ウィンドウサイズを変えても同じ比率で表示されます。



おわり

以上、「Googleカレンダーがスマホで見ると縦長になってしまう時の対処法」でした。

少してもお役に立てれば幸いです。

CSS
関連記事