新@kyotapyな日々

思いついたら書く… wordpress,iPad,美味しいもの,観光

Affinger2でiframeを使ったブログカードの下に余白ができる現象を解決しました

      2015/12/24

wordpressのテーマをAffinger2にして気になっていたことがあります。

ブログカードの下に余白ができる

ブログ内で他のサイトを紹介する時にブログカードをブックマークレットとして使っています。

ブログカードとは、下のようにiframeというタグを使ってページを紹介できるのです。

しかし、Affinger2にしてからブログカードの下に広い余白が入るようになってしまいました。

 

ShareHtmlを使ってみたけど

緊急回避策として以前使っていたSharehtmlというブックマークレットを使っていました。

Sharehtmlだと下のように表示されます。

ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記
Sharehtmlも大変素晴らしいブックマークレットでお世話になったのですが、ページによっては動かない時があるのです。

上記を試しても、どうしても動かないページは、PCのブラウザからSharehtmlを実行してコードを取得したりしていました。しかし、これはめんどい…

また過去の投稿で使っているブログカードを全てSharehtmlに置き換えるのも大変な労力です。

STINGER5で解決している人がいた!

そこで調べてみるとSTINGER5で同じような現象を解決している人がいました。

Affinger2でもfunction.phpの中に同じような記述があったので書き変えてみました。

・変更前

・変更後

 

 

function.phpはすぐ戻せるようにバックアップを取っておいてください。

書き変え後に、function.phpをアップロードして、ページを確認してみると…

 

ちゃんと余白がなくなっています!

まとめ

原因はAffinger2がiframeをYouTubeのプレーヤーと判定して、プレーヤーの分だけスペースを取ってしまっているから。

書き変えたコードはURLにYouTubeが含まれる場合だけプレーヤーと判断するようにしたのでした。

解決策をアップしていただいているtakaslifeさんありがとうございました。

 

 - テーマ , , , ,