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のプラグインJetpackに入っている機能を完結にまとめてみた

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

wordpress-logo
WordPressで最初に設定しておく項目

WordPressのインストールを終え、運用をスタートする前に設定しておいたほう …

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

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