スマホで画像が一瞬だけ大きく表示されてしまう場合のCSS修正方法

2018年7月22日2019年1月16日

WordPressのテーマを使って作成している時によく起こる現象です。作成したページをスマホで見ると、アイキャッチ画像が一瞬ビヨーンと伸びたように大きく表示されて、それから100%幅表示になる。100%で表示するのはわかっちゃいるけど、激しく遅い…という感じ。一瞬の事なので、気にならない方も多いと思いますが、こういうの気になっちゃうタチなので、直したいと思います。

一瞬大きく表示される原因

直接的な原因としては、レスポンシブデザインのテーマでmax-widthしか指定されていない場合に起こっているようです。幅がwidthで指定されていないと、画像の原寸からmax-widthで指定したサイズに変化するのが激しく遅く、人間の目にも見えてしまう。なぜだかは知りません♪

CSSの修正方法

ここまで読むまでもなく、おわかりかもしれませんが、修正方法です。

max-widthしか指定されていない画像にwidthを指定してあげます。これで少なくとも体感できるようなタイムラグは無くなりました。

例えばWordPressのアイキャッチ画像が一瞬伸びたように見えてしまう場合は、アイキャッチ画像のidかclassを調べて、使用中のテーマのメインのCSS(だいたいstyle.css)かカスタマイザーの追加CSSに、下の様に記述するだけです。

『 .thumbnail-class 』の部分は実際のclassやidに書き換えて下さい。

希望の表示幅が100%ではない場合も、同様にお好みの幅に書き換えて下さい。

 

関連のある記事

Flexを使用した間隔(マージン)をとった横並びレイアウトの指定方法まとめ【CSS初心者向け】

Flexを使用した間隔(マージン)をとった横並びレイアウトの指定方法まとめ【CSS初心者向け】

記事を読む

CSSでobject-fitを使わずに特定の縦横比に画像をトリミングする方法

CSSでobject-fitを使わずに特定の縦横比に画像をトリミングする方法

記事を読む

游ゴシックがIEで上にずれる時のCSSでの対応方法

游ゴシックがIEで上にずれる時のCSSでの対応方法

記事を読む

埋め込みグーグルマップの縦横比を固定してレスポンシブ対応にする方法

埋め込みグーグルマップの縦横比を固定してレスポンシブ対応にする方法

記事を読む

CSSでセンタリングした複数行テキストの改行位置を揃えて綺麗に見せる方法

CSSでセンタリングした複数行テキストの改行位置を揃えて綺麗に見せる方法

記事を読む


目次へ
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages