WordPressの記事をスマホで開いたとき、画像だけが画面からはみ出して困ったことはありませんか。
PCでは問題なく見えていても、スマホでは画像の端が切れたり、ページを横に動かせたりすることがあります。こうした場合は、まずCSSを触るのではなく、画像のサイズとWordPress上の表示設定を確認するのがおすすめです。
この記事では、画像がスマホではみ出す主な原因と、初心者でも確認しやすい順番を解説します。
- スマホで画像がはみ出す主な原因
- 初心者でも確認しやすい4つの順番
- CSSを追加する前に見直したい設定
結論：画像のサイズと表示設定から見直します
画像がスマホではみ出すときは、画像そのものの大きさと、画像ブロックの幅を最初に確認します。
テーマや追加CSSが関係する場合もありますが、最初から複雑な設定を変える必要はありません。まずは次の順番で確認すると、原因を絞り込みやすくなります。
- スマホで表示を確認する画像の端や横スクロールの有無を見ます。
- 画像ブロックを確認する幅や配置、幅広・全幅の設定を見ます。
- 画像サイズを見直す不要な余白を減らし、見せたい部分を絞ります。
- 周りの要素を確認する直らない場合だけ、親ブロックやテーマ側を見ます。
WordPressの画像がスマホではみ出す主な原因
原因は3か所に分けて確認
- 画像そのもの
- 画像ブロック
- 画像の周りにある要素
画像または画像ブロックに大きな幅が入っている
PCで見やすくしようとして画像を大きく表示すると、スマホでは本文の幅より広くなってしまうことがあります。特に、固定の幅を指定した画像や、大きな元画像をそのまま使っている場合は注意が必要です。
「幅広」「全幅」「カスタム幅」の設定が残っている
WordPressのブロックエディターには、通常幅のほかに「幅広」「全幅」などの表示方法があります。アイキャッチや横長の図解には便利ですが、本文中の操作画面やスクリーンショットまで大きく表示すると、スマホで読みにくくなることがあります。
画像の周りにあるブロックが原因になっている
画像だけが悪いように見えても、実際には画像を囲むグループ、カラム、表、カスタムHTMLなどが横幅を広げている場合があります。画像のサイズを直しても改善しないときは、画像の前後や親になっているブロックも確認してみてください。
最初に確認する4つのポイント
1．スマホで実際の表示を見る
公開ページまたはプレビューをスマホで開きます。画像の右端が切れているのか、ページ全体を横スクロールできてしまうのかを確認しましょう。編集画面だけで判断せず、実際の表示を見ることが大切です。
2．問題の画像ブロックを選ぶ
WordPressの編集画面で問題の画像を選択します。ブロックツールバーや右側の設定で、幅広・全幅・カスタム幅などが使われていないかを確認します。
3．画像そのもののサイズを見直す
操作画面のスクリーンショットは、情報量が多いほど大きく表示したくなります。しかし、スマホでは画像を大きくするほど読みやすくなるとは限りません。不要なブラウザ部分や余白を切り取り、見せたい場所を絞るほうが効果的なことがあります。
4．幅の設定を通常に戻して確認する
幅広・全幅・カスタム幅を使っている画像は、いったん通常の表示へ戻して確認します。それだけで直る場合は、画像ブロックの表示設定が原因だったと考えやすくなります。
CSSの前にWordPressの表示設定を見直す
通常の画像ブロックであれば、まずはWordPressの標準設定から確認できます。画像を本文幅いっぱいに広げるのではなく、本文の流れの中で無理なく読める大きさに収めることが基本です。
LIFE STEP LABでは、本文画像はPCで大きくなりすぎないようにし、スマホでは画面幅に合わせて表示する方針にしています。操作スクリーンショットは内容に応じて500〜600px程度を目安にし、画像内の情報量が多すぎる場合は、画像を大きくするより内容を整理します。
LIFE STEP LABで画像のはみ出しを見直したときのこと
実際にあったこと
「WPFormsでメールが届かないときの対処法」の記事をスマホ実機で確認した際、画像だけが画面からはみ出していることに気づきました。
PCでは問題なく見えていたため、画像そのもののサイズとWordPress上の表示設定を見直し、スマホの画面内に収まるよう調整しました。その後、実機で通常表示できていることを確認しています。
この経験から、本文画像はPCで必要以上に大きくしないこと、スマホでも必ず確認することを公開前のルールに加えました。
設定を見直しても直らないとき
画像ブロックの設定を見直しても改善しない場合は、画像を囲むブロック、テーマの設定、追加CSSなどを確認します。Cocoonを使っている場合も、記事ごとのブロック設定や、画像を囲む要素によって表示が変わることがあります。
CSSは、画像とブロックの設定を確認した後の選択肢です。
何のための指定か分からないCSSを追加すると、別の記事の画像表示へ影響する可能性があります。
修正後はPCとスマホの両方で確認します
修正後は、PC表示だけで終わらせず、スマホでも確認します。
公開前の表示チェック
- 画像の左右が切れていないか
- ページ全体を横スクロールできないか
- 画像内の文字が小さすぎないか
- PCで画像だけが必要以上に目立っていないか
- 画像の前後にある表やブロックも崩れていないか
LIFE STEP LABでも、記事の表示を複数の画面幅で確認し、横方向のはみ出しがないことを確かめています。
まとめ
WordPressの画像がスマホではみ出すときは、まず画像のサイズと表示設定を見直しましょう。幅広・全幅・カスタム幅を確認し、画像そのものを本文内で読みやすい大きさに整えるだけで改善することがあります。
CSSは有効な手段ですが、最初から使う必要はありません。PCとスマホの両方で実際の表示を確認しながら、画像が本文の流れを妨げない状態に整えることが大切です。
公開後に表示崩れへ気づいた場合は、修正後の確認とあわせてブログ記事を公開したあとにやることも確認してください。
コメント