ページが崩れてしまう原因のほとんどは、写真のサイズにあります。せっかくキレイな写真を使っていても、ページが崩れていては台無しです。人に与える印象も悪くなり、最悪の場合、ページから離脱する方もいるでしょう。
また、サイズが大きい写真を使うと、ページが崩れる危険性だけではなく、表示速度が遅くなるというデメリットもあります。
とはいえ、原因さえわかれば対処は簡単なので、本記事で紹介する内容を慌てずに対処してみてください。
なぜページが崩れてしまうのか
よくあるのが、写真のサイズを変更せずにそのまま挿入しているケースです。
ホームページに使う写真のほとんどは、下記になります。
- スマホで撮った写真
- デジカメで撮った写真
- フリー素材の画像
使っている写真のピクセル数と、ページに表示するのに必要なピクセル数のバランスが悪いと、表示崩れが起きてしまいます。大きすぎても小さすぎてもよくありません。使う箇所に合わせて、サイズを変更する必要があります。
近頃のスマホはカメラ性能が高くなってきていますよね。例えばiPhoneの場合、iPhone SE以降のフロントカメラは1200万画素（3000✕4000px）になります。
しかし、ホームページの写真には、ここまでの画素数は不要です。記事内に挿入する写真であれば、PCで横幅が1000px、スマホの場合だと600pxもあれば十分。
実際に使う写真とのバランスを見ながら微調整していく必要はありますが、基本的には1000px前後で問題ありません。
ページが崩れてしまったときの対処法
写真のサイズ（ピクセル数）を変更するだけで解決します。大きいサイズを小さくする作業が一般的です。
写真のサイズを小さくするには、下記の方法があります。
- PCで変更する
- ウェブツールを使う
- プラグインを使う
ピクセル数を変更するだけの作業なので、好みの方法を選ぶといいでしょう。サイズを変更した写真を挿入すれば、ページはもとに戻るはずです。なお、注意しておきたいのが、写真を横並びに表示する場合です。
例えば、3枚の写真を横並びにするのであれば、それぞれの横幅を400px、合計で1200pxに調整する必要があります。
もしページ崩れが改善されない場合
画像のサイズを変更したのにページ崩れが改善されないのであれば、下記が原因かもしれません。
- プラグインとの相性が悪い
- ブラウザの不具合
- カスタマイズの影響
プラグインが原因ならすべて停止して確認できますし、ブラウザならキャッシュを削除すれば改善される可能性が高いです。
もしカスタマイズした後に表示崩れが起きたのであれば、間違えてどこかを変更したことが原因です。
どちらにしても、原因を1つ1つ潰していくしかありませんので、自信のない方はむやみに触らず、専門家へ相談してください。
プラグインをつかって解決するのもアリ
ワードプレスなら、「Imsanity」というプラグインを使って、画像サイズを一括で変更できます。
使い方は簡単です。ピクセル数を設定するだけ。これでアップロードする写真を自動で圧縮できます。
すでに記事で使っている写真も一括でサイズ変更できるので、簡単にホームページ全体の写真を統一できますよ。
ちなみにヘッダーや背景など、投稿ページ以外で使う写真は除外できるので、サイズの違う写真を使うときも安心ですね。
プラグインを使えばかなりの時短になるので、手動で写真を圧縮するのが面倒なら、ぜひ使ってみてください。