Facebook
RSS Feed
Apr 10, 2013

iframeの埋め込みコード(Google Map・YouTube・Instagram)をレスポンシブテーマに対応させる方法

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

*独自のJavaScriptを使った埋め込みサービスなど、レスポンシブに対応させるのが難しいものもあります。

Google MapやYouTubeのようなメジャーなやつもまだレスポンシブに対応してないので、
コードを貼る際に少々対策が必要です。

ちょいと調べてみたら、こちらの記事にスタイルシートだけで簡単にレスポンシブ対応する方法が載ってたので、自分用メモもかねてここに記しておきます。

iframeをレスポンシブ対応にするスタイルシート

.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}

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

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

ってな感じでiframeのコードを囲うだけです。スーパー簡単!

*「<」と「>」は半角でね!

ついでにプラグイン「AddQuicktag」を有効化して、上記のコードを登録しておけば、
ボタン一発で呼び出せるのでラクチン。

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

ーー

【追記】

embedresponsively.com

主要なEmbedコードを簡単にレスポンシブ版コードに変更してくれるサービスが出ました。
こちらの方が圧倒的に簡単です。

Embed Responsively
http://embedresponsively.com/

そうそう、上の動画はYuccaっていう東京のバンドのPVです。
ワタクシが企画・撮影・編集した、初めてのミュージックビデオ。
もし興味があったらAmazonなんかでチェックしてみてくださいね。

Posted in WordPress初心者講座Comments Closed 

関連記事

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

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