パソコンではきれいなのに、スマホで読みにくくなっていませんか？
WordPressの記事がパソコンでは整っていても、スマートフォンでは読みにくいことがあります。公開前に確認したい4項目を紹介します。
パソコンで記事を整えたあと、そのまま公開していませんか。WordPressの編集画面が整っていても、実際のスマートフォンでは見出しが不自然に折れたり、画像内の文字が読めなかったりすることがあります。
この記事では、小さなお店や教室などのWordPressを自分で更新する方へ、公開前に見る4か所と、自分で直せる範囲・相談へ切り替える目安を紹介します。
編集画面と実際のページは分けて確認する
実際のページにはテーマの文字サイズや余白が反映されます。編集画面のモバイル幅で大きな崩れを探し、新しいタブのプレビューで全体を見て、最後に実機で操作します。
画像と横並びに注意する
「メディアとテキスト（Media & Text）」ブロックは、小さい画面で上下に積む設定を利用できます。画像そのものが収まっていても、画像内の細かな説明は読めないことがあります。詳しい説明は本文やキャプションにも残します。
公開前のチェック手順
次の4か所を、同じ順番で確認します。
- 冒頭：最初の2〜3文で、記事の結論や読むメリットが分かるか
- 見出し：3〜4行へ不自然に折れず、見出しだけでも内容を追えるか
- 画像：画面からはみ出さず、画像内の文字を拡大せず読めるか
- 主なボタン：文言が不自然に折れず、指で押して正しいページへ移動できるか
直す前にスマートフォンで画面を撮り、一度に直すのは1〜2か所にすると原因を追いやすくなります。この4か所を整えたあと、メニューやフォームを含む実機操作へ進みます。
4か所を見たあと、実機で操作して確かめること
- ページを再読み込みし、表紙と本文図が表示される
- 最初から最後まで意図せず横へ動かない
- メニューを開閉できる
- ボタンと文字リンクが正しいページへ移動する
- フォームがある場合は必須項目と送信ボタンが見える
端末の文字サイズ設定やブラウザによって見え方は変わるため、編集画面のプレビューだけでは見落とすことがあります。少なくとも自分の端末で一連の操作を行い、問題箇所を画面とページ名で残します。
横並びが細くなったときの直し方
パソコンで「写真＋説明文」を左右に並べると、スマートフォンでは両方が半分ほどの幅へ縮むことがあります。まずMedia & Textブロックの設定にある「Stack on Mobile（モバイルでは縦に並べる設定）」を確認し、写真と文章が上下に並ぶ形へ変えます。日本語の表示名はWordPressの版や環境で異なる場合があります。
横長の料金表や比較表は、列を減らす、1項目ずつ縦のカードにする、重要な結論を本文にも書く方法があります。画面を左右へ動かさないと読めない状態を残さないことが大切です。
よく起きる崩れと直す順番
見出しが3〜4行になるときは、文字サイズを小さくする前に言葉を短くします。「スマートフォンで表示したときに確認しておきたい画像のポイント」なら「画像内の文字を確認する」のように、内容を変えずに簡潔にします。
画像が画面からはみ出すときは、画像ブロックの配置にある「幅広」「全幅」になっていないかを見ます。テーマによっては表示されない場合もあります。コードや幅の数値（px）を触る必要がある場合は無理に変更せず、通常幅へ戻して確認するか相談へ切り替えます。表が原因なら列を減らすか、項目ごとのカードへ分けます。
ボタン文字が3行になる場合は、ボタンを広げる前に文言を短くします。「こちらからお問い合わせフォームへ進んでください」ではなく「相談内容を送る」など、押した後の行動が分かる短い言葉にします。
確認する端末が1台しかない場合
まずWordPressのデスクトップ・タブレット・モバイル表示を切り替え、自分のスマートフォンで実操作します。家族や同僚に別端末を借りられる場合は、同じURLを開いてもらい、画像、メニュー、主要ボタンだけを確認します。
端末数を増やすことより、同じ確認順を繰り返せることが大切です。冒頭、見出し、画像、ボタンの4か所を同じ順で見るようにすれば、公開のたびに確認漏れを減らせます。問題が出た端末名、ブラウザ、ページURL、画面の場所を残しておくと、修正時の再現にも役立ちます。
自分で直せる範囲と相談の目安
文章を短くする、画像を通常幅へ戻す、ボタン文言を短くする作業は、ご自身でも進めやすい範囲です。ヘッダーやメニューなど全ページ共通の場所、複数ページで同じ崩れが出る場合、テーマ・CSS・幅の数値を変える必要がある場合は、設定を重ねて触らず相談へ切り替えてください。
soraha designでは、現在のサイトを活かしたスマートフォン表示の部分修正に対応しています。料金・対応範囲はWordPress修正・更新サービス（https://coconala.com/services/4194765）で確認できます。崩れているページのURL、端末名、気になる箇所の画面をお知らせください。
💬 コメント・いいね