MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

スマホ表示時に謎の空白があった時にCSSに追加するコード。

   

iframe-css

最近ブログカードを導入したんですが、謎の空白に悩まされていました。

症状はこんな感じ。

  1. パソコン表示時は問題なし
  2. 開発モードでのスマホ表示時も問題なし
  3. 実際にスマホで見た時だけ謎の空白がある
  4. キャッシュクリアしても効果なし

何が原因なんだろう…?

ブログカードではなくiframeが原因か?

原因究明していく中でわかったことがありました。

それは、ブログカードだけの問題ではなく、iframeの制御に問題があるということ。

僕はStinger5を愛用しているんですが、YouTubeの動画をレスポンシブに対応してくれるすごいテーマなんですよ。

 

で、ブログカードを導入した時の不具合も解決したんです。

その時のブログはこちら。※すでに空白がなくなるコードも追記済みです!

無知って怖いですね。 情報弱者ってつらいですね。 ブログカード公式で対応してたんですね。 いや

 

しかし、実は上記のブログを書いた時点では謎の空白はあったんです。

キャッシュクリアしても空白はあったみたいなんです。

iframeが原因で空白ができる問題は解決したはずなのに…

他のiframeでも不具合は発生していた

そういえば、昔に書いたブログでも不具合はありました。

よくよく考えると、それもiframeが問題だったんですよね。

YouTube(iframe)の埋め込みはレスポンシブに対応するけど、他のiframeのものは表示が崩れるというわけです。

 

つまり、この問題を簡単にまとめると、こんな感じです。

  1. YouTube(iframe)の埋め込みは問題なし
  2. それ以外の埋め込み(iframe)は表示が崩れることが多い

どうすればいいのかなぁと調べてみると、コードを一行追加すると解決することがわかりました。

CSSに追加するコード

今回の問題を解決してくれるコードがこちら。

縦方向の位置を指定するコードです。

デフォルトで指定されているbaseline(親要素のベースラインに揃える)ではなく、下端に揃える「bottom」を指定するわけです。

 

先述のブログカード問題で登場したコードと一緒にCSSに追加しましょう。

下記のコードを全体のレイアウトに影響するところに追加すればOKです。

 

Stinger5をお使いの方は、下記のコードの上に追加しましょう。

↓こうなればOKですね。

 

このコードに出会うまでは「height」で調整しようとしてたんですが、レスポンシブに対応しないんですよね。

とか、無駄なコードを追加してました。

まとめ

いかがでしたか?

無事にスマホ表示時のレイアウト崩れは解決しましたか?

このコードを追加して、なおかつキャッシュクリアをしても解決しなければ、他で問題が起きているかもしれません。

 

ちなみに、ブログカードを導入するつもりがない方でも、このコードは追加した方が良いと思います。

YouTubeやブログカード以外でも、iframeが使われているものがたくさんあるからです。

原因はよくわからないけど表示が崩れている…そんな方に参考にしていただければ嬉しいです!

 - WordPress・カスタマイズ

この記事が気に入ったらいいね!しよう

最新情報をお届けします