Taka's Life

Mac、iPhoneを中心としたTAKAの雑記帳

今日の人気記事

【STINGER5】YouTube以外のiframe要素にレスポンシブ対応用のclassが付かにようにする方法

      2015/06/27

Large 4481461680

photo credit: Rego – d4u.hu via photopin cc

WordPressのテーマをSTINGER5に変更しようかと思いはじめ、コツコツとカスタマイズしています。

STINGER5はレスポンシブ対応でYouTubeの埋め込みも、レスポンシブ対応になるように設定されています。

YouTubeの埋め込みコードにはiframeが使われていて、記事中にiframeがあると「youtube-container」というclassが付くように設定されています。

CSSで「youtube-container」に対してレスポンシブ対応用の設定を指定ます。

スクリーンショット 2014 11 16 23 06 59

ただ、YouTube以外にもiframeを使って埋め込んでいるものがブログには色々あり、それらにも「youtube-container」のclassが付いてしまうため不要なスペースが出来てしまいます。

これは、「youtube-container」での設定はあくまでYouTube用の設定であって、他のiframe要素には合わないために起こっています。

これを回避するために、YouTubeのURLが含まれたiframeのみに「youtube-container」のclass設定し、レスポンシブ表示をする方法です。

スポンサーリンク


function.phpへ設定

STINGER5のfunction.phpの177行目に下記の記載があります。

これを下のコードに入れ替えましょう。

はい、これだけです。

スクリーンショット 2014 11 16 23 49 42

ご覧のとおり、classの追加も無くなりす無駄な空白も無くなりました。

まとめ

たったこれだけで、対応できますのでコピペしてみてください。また、instagramなどのサービスへもちょっとコードを書き換えれば対応できるそうなので詳しくは下のリンクを参照してみてください。

参考にさせて頂きました

 - テーマカスタマイズ , , ,

スポンサーリンク

  関連記事