WordPressの表をスマホで見ると、文字が潰れてすごく見づらいんですが、どうすればいいですか？
それなら、表を横スクロールできるようにすれば解決できますよ。
プラグインを入れないとダメですか？
GutenbergのテーブルならCSSを少し追加するだけで対応できます。サンプルコードをご紹介しましょう！
- スマホ表示時にWordPressの表が崩れる原因
- Gutenberg（ブロックエディタ）のテーブルを横スクロール対応にする方法
- iPhone・Androidでも快適に操作できるCSSコード
- SEOや可読性を意識した実装ポイント
目次
実行手順
WordPress管理画面にログインします
「外観」→「カスタマイズ」→「追加CSS」を開きます
（または、使用中テーマのCSSファイルに直接記述します）本記事で紹介するCSSコードを貼り付けます
保存して、スマホ表示で横スクロールできるか確認します
コード
WORDPRESで、スマホ表示時：テーブルを横スクロールを可能にするCSS
ポイント解説
.wp-block-tableをスクロールコンテナにすることで、表全体を横に動かせます-webkit-overflow-scrolling: touch;により、iPhoneでも滑らかな操作感になりますwhite-space: nowrap;を指定することで、横スクロール前提のレイアウトを維持できますGutenberg特有の
has-fixed-layoutを解除することで、列数が多い表にも対応できます
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | /* スマホ表示時：テーブルを横スクロール可能にする */ @media screen and (max-width: 480px) { .wp-block-table { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 横スクロールを促すUI表示 */ .wp-block-table::before { content: "← 横にスクロールできます →"; display: block; font-size: 12px; color: #666; text-align: center; margin-bottom: 6px; opacity: 0.7; } } /* テーブル本体のレイアウト調整 */ .wp-block-table table { table-layout: auto; width: auto; min-width: 100%; } /* Gutenbergの固定レイアウトを解除 */ .wp-block-table .has-fixed-layout { table-layout: auto !important; width: auto !important; min-width: 100%; } /* セル内での不自然な改行を防止 */ .wp-block-table th, .wp-block-table td { white-space: nowrap; } |
参考サイト
WordPress公式ドキュメント（Gutenbergブロック）
MDN Web Docs（CSS overflow）
Web制作者向けブログ各種（スマホテーブルUIの実装事例）
まとめ
WordPressの表は、PCでは問題なくても、スマホでは非常に読みにくくなりがちです。
今回紹介したCSSを使えば、プラグイン不要でスマホ対応の横スクロールテーブルを実装できます。
Gutenbergを使っている方、スマホユーザーの離脱を減らしたい方は、ぜひ導入してみてください。
