昨日、「note」の記事を紹介しようと思ってシェア用のタグを取得して貼り付けてみたんですよ。
そしたら500pxほどの空白ができるだけでノート自体は表示されなかったんですよね。よくわかんなかったので、普通にテキストリンクにしてたんですが「AKANEIRO.me」のあかねさんが原因を教えてくれたので無事解決できました。あかねさんありがとうございます。
備忘録として、修正方法を記事に残して起きます！
<div class=”youtube-container”>が勝手に付く
まず、iframeタグが入っているHTMLソースを貼り付けると、サイトを表示したときにiframeタグの前に勝手に<div class=”youtube-container”>なるものがくっついています。
このDivタグはYou Tube動画のレスポンシブ対策のためにあるらしいです。
確かにPCでもスマホでもいい感じに動画が表示されてくれるのは嬉しい！ですが、iframeタグ全てに反応してしまうために今回のような不具合が発生したようです。
それを削除したら直るとあかねさんに教えていただいたのですが…WPのテキスト画面にはそんなタグ見当たらんのですよ！
↑そんなdivタグ見当たらない…
そこで次はGoogle先生にきいてみたところ、解決できそうなありがたい記事を見つけることができました。感謝！
【STINGER5】iframeの表示サイズがおかしくなるのを直す方法 | はぴすぷ
こちらのサイトでは、アドレスにYouTubeと含まれる場合のみにそのdivタグが付くようにカスタマイズしています。
function.phpをカスタマイズしよう
怖いのでいじる前のfunction.phpをCtrl+Aで全て選択してメモ帳にでもコピペしておきましょう。真っ白になってもすぐ戻せるように…備えあれば憂いなしです。
で、どこをどう変更するのかというと…
Stinger5とStinger6では微妙に違いまして…でもさきほどのサイトを参考にしながらコピペしてみたらすんなりと直りました。
白くならなかった！感謝しかない。
Stinger6の場合
| * iframeのレスポンシブ対応 */ function st_wrap_iframe_in_div( $the_content ) { if ( is_singular() ) { $the_content = preg_replace( ‘!(<\s*?iframe(?:\s+[^>]*>)?)(.*?)(</\s*?iframe\s*?>)!is’, ‘<div class=”youtube-container”>$1$2$3</div>’, $the_content ); } return $the_content; |
↑この部分を
↓このように変更
| * iframeのレスポンシブ対応 */ function st_wrap_iframe_in_div( $the_content ) { if ( is_singular() ) { // YouTube動画にラッパーを装着 $the_content = preg_replace( ‘/<iframe[^>]+?youtube\.com[^<]+?<\/iframe>/is’, ‘<div class=”youtube-container”>${0}</div>’, $the_content ); } return $the_content; |
これでちゃんと表示されるようになったと思います！
ソースをカッコよく表示させる方法がわかんなかったので色つけてそれっぽい雰囲気だけ出してみた。
