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

スポンサーリンク

  関連記事

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

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

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

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

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

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

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

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

express-web-WebsitePanel
ExpressWebでのWordPressインストール方法

ExpressWebはWordPressアップロード方式でインストールすると書き …

no image
【Browser Shots】URLだけでスクリーンショットが撮れるWordPressプラグイン

サイトにスクリーンショットを載せたいと思ってもキャプチャしたり加工したりと何かと …

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

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

x2
URLから画像を取り込むWordPressプラグイン「Remote Images Grabber」

WordPressでブログなどを書いていると画像を挿入したい時がありますよね。そ …

no image
WordPressのプラグインJetpackに入っている機能を完結にまとめてみた

WordPressのpluginにJetpackという物があります。 名前だけは …

wordpress-logo
実は簡単WordPressのインストール方法

ブログだけでなくコンテンツマネージメントシステムとしても人気のWordPress …