【WordPress】STINGER5で記事中にiframeを埋め込むと表示が崩れる場合の解決方法

こないだSTINGER5を使ってるブログ(そういえばこのブログもそうでした)にiframeを利用したコンテンツを貼り付けたら妙な空白ができてしまい困りました。
調べてみるとiframeを使ってる箇所にはcssで「youtube-container」というclassが自動的に指定されてしまい、その結果妙な空きスペースができていたようです。

さて、どうにか解決方法はないかなとググってみたら「【STINGER5】YouTube以外のiframe要素にレスポンシブ対応用のclassが付かにようにする方法 | Taka's Life」という記事に解決方法と解説が書かれていました。
要するにiframeで読み込むコンテンツのドメインを判別してYouTubeから(Instagramも)読み込まれた要素にだけ別途classを指定するということですね。
なるほど勉強になりました。ありがとうございます。

解決方法

まずSTINGER5の「function.php」を開き、「//iframeのレスポンシブ対応」と書いてある部分を探します。

これを以下のように書き替えます。

次に必要ならInstagram用のcssをSTINGER5の「style.css」に追加します。

これでiframeを使用したコンテンツが正常に表示されるようになるはずです。

結果

iframeを利用したコンテンツの場合、例えばアフィリエイト広告。

YouTubeの動画の場合。

Instagramの動画もほれこの通り。

何あれ楽しそう

Tomoya HIRAYAMAさん(@stepbros)が投稿した動画 -

-WordPress
-, , ,