スマホで画像が一瞬だけ大きく表示されてしまう場合のCSS修正方法
2018年7月22日2019年1月16日
この記事は最終更新から5年以上経過しています。内容が古くなっている可能性があります。
WordPressのテーマを使って作成している時によく起こる現象です。作成したページをスマホで見ると、アイキャッチ画像が一瞬ビヨーンと伸びたように大きく表示されて、それから100%幅表示になる。100%で表示するのはわかっちゃいるけど、激しく遅い…という感じ。一瞬の事なので、気にならない方も多いと思いますが、こういうの気になっちゃうタチなので、直したいと思います。
～ 目次 ～
一瞬大きく表示される原因
直接的な原因としては、レスポンシブデザインのテーマでmax-widthしか指定されていない場合に起こっているようです。幅がwidthで指定されていないと、画像の原寸からmax-widthで指定したサイズに変化するのが激しく遅く、人間の目にも見えてしまう。なぜだかは知りません♪
CSSの修正方法
ここまで読むまでもなく、おわかりかもしれませんが、修正方法です。
max-widthしか指定されていない画像にwidthを指定してあげます。これで少なくとも体感できるようなタイムラグは無くなりました。
例えばWordPressのアイキャッチ画像が一瞬伸びたように見えてしまう場合は、アイキャッチ画像のidかclassを調べて、使用中のテーマのメインのCSS（だいたいstyle.css）かカスタマイザーの追加CSSに、下の様に記述するだけです。
|
1 2 3 4 |
.thumbnail-class{ width:100%; height:auto; } |
『 .thumbnail-class 』の部分は実際のclassやidに書き換えて下さい。
希望の表示幅が100%ではない場合も、同様にお好みの幅に書き換えて下さい。
