Googleカレンダーの埋め込みコードをレスポンシブテーマに対応させる方法

レスポンシブテーマは普通のテーマと違いコード内でのサイズ指定が無視されます。
レスポンシブに対応していない埋め込みコードは、
スタイルを追加してレスポンシブテーマに対応させる事が出来ます。

というわけで、Googleカレンダーの場合のやり方ですが、
ちょいと調べてみたら、こちらの記事にとても詳しく解説されていたので、
自分用メモもかねてここに記しておきます。

＊Google MapやYouTubeのレスポンシブ対応方法はこちらをどうぞ。

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;
}

@media only screen and (min-width: 768px) {
  .googlecal { padding-bottom: 75%; }
}

あとは埋め込みコードを本文に貼付ける時に、こんな感じでGoogleカレンダーのiframeコードを囲うだけです。

<div class="cal_wrapper">
<div class="googlecal">
ここにGoogleカレンダーのiframeのコードを貼る
</div>
</div>

ブロックエディターなら「カスタムHTML」ブロックに、クラシックエディターなら「テキスト」タブに貼ってください。

プラグイン「Simple Calendar」を利用する方法

もう一つはWordPressなんでやっぱりプラグインを利用するというのも簡単です。
「Simple Calendar」とか導入が簡単です。

＊HTML/CSSの変更を伴うテーマ編集に関しては、無料サポート外となります。
不具合が生じてもサポートできませんので、自己責任で編集作業を行ってください。
必ず必ず必ずバックアップを取って作業することをオススメします！

ご自身でカスタマイズを行うのが不安な方・エラーが発生してしまった方は、
プロの作業代行にお任せするのがおすすめです（料金3,000円〜）。
【PR】ココナラでWordPress作業代行を依頼する