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

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

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

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

Googleカレンダーをレスポンシブテーマに対応させるスタイルシート

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

上記のコードをstyle.css（外観＞テーマエディター（テーマの編集）＞スタイルシート）に追加して、
埋め込みコードを本文に貼付ける時に、

＜div class=”cal_wrapper”＞
＜div class=”googlecal”＞
＜発行されるGoogleカレンダーのiframeのコード＞
＜/div＞
＜/div＞

ってな感じでGoogleカレンダーのiframeコードを囲うだけです。

＊「＜」と「＞」は半角に置き換えてね！

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

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

★