SWELLで表をスマホで横スクロールさせる設定方法

2026年10月25日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

記事に比較表を入れたら、スマホで見たときに文字がぎゅうぎゅうに詰まって読めないと困っていませんか。私もサーバーの比較表を5列で作ったところ、スマホでは1文字ずつ改行されてしまい、まったく読めない状態になっていました。

この記事では、SWELLで表をスマホで横スクロールさせる設定方法を、初心者向けにわかりやすく解説します。実際に表の崩れを直した体験も交えるので、読みながら進めれば、スマホでも見やすい比較表を作れるようになります。

※これからSWELLを導入する方へ：SWELLは買い切り型のWordPressテーマで、追加費用の心配がありません。この記事を見ながら進めれば、初心者でも迷わずおしゃれなブログを作れます。

➡️【公式】SWELLの公式サイトはこちら

デザインに悩む時間を減らして、記事作りに集中できます。

ニャフィ

スマホで表を見ると、文字がつぶれて読めないのにゃ…

たいがブログ

せっかくの比較表が読めないのは、もったいないですよね。

ニャフィ

難しいプラグインを入れないとダメなのかにゃ？

たいがブログ

SWELLの機能だけでできる手順を、5つに分けて解説しますね。

スマホで表が崩れてしまう原因

スマホで表が読みにくくなるのは、パソコン向けの横幅で作った表を、狭い画面に無理やり収めようとするためです。原因を知っておくと、どんな表を作るべきかも見えてきます。

筆者はパソコンの画面だけを見て表を作っていたため、スマホでの崩れに長い間気づきませんでした。読者の多くはスマホで記事を読んでいるので、表は必ずスマホでも確認することが大切です。

列が多いと画面に収まらない

スマホの画面は横幅が狭いため、4列以上の表は収まりきらないことが多いです。すべての列を詰め込もうとすると、1列あたりの幅がとても狭くなってしまいます。

文字が詰まって読めなくなる

列の幅が狭くなると、文字が何度も改行されて縦に長くなります。その結果、表を見比べることが難しくなり、比較表の役割を果たせなくなってしまいます。

SWELLで表を横スクロールにする方法

SWELLでは、WordPress標準の「テーブル」ブロックに、スマホ向けの便利な設定が追加されています。横スクロールをオンにするだけで、表を崩さずに表示できます。

筆者は以前、表の崩れを直すために表作成プラグイン「TablePress」を試したこともあります。ただ、SWELLでは標準のテーブルブロックだけで十分だったので、プラグインを増やさずに済みました。

テーブルブロックにSWELLの設定が追加されている

テーブルブロックを選ぶと、右側の設定パネルにSWELL独自の表示設定が表示されます。ここでスマホでの表示方法を切り替えられるのが特徴です。

1列目を固定すると比較しやすい

横スクロールにすると、1列目の項目名が画面から消えてしまうことがあります。設定で1列目を固定しておけば、スクロールしても何の比較かがすぐにわかります。

STEP

テーブルブロックで表を作る

記事の編集画面で「＋」ボタンを押し、「テーブル」を追加します。列数と行数を入力して表を作り、比較したい内容を入れていきましょう。

STEP

ブロックの設定パネルを開く

作った表をクリックして選び、右側の「ブロック」タブを開きます。設定パネルが表示されない場合は、右上の歯車アイコンをクリックしましょう。

STEP

横スクロールの設定をオンにする

設定パネルの中にあるスクロールに関する項目で、横スクロールを有効にします。これでスマホでは表を左右にスワイプして見られるようになります。

STEP

1列目の固定を設定する

比較表の場合は、1列目を固定する設定もオンにしておきましょう。項目名が常に表示されるので、スクロールしても比較しやすい表になります。

STEP

実際のスマホで表示を確認する

プレビューだけでなく、実際のスマホでも記事を開いて確認します。筆者はプレビューだけで済ませて、実機では見え方が少し違ったことがあるので注意しましょう。

スマホでも見やすい表を作るコツ

横スクロールの設定に加えて、表そのものの作り方を工夫すると、スマホでもぐっと読みやすくなります。ここでは、実際に効果があったコツを紹介します。

筆者は横スクロールにしたものの、読者がスクロールできることに気づかないという問題がありました。そこで表の上に「横にスクロールできます」とひと言添えたところ、比較表がしっかり読まれるようになったんです。

列の数を3列程度に絞る

横スクロールが使えるとはいえ、列が多すぎると全体を見比べにくくなります。比較する項目を厳選して3列程度に絞ると、スクロールなしでも読める表になります。

セルの文字を短くする

セルの中に長い文章を入れると、表が縦に伸びて読みにくくなります。「◎」「○」「△」などの記号や短い言葉を使うと、ひと目で違いが伝わる表に仕上がります。

スマホで見やすい表のチェックポイント

列の数を必要なものだけに絞っている
セルの文字が短くまとまっている
横スクロールできることを表の上で伝えている
実際のスマホで表示を確認している

よくある質問

横スクロールに読者は気づいてくれますか？: 気づかない読者もいるため、表の上に「横にスクロールできます」とひと言添えるのがおすすめです。小さな工夫で、表がしっかり読まれるようになります。
パソコンでも横スクロールになりますか？: 横スクロールは、主にスマホなど画面の狭い端末で働く設定です。念のため、パソコンでも表がきれいに表示されているか確認しておきましょう。
表をたくさん入れると記事が重くなりますか？: 表は文字が中心なので、表示速度への影響はほとんどありません。ただし、セルの中に大きな画像を入れる場合は、圧縮してから使うようにしましょう。
表の色や見た目を変えたいときは？: テーブルブロックの「スタイル」でストライプを選ぶと、1行おきに色が付いて読みやすくなります。セルの背景色も設定パネルから変更できます。