Facebook
RSS Feed
Mar 12, 2015

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

unagi2

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

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

サイズはテーマに合わせてお好みで調整してください。

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

【追記:2015年3月14日】前回のコードだとiPhoneでうまく表示されなかったので、応急処置的に.googlecalから「overflow: hidden;」を外しました。スマートに解決できる方法分かる人いたら教えてください!

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コードを囲うだけです。

*例のごとく「<」と「>」は半角に置き換えてね!

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

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト