コロナ禍で少し時間が空いたので、自分のサイトを見直していました。
かなり放置していたので、おかしな広告がたくさん入っていたり、表示が最適化されていないことに気が付きました。
それらを修正したので記事にしています。
スマホ表示の不具合
パソコンでは、画面が大きいため、不具合はわからないのですが、スマホだとサイズを最適化していないとこのようになります。
通常
画面幅を最大限に使ってきれいに表示します。
ここが動画を埋め込んでいる場所
いたって普通です。
最適化されてないと…
右半分が空いているのに画面サイズが小さくなっていますよね。
ここが動画を埋め込んでいる場所
わかりますか？
埋め込みしている動画サイズが大きいため、それに合わされているため、他の領域が狭くなってしまっているのです。
これ、パソコンでは問題なく表示されるのですが、スマホでも最適化させる必要があります。
埋め込みサイズを最適化する方法
スマホに合わすと、パソコンでは小さくなってしまい、パソコンに合わすとスマホでの表示が上手くできませんので、どちらでも最適化できるようにします。
エディターを見ると、このようになっています。
埋め込みコードを抜き出すとこうです。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/4F7NIdJyVJE” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
埋め込み動画サイズはここで書かれているので、width=”560″ height=”315″ ここを下記に入れ替えます。
style=”max-width:100%;”
<iframe style=”max-width:100%;” src=”https://www.youtube.com/embed/4F7NIdJyVJE” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
最適化した覚えがないなら
サイトを作っていて、サイズを最適化していないなら対応することをお勧めします。
これは、動画でも画像でも同じことが出来ますので参考にしてください。
私のサイトもアクセス数がピークの／1/20にまで落ち込んでいます。
こんなことでは改善するとは思えませんが、少しずつ更新していこうと思います。
