記事の写真の横で文章が読みにくい？スマホでの並べ方と直し方
Webサイト改善 · 記事の写真と文章の配置
写真の横の文章がスマホで一文字ずつ折り返されるなら、写真と隣の段落を一組で確認します。横に読む幅が残らない場合は、狭い画面では写真と関連段落を上下に置き、読む順を整えます。
写真付き記事を更新する担当者へ、WordPressで見る配置設定、記事ごとの指定と共通レイアウトの違い、保存・公開後の確認を説明します。広い画面で読める回り込みまで一律になくす必要はありません。
写真と文章を一組で見て、狭い幅の読む順を決める
最初に見るのは、写真そのものの大きさだけでなく、その横に段落を何行で読める幅が残っているかです。写真を小さくした分だけ読みやすくなるとは限りません。写真を理解できる大きさと、説明文を続けて読める場所の両方を残します。
「回り込み」は、画像の横へ文章が流れる配置です。PCで写真の右に十分な幅があっても、狭い画面では写真と余白が場所を取り、段落が細い帯になることがあります。文字を小さくして押し込む前に、画像と段落の並べ方を見直してください。
同じ題材の二つの下書きを比べる
設備点検会社のWeb担当者が、点検口の写真と確認手順の位置を比べます。
横並び案：写真を本文の左側、段落を写真の右側に置きます。狭い幅では、文章が一文字ずつ折り返される場合があります。
縦に読む案：写真を関連段落の上、段落を写真の下に置きます。横に残る幅へ段落を押し込まない設計案です。
写真のどちら側に、本文を読む幅が残っていますか？写真の左右と上下に注目し、説明文が続く場所を読みます。
横並びで段落が細くなるなら、写真の下に説明を置く案を検討します。図の二つは別の下書きです。
写真の位置は、説明を読む順番と合わせる
写真を見てから説明を読む内容なら、狭い幅では写真の後に関連段落を続けます。説明を先に読む必要がある内容なら、その段落の後へ写真を置く選び方もあります。縦に読む案は「写真が上、段落が下」です。別の順番を選ぶときは、その記事の説明に合うかを確かめます。
写真の下に付く短い説明がキャプションです。写真の名称や補足を付ける欄と、本文として読む関連段落は分けて考えます。長い手順を画像の中へ焼き込んだり、本文の代わりに小さいキャプションへ移したりして、読みづらさを隠さないようにします。
一般的な画面幅への対応や、ページ全体の見直しは、ホームページのスマホ対応の進め方で確認できます。この記事では、その中でも記事写真と隣の段落の関係に絞ります。
WordPressで画像の寄せ方と親の配置を確認する
最初に、写真が単独の画像ブロックなのか、カラムなどの中にあるのかを確認します。見た目が横並びでも、画像の左右寄せと、親のブロックで二列にした配置では、確認する設定が違います。
画像ブロックの左寄せ・右寄せと大きさを見る
- 困っている写真を選ぶ。
対象の記事を編集画面で開き、写真のブロックを選択します。必要ならブロックの一覧表示を使い、隣の段落と同じ記事内の要素かを見ます。別の画像やテンプレート全体を対象にしないようにします。
- 画像の配置と幅を確認する。
画像のツールバーで左寄せ・右寄せなどの配置を見ます。左右寄せで文字を回り込ませているなら、画像の幅と、横に残った段落の幅を一緒に確認します。広幅・全幅など利用できる選択肢はテーマによって異なります。
- 上下に読む案をプレビューで試す。
画像と関連段落の順番を確かめ、選択できる中央寄せや配置なしなどを候補として、段落が画像の下で読めるかを確認します。項目名を変えただけで、テーマのすべての横並び指定が外れるとは限りません。保存前後の実表示で判断します。
- 広い画面の配置も読み合わせる。
狭い幅で段落を下に続けても、PCで写真が不必要に大きくなったり、関連段落から離れたりしていないかを見ます。広い幅で読める回り込みを残したい場合は、狭い幅の配置と分けて実装できるかを担当者と確認します。
WordPress公式の画像ブロックの説明は、文章を回り込ませるときに画像を段落の上へ置き、小さくして左または右へ寄せる操作を案内し、大きな画像はスマホで文章を読みにくくする場合があると注意しています。逆に、この案内だけで自分のサイトの原因や、最適な写真サイズが決まるわけではありません。
カラムなら「モバイルで縦に並べる」の設定を確認する
写真と段落を別のカラムに入れている場合は、画像だけでなく親のカラムブロックを選びます。公式のカラムブロックには、英語で「Stack on mobile」と呼ぶ、モバイルで縦に並べる設定があり、標準で有効と説明されています。実際の編集画面で設定と表示を確かめます。
この設定は、カラムブロックの仕様です。すべての画像、メディアとテキストのブロック、Elementorなど別のページ作成機能に、同じスイッチがあるとは限りません。親の種類が違う場合は、その機能の設定として調べてください。
写真を消して入れ直す、メディアファイルを削除する、サイト全体の設定を変えることを、最初の確認にはしません。まず対象のブロックと段落の位置を特定します。
一記事の配置か、共通レイアウトの指定かを分ける
一つの記事だけなら、その記事の画像・段落・親ブロックを見ます。複数の記事で同じ細い段落になるなら、投稿に共通するテンプレートやスタイルも調べます。似た症状だけで、テーマや拡張機能を原因と決めないでください。
同じ投稿レイアウトを使い、写真と文章の組がある別の記事も一つ開きます。画像の寄せ方、親の配置、段落に残る幅を比べると、記事ごとに違う指定なのか、共通部分に同じ傾向があるのかを絞れます。別記事が問題なく読める場合でも、全サイトの共通指定が正常と断定する結果ではありません。
毎記事で手直ししているなら、共通部分を調べる
会社ブログについての本人相談には、HelloとElementorの構成で写真の横へ文字を回り込ませたものの、スマホで文字が一文字ずつ並び、記事ごとの調整も負担という報告があります。本人は後に独自コードで整えたと述べていますが、コードの詳細や実際の端末・原因は確認できません。
この報告を「そのテーマなら必ず起きる」「このコードなら直る」という根拠にはしません。自分の環境では、個別の記事で付けた指定と、投稿テンプレート・テーマ・追加スタイルから付く指定を分けて確認します。共通部分を変える必要があるなら、一記事だけを直す操作として扱わず、影響する記事を確かめられる担当範囲で進めます。
制作担当へ、困る場所と希望を伝える
設定を自分で変えられないときは、原因を推測して「CSSを直してください」と頼むより、実際に見えた状態と、読めるようにしたい内容を伝えます。次は依頼文のひな形です。括弧内は、確認できた情報に置き換えてください。
対象：［記事のURLと見出し名］の［写真の内容］と、その隣の段落。
困っている状態：［使ったスマホ・ブラウザー］で開くと、写真の右側の文章が一文字ずつ折り返されます。［確認した日時］の画面を添付します。
希望：スマホでは写真と説明を続けて読みたいです。パソコンの表示も確認し、写真と説明の関係が分かる配置にしてください。［同じ症状を確認した別の記事／未確認］も調べたうえで、変更範囲を相談したいです。
問い合わせるときは、対象URL・困る画面幅・写真と段落を伝え、調査後に変更範囲と費用を確認します。
CSSを調べる場合も、実際の指定を先に見る
開発担当者へ依頼するときは、対象URL、問題の写真と段落、困る画面幅、同じ症状が出る別記事を渡します。ブラウザーの開発者ツールで、対象の幅や余白、画像の回り込み、親要素の配置を読み取り、どの指定が効いているかを確認してから、変更範囲を決めます。
MDNのfloatの説明では、左右に寄せた要素の横へ文章が回り込む関係を説明しています。ただし、実サイトがfloatなのか、Flexboxなど別の配置なのかは調査前には分かりません。floatをなくす指定と、後続の要素を回り込みの下へ置くclearも役割が違います。未確認のまま、全画像へ同じCSSを追加する手順にはしません。
文字の大きさや行間そのものを見直す必要がある場合は、フォント・文字サイズ・行間の決め方へ分けます。写真横の狭い場所へ本文を入れるためだけに、サイト全体の文字を小さくする判断は避けます。
同じ原稿でスマホ・PCと公開先を確かめる
配置を変える前後は、同じ記事・同じ写真・同じ段落で確認します。文章を短くした結果と、画像の並べ方を変えた結果を混ぜず、どこを変えたかを残すと判断しやすくなります。
- 狭い画面で、写真の前から段落の終わりまで読む。
例えば320px・390px相当のブラウザー幅で、写真とその直後の説明を続けて見ます。一文字ずつの折り返し、横へのはみ出し、写真の切れ、写真と説明が離れていないかを確かめます。画像の読み込みが終わってから判断してください。
- PCでも同じ一組を読む。
写真が読める大きさか、段落が長く横へ伸びすぎていないか、上下の間隔で関係を見失わないかを見ます。狭い幅で縦にしたことだけを、すべての幅で読みやすい証拠にしません。
- 保存後の公開先を開く。
編集画面のプレビューと公開URLを区別し、公開側で同じ写真・段落・順番になっているかを確認します。実際に利用するスマホでも対象URLを開きます。PCの幅を狭めた表示は、実機で確かめた結果とは別です。
- 共通指定を変えたら、別の記事も確認する。
同じテンプレートを使う写真付き記事で、写真のない段落や、写真が複数ある箇所を含め、変更した指定の影響を見ます。確認した記事と箇所を残し、全記事での解消や読者の理解を広く認定しないようにします。
W3Cのリフローの解説は、狭い幅でも文章を横と縦の両方向へ移動せず読めることを説明し、320 CSSピクセルの幅などを示しています。内容の意味に二次元の配置が必要なものには例外もあります。この記事の画面幅の確認だけで、実機・拡大表示・サイト全体のWCAG適合を判定するものではありません。
目次や固定した案内が読む場所を隠す問題は、写真の回り込みとは別に見ます。記事の目次の配置と確認方法に沿って、本文へ戻って読めるかを確かめられます。
まとめ：読みにくい一組から、配置と読む順を確かめる
写真横の文章がスマホで細くなるときは、画像の幅だけでなく、隣の段落に残る幅と読む順を見ます。狭い幅では、写真と関連段落を上下に続ける案が候補です。広い幅の回り込みは、写真も文章も読めるなら残せます。
WordPressでは画像の寄せ方と親のブロックを確認し、一記事の指定か共通の投稿レイアウトかを分けます。変更後は同じ原稿でスマホ・PC・公開先を読み、共通指定を触った場合は別記事への影響も確かめます。
写真付き記事の配置や、記事ごとの編集と共通レイアウトの整理を相談したい場合は、対象URLと困る箇所をDREEXYへお知らせください。支援範囲・費用・条件は個別に確認します。記事の写真と文章の配置を相談する
出典と説明例の範囲
画像の左右寄せと回り込みはWordPress.orgの画像ブロック、カラムの狭幅設定はカラムブロック、CSSの役割はMDN、リフローの考え方はW3Cの必要箇所を参照しています。利用中のサイトで同じ機能・指定・原因があるという証明ではありません。
仕事の流れから、顧客との接点まで。
一体で見直す、最初の一歩を。
