ACQUA JOURNAL
WordPressの表がスマホで切れるとき｜表ブロック・横スクロール・公開表示の確認
スマホで比較表の右端が消える、文字が細かすぎる、画面全体が横へ動く。WordPressの表の問題は、原稿の列構成、保存したブロック、テーマの表示、操作を分けて確認します。文字を小さくして画面へ押し込むだけでは、情報を読める状態になりません。
この記事は、表を更新する企業と実装を担う制作会社向けです。レスポンシブ設計の全体とは分け、既存の表一つから入力・表示元・左右端・修正範囲を特定する手順を説明します。
1. 切れている場所と、読めない情報を記録する
対象URL、表の見出し、端末、画面幅、どの列が読めないかを控えます。編集画面のプレビューと、ログインしていない人が見る公開ページを別に確認してください。
ページ全体と、表の領域の動きを分ける
本文まで横へはみ出しているのか、表の中だけ横へ動けるのかを見ます。右端に列があるのに動かせない、横へ動くが行見出しを見失う、注記が切れる、といった症状を具体化します。
最初から全表のCSSを直さず、代表的な一表を選びます。同じ構成の他記事でも起きるなら、共通スタイルの候補として使用先を調べます。
2. 表の情報構造を保って、列と文章を整理する
何を行と列で比較する表かを確認します。関係を保つ必要のない長文は、表の前後へ移す方法があります。条件や注意事項を削ってスマホだけ短くするのではなく、比較に必要な情報を残してください。
WordPressの表ブロックの説明は、表をデータの整理へ使い、ページの段組みは別のブロックへ分ける考え方を示しています。表を配置のために使っている場合は、原稿構造の見直しも検討します。
| 表の状態 | 先に検討すること |
|---|---|
| 少数項目の説明 | 縦の文章や一覧へ整理できるか |
| 列同士の比較が必要 | 表の領域で横に読めるか |
| 一セルが長文 | 共通条件を表の近くへ移せるか |
| 見出しが不明 | 行・列と値の関係が分かるか |
修正前の原稿と公開表を保管します。価格や契約条件などの正式な内容は、表示改善を理由に担当者が推測で直さないでください。
3. 表ブロックの保存値と設定を確認する
対象投稿を開き、どの表ブロックか、独自HTMLか、追加機能が生成する表かを確認します。保存した本文と公開HTMLが同じ構造を持つかを実装担当へ照合してもらいます。
固定幅の列と、内容に応じる列を比べる
公式説明には固定幅セル、ヘッダー、フッター等の設定があります。固定幅は列を均等に扱う設定で、スマホへ必ず読みやすく収める保証ではありません。版や使用ブロックで位置が異なるため、現在の設定を読み取ってください。
幅広・全幅の配置が使えるかもテーマに依存します。エディターの見た目だけで採否を決めず、長い語句、金額、改行、リンクを含む実原稿を公開相当の画面で試します。
4. 横に読む必要がある場合は、表の領域へ限定する
列の関係を保つため横方向の表示が必要なら、表を囲む領域で横に動ける構成を検討します。周囲の本文や相談ボタンまで横に押し出さないことが条件です。
W3Cのリフローの解説では、意味のために二次元の配置が必要な表等の例外を説明しています。この例外を、ページ全体のはみ出しを許す根拠として扱いません。
横に続くことが分かる案内を置き、必要な操作方法で端まで到達できるか試します。独自CSSを加える場合は対象と保守する場所を決め、別の表や共通部品への影響を確認します。
5. 文字の縮小より、読める内容と操作を保つ
表が収まっても小さい文字や薄い配色では比較できません。列幅、セル内余白、折り返し、見出しの扱いを試し、原稿が増えても意味が分かる構成にします。
右端の条件と、注記まで確認する
右端だけに例外条件や申込みリンクがある表では、そこまで読めることが必要です。横へ動かした後に行との対応を判断できるか、注記が別の領域で切れないか、リンクを押せるかを見ます。
文字を拡大しても内容を欠落させないようにします。画像化した表へ置き換えるだけでは、文字の拡大や情報の関係を解決できない場合があります。必要な説明は本文でも伝えてください。
6. 個別の表と、テーマ・追加機能の影響を分ける
一記事だけの問題か、同じブロックの全表かを比べます。独自の固定幅、余計な貼り付け書式、共通のCSS、追加機能の出力を区別し、変更する層を特定します。
共通CSSを変える場合は、比較表、料金表、資料一覧など影響する使用先を確認します。特定の表に合わせた一律設定で、別の表が読めなくなることを避けてください。
元の本文・設定・関連ファイルを保存し、差分と戻す範囲を揃えます。公開後に他者の変更が入った場合、サイト全体を巻き戻すのでなく、当該修正の範囲で戻せるかを確認します。
7. 狭い幅、切り替え前後、操作で検収する
スマホ、PC、配置が変わる途中の幅で、左端と右端、表の前後の本文を見ます。指での横操作と、キーボード等の必要な操作方法を試してください。
検収は、幅が収まることだけで終えない
見出しと値の関係、文字の大きさ、横に続く案内、端までの移動、リンク、文字拡大を記録します。自動のはみ出し検査が通っても、文字が極端に小さければ読めない問題は残ります。
公開後は編集値と公開HTMLを照合し、読者の環境でも表示と動作を確認します。企業サイトのアクセシビリティ改善へもつなげ、表だけの確認をサイト全体の適合保証に読み替えません。
8. 自社の原稿整理と、実装の依頼を分ける
自社では表の目的、正式原稿、欠けている情報、対象URLと望ましい状態を用意します。企業向けWeb支援には記事の更新と保守、制作会社向け実装支援にはブロック・テーマ・CSSの調査と必要な実装を分けて相談できます。
相談窓口へ、表の場所、発生する端末、原稿、変更できる範囲を伝えてください。料金・期間は、使用先と検収の範囲を確認して決めます。
解決状態は、合意した表の情報を端末ごとに読め、列と条件の対応が分かり、担当者が更新後も同じ手順で確認できることです。表を縮めたこと自体を成果にしません。
一次資料の確認日：2026年10月8日。
