ente‐will

ネットの話題を中心に気になったことや調べたことを書いています

【WordPress】STINGER5にiframeを埋め込むと空白のスペースが生まれるの解決方法

   

wordpress-logo

最近はてなブログカードというリンクをおしゃれに表示させる機能を知り早速導入していみたところ下に空白のスペースが表示されてしまう現象が起こっていたましたが、どうやらWordPressのテーマSTINGER5が原因だったようです。

はてなカードというのははてなブログ以外に設置するにはiframeを利用しなければなりませんが、設置した場所を確認したら付けた覚えが無い<div class=”youtube-container”>〇〇</div>で囲まれていました。

どうやらこれは現在使用しているテンプレートのSTINGER5がiframeが埋め込まれたことを感知して自動で付けているようです。何故このようなことになるのかというとiframeが入っているタグは世間一般ではYouTubeの埋め込み機能の可能性が高いためだと思います。

youtube-containerによりYouTubeのプレイヤーサイズをレスポンシブ対応させて表示がおかしくなってしまうプレイヤーを画面幅に合わせてくれています。

iframeをYouTubeだけで使用している人には問題ないのですが、他で使用するとプレイヤー分のスペースが確保されてしまうので、そこが余白となって現れます。

これを直すにはテンプレートを修正するしか無く知識が無いと困難なのですが、その方法をTaka’sLifeさんが紹介していました。

iframeをYouTubeとその他に分ける方法

STINGER5のfunction.phpを開き「//iframeのレスポンシブ対応」と書かれた所を探し入れ替えます。

上記のサイトでは「_」が「em」になっていて正常に動かないので、修正したものがこちら。

一応オリジナルも置いておきますね。

失敗すると管理画面に入れなくなるので事前にバックアップしたほうが良いですよ。

 - WordPress

Adsense

スポンサーリンク

Adsense

スポンサーリンク

  関連記事

no image
【WordPress】無料テーマStinger3説明文がh1でカテゴリはindex

これを書いている時点ではここでも利用しているアクセスが3倍になると言われているW …

no image
【WordPress】予約投稿が失敗する時は「WP Missed Schedule Fix Failed Future Posts」プラグイン

WordPressで予約投稿に失敗する、そんな現象に見舞われた訳ですがプラグイン …

wordpress-logo
WordPressのOPGはAll in One SEO Packで簡単設定

はてなカードの所でも書きましたが概要やサムネイルの部分はOGPから持って来ている …

freewebがパースエラーでサイトマップが作成されないのに続きping送信されていないことが判明

freewebは「日本でいちばん自由な無料レンタルサーバ」と謳っている無料のサー …

G_Analytics_error
WordPressのプラグインG Analyticsでログイン失敗エラーの直し方とCURLOPT_FOLLOWLOCATIONのエラー

WordPressのプラグインでG Analyticsというワードプレスの管理画 …

wordpress-logo
WordPressプラグイン「BackWPup」消えてから分かるバックアップの大切さ

消えてからしか分からないバックアップの大切さ。ということでWordPressプラ …

wordpress-logo
WordPressおすすめ鉄板プラグイン19+おまけ

WordPressには様々なプラグインがあり選り取りみどりな反面、種類が多すぎて …

wordpress-logo
WordPressのMySQLデータが消えた時の復元方法

ExpressWebの障害でWordPressのMySQLが消えてしまったので、 …

no image
WordPressコメント欄の設定、一括削除、プラグイン、スパムで悩まされたら

WordPressでコメント欄を開けておくとスパムコメントに悩まされることがあり …

no image
WordPressパーマリンクの付け方と設定方法

パーマリンクはURL設定のことなのですが無料ブログでは記事部分だけ変えられるとい …