【wordpress】googleカレンダーをレスポンシブに対応させる方法

• WordPressにgoogleカレンダーを埋め込んで、レスポンシブに対応させたいな…

このような疑問にお答えします！

【wordpress】googleカレンダーをレスポンシブに対応させる方法

googleカレンダーをレスポンスシブに対応させる方法は下記のとおり。

PHP（HTML）コード

<div class="google">
  <div class="google__calendar">
    <!-- iframe コード -->
    <iframe src="https://calendar.google.com/calendar/………" frameborder="0" scrolling="no"></iframe>
    <!-- / iframe コード -->
  </div>
</div>

『iframe』コード内の『width=”〇〇〇”』と『heigh=”〇〇〇”』、『style=”border: 0”』は消さなくても問題ないですが、記述量を減らす為、意図的に消しております。
（『style=”border: 0”』は、cssに記述しております。）

CSSコード

.google__calendar {
  position: relative;
  /*padding-top: 100%;*/
  padding-top: 75%;
  /*padding-top: calc((2 / 3) * 100%);*/
}

.google__calendar iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (max-width: 767px) {

  .google__calendar {
    padding-top: 150%;
  }

}

『padding-top』を使用して、縦横の比率を保持しつつ、可変させてあげます。