2015-03-12

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」とか導入が簡単です。

HTML/CSSの記述方法等は無料サポート行ってませんので、最新情報はGoogleで調べてくださいね!あと必ずバックアップを取って作業することをオススメします!

ホームページからの集客できてますか?

ワードプレステーマ「Minimal WP」
Minimal WPのWordPressテンプレートは、月間45万PV超のブログ運営のノウハウを詰め込んだミニマルデザインテンプレート。HTML不要で初心者でも簡単におしゃれなホームページが作れます!ブログ・自社メディアを始めるなら今がチャンスです!
by
関連記事