WordPressの比較表がスマホではみ出すときは、まず文章を折り返して幅に収めるか、表の部分だけを横スクロールにするかを決めます。2〜3列の短い比較なら折り返しから試し、項目が多く、同じ行を見比べたい表なら横スクロールを検討します。列数は目安で、最終的にはセルの内容で判断します。
この記事では、架空の比較表を使って両方の方法を確かめました。WordPressのどこにクラス名・CSS・HTMLを入れるかと、直らないときに見る場所まで説明します。
スクショは、この記事用のHTML/CSSをChromiumで表示した実画面です。WordPress管理画面の操作画面ではありません。管理画面の案内は2026年10月13日に確認した公式資料に基づきます。
先に完成形を決める：折り返しと横スクロール
- 折り返す：「項目・サービスA・サービスB」程度で、文章を数行に分ければ読める表。ページを左右に動かさずに比べられます。
- 表だけ横スクロール：容量・人数・出力形式・保存期間など、横に並べた項目が多い表。列を無理に細くせず、右端まで移動して読みます。
- 表を分ける：折り返すと1文字ずつ縦に並ぶ、横に長すぎて比較する項目を見失う場合。「費用」「機能」など目的ごとに表を分けます。
文字を小さくして押し込んだり、ページ全体にoverflow-x: hiddenを付けて隠したりする前に、表の幅と内容を見直してください。見切れた条件や右端のボタンを、読者が確認できる状態にするのが目的です。
まず確認：Cocoonの機能ですでに横スクロールできないか
Cocoonでは、公式マニュアルに「Cocoon設定」→「本文」→「レスポンシブテーブル」→「横幅の広いテーブルは横スクロール」という設定が案内されています。使っている画面で項目を確認し、すでに表だけを横に動かせるなら、同じスクロール用の囲みを追加する必要はありません。Cocoon公式：横スクロール対応の設定
このテーマ設定は複数の表に関わります。変更する場合は、対象の表に加えて別の記事の表も確認します。表示名や位置はバージョンで異なることがあるため、見つからないときは現在のテーマの説明を優先してください。
以下は、少ない列の表を折り返したい場合と、個別の表に自分で横スクロールを付ける場合の手順です。TablePressなどのプラグインが作る表は、HTMLや設定が異なるため、そのプラグインの機能を先に調べます。
方法1：テーブルブロックの文字を折り返す
1．対象の表にクラス名を付ける
- 投稿の編集画面で、直したいテーブルブロックを選びます。新しく作るなら「＋」から「テーブル」を追加します。
- 右側の設定を開き、「投稿」ではなく「ブロック」の設定を表示します。
- 「高度な設定」にある「追加CSSクラス」へ
katasuke-table-wrapと入力します。先頭の.は付けません。既存のクラスがある場合は、半角スペースで区切って追加します。 - 列名がある表なら「ヘッダーセクション」を有効にし、「項目」「サービスA」「サービスB」などを見出し行に入れます。
「追加CSSクラス」は表に名前を付ける欄です。CSSのコードを丸ごと入れる欄とは別です。公式のテーブルブロックと高度な設定には、設定項目の画面例もあります。
なお、「表のセル幅を固定」は、各列を同じ幅にするための設定です。width: 720pxのように表全体を大きな固定幅にすることとは違います。
2．CSSを「サイト用の追加CSS」へ入れる
Cocoonのようなクラシックテーマでは、管理画面の「外観」→「カスタマイズ」→「追加CSS」を開きます。すでに記述がある場合は残し、末尾へ次のCSSを追加してください。<style>タグは不要です。
ブロックテーマの場合は、「外観」→「エディター」→「スタイル」→「…」→「追加CSS」が公式に案内されている入口です。ここで使うのは、セレクターと波括弧を含むコードを入力できるサイト全体用のCSS欄です。ブロック個別の「追加CSS」欄と混同しないようにしてください。項目が表示されない場合は、利用中のテーマと編集権限を確認します。クラシックテーマの公式案内／ブロックテーマの公式案内
/* このクラスを付けたテーブルブロックだけが対象です。 */
.wp-block-table.katasuke-table-wrap {
width: 100%;
max-width: 100%;
margin-inline: 0;
}
.wp-block-table.katasuke-table-wrap table {
width: 100%;
min-width: 0;
table-layout: fixed;
}
.wp-block-table.katasuke-table-wrap th,
.wp-block-table.katasuke-table-wrap td {
white-space: normal;
overflow-wrap: anywhere;
}CSSを保存し、対象記事のプレビューを開いて確認します。追加CSS画面の保存ボタンが「公開」と表示されていても、それはCSSの反映です。記事を公開する操作とは別なので、記事は下書きのまま試せます。
このコードは、katasuke-table-wrapを付けたテーブルブロックだけを対象にしています。table { ... }だけの指定へ書き換えると、ほかの表まで変わってしまいます。
3．修正前後で、右端の列と長いURLを見る
次のサンプルは「項目・メモA・メモB」の3列です。修正前は表の固定幅と改行禁止によって右端が画面外へ出ています。
固定幅・改行禁止を解除し、上のCSSを適用すると、同じ内容を列の中で折り返せます。長いURLもセルから飛び出さなくなりました。
width: 100%は親の幅に合わせる指定、table-layout: fixedは列幅の決め方です。white-space: normalで通常の折り返しを許可し、overflow-wrap: anywhereで長い英数字やURLにも必要な分割を許可しています。MDN：table-layout／white-space／overflow-wrap
本番の表にstyle="width:720px"などが直接書かれている場合は、その固定幅も編集元で見直します。上のCSSを貼るだけで、すべてのテーマの強い指定を上書きできるわけではありません。
方法2：列が多い表だけを横スクロールにする
6列の比較を画面幅へ押し込むと、短い見出しまで細かく折り返されることがあります。ここでは列を残し、表の外側の囲みだけにスクロールを付けます。テーマ側ですでに横スクロールできる表には、重ねて追加しません。
1．「カスタムHTML」ブロックへ表を入れる
まず下書きで「＋」から「カスタムHTML」を追加し、HTMLの編集欄へ次を貼ります。「コード」ブロックはHTMLを文字として表示するため、この用途では選びません。バージョンによっては「HTMLを編集」などのボタンから編集欄を開きます。WordPress公式：カスタムHTMLブロック
この表のサービス名・数値は表示練習用の架空データです。まずそのまま表示を確認し、その後で自分の比較項目へ置き換えます。
<p id="plan-table-help">横に動かすと、右端の列まで読めます。</p>
<div class="katasuke-table-scroll"
role="region"
aria-label="架空のプラン比較表"
aria-describedby="plan-table-help"
tabindex="0">
<table>
<caption>架空のプラン比較（表示練習用）</caption>
<thead>
<tr>
<th scope="col">プラン</th>
<th scope="col">保存容量</th>
<th scope="col">メンバー</th>
<th scope="col">書き出し</th>
<th scope="col">履歴</th>
<th scope="col">向く作業</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">メモ</th>
<td>1 GB</td>
<td>1人</td>
<td>CSV</td>
<td>7日</td>
<td>一人で記録する</td>
</tr>
<tr>
<th scope="row">共有</th>
<td>10 GB</td>
<td>5人</td>
<td>CSV・PDF</td>
<td>30日</td>
<td>小さなチームで確認する</td>
</tr>
<tr>
<th scope="row">保管</th>
<td>50 GB</td>
<td>10人</td>
<td>CSV・PDF・画像</td>
<td>90日</td>
<td>過去の記録をまとめる</td>
</tr>
</tbody>
</table>
</div>既存の表を使う場合は、その表の<table>から</table>までを、上の同じ部分と入れ替えます。記事全体のHTMLや、別のスクロール用の囲みまで重ねて貼りません。元のテーブルブロックは複製を残して試し、カスタムHTML版が確認できてから重複を整理します。以後、その表の内容はHTML側で編集します。
1ページに複数置く場合は、plan-table-helpをplan-table-help-2など別の名前にし、対応するaria-describedbyも同じ名前へ変えます。
2．追加CSSへ横スクロール用のコードを入れる
方法1と同じサイト用の追加CSSに、次を追加します。方法1のCSSが残っていても、クラス名が違うため、それぞれの表に適用できます。
/* この囲みの中だけを横スクロールにします。 */
.katasuke-table-scroll {
max-width: 100%;
overflow-x: auto;
}
.katasuke-table-scroll:focus-visible {
outline: 3px solid #176d58;
outline-offset: 3px;
}
.katasuke-table-scroll table {
width: 100%;
min-width: 44rem;
table-layout: auto;
border-collapse: collapse;
}
.katasuke-table-scroll th,
.katasuke-table-scroll td {
padding: 0.6rem;
border: 1px solid #bdc9c4;
text-align: left;
vertical-align: top;
white-space: normal;
overflow-wrap: anywhere;
}overflow-x: autoは表を囲むdivに指定しています。min-width: 44remはこの6列のサンプルで読める幅として選んだ値で、すべての表に共通の正解ではありません。行の内容に合わせて調整します。本文の文字まで小さくする必要はありません。
3．指の操作に加えて、キーボードでも確かめる
例のtabindex="0"は、表の囲みへキーボードで移動できるようにする指定です。role="region"とaria-labelで囲みの役割と名前を示し、:focus-visibleで現在位置を見えるようにしています。MDN：スクロール領域のアクセシビリティ
- 記事のプレビューで
Tabを押し、表の囲みに枠が出ることを確認する。 - 右矢印キーで、右側の列を表示できることを確認する。
- もう一度
Tabを押し、表の中のリンクや、表の後の要素へ進めることを確認する。
横に動くのは表の領域だけにします。W3Cも、横方向の移動が必要な表があっても、その例外を周囲の文章まで広げないよう説明しています。W3C：Reflowの解説
CSSを入れても直らないときは、三つに分けて調べる
固定幅が残っている
折り返し方式で表全体が画面より広い場合は、表や親要素のwidth・min-widthを見ます。セル、画像、内側の要素に大きな固定幅が付いていることもあります。横スクロール方式のmin-widthは意図した指定なので、二つの方法を混同しないでください。
文字の折り返しだけが禁止されている
表の枠は収まっているのに文字が飛び出す場合は、セルやその中の要素のwhite-space: nowrapを確認します。長いURLだけが飛び出すなら、overflow-wrapも見ます。今回のサンプルでは、この二つを別々に外して、はみ出しが再発することを確認しました。
書いたCSSが対象へ届いていない
対象セルを右クリックして「検証」を開き、Stylesで追加した指定が表示されるか確認します。クラス名の打ち間違い、親に付けるはずのクラスを別ブロックへ付けたこと、テーマの指定による上書きなどを調べます。Computedで最終的なwhite-spaceや幅を見ると、いま使われている値が分かります。
DevTools内で変えただけでは、WordPressのCSSは保存されません。原因が分かったら編集元を直して保存し、再読み込みして確認します。操作場所を図で確認したい場合は、Chrome DevToolsでCSSが効かない原因を調べる手順へ進んでください。
すぐに!importantを足すのではなく、どの指定が上書きしているかを先に確認します。変更が表示されない場合は、保存の有無を確かめてから、ブラウザや利用中のキャッシュ機能も確認します。
見えることに加えて、何を比べる表なのかも残す
カスタムHTMLの例では、表の名前にcaption、列見出しにth scope="col"、行見出しにth scope="row"を使っています。色を付けたり太字にしたりするだけでは、見出しとデータの関係はHTMLに残りません。W3C：行と列に見出しがある表
これは単純な表の例です。見出しが何段もある表、セルを複雑に結合した表では、別の関連付けが必要になることがあります。見出しを残したまま、比較する内容を減らせないかも検討してください。
最後の確認は、編集画面だけで終えない
- 記事のプレビューを360px・390px程度にして、右端の列まで読めるか確認する。
- 折り返し方式では、文字が1文字ずつ縦に並ぶほど細くなっていないかを見る。
- 横スクロール方式では、表だけが動き、本文全体が横へずれないかを見る。
- キーボードで表へ移動でき、右端へ進み、その後に表から離れられるか試す。
- 文字を拡大し、表の高さが伸びても内容が切れないかを見る。
- 手元のスマホでも、指での横移動と、表に入れたリンクの押しやすさを確かめる。
今回のローカル検証では、Chromiumで320・360・390・768・1200pxの幅を確認しました。修正後はページ全体の横はみ出しがなく、横スクロール方式では矢印キーで移動し、Tabで表の外へ進めています。文字についてはルートの文字サイズを16pxから32pxへ変えた追加検証も行いました。これは実機・別ブラウザ・スクリーンリーダー・ブラウザのズーム操作を検証した結果ではないため、使うテーマと端末でも最後に確認してください。
CSSの幅や余白から順に理解したい場合は、ボックスモデルの説明が次の入口になります。調整のたびに用語で止まり、本で基礎をまとめて学びたい場合は、HTML/CSS入門書の選び方で、作りながら学ぶ本と基礎を確認する本の違いを整理しています。
