WordPressで比較表を作る方法｜テーブルの追加・行列の編集・スマホ表示
標準のテーブルブロックで小さな比較表を作る手順。見出し行、行や列の追加、セル内のリンク、公開後のスマホ確認まで、公式画面を使って案内します。
この記事でわかること
小さな比較表なら、WordPress標準の「テーブル」ブロックで作れます。 この記事では架空の教室の「参加方法」を比べる表を作り、行の追加と公開後の見え方まで確認します。追加プラグインを前提にしない基本操作です。
パソコンのブロックエディターが対象です。画像はWordPress.org公式の英語画面を引用しています。色や枠線は利用しているテーマによって変わります。
1．まず表に入れる情報を小さく整理する
表を追加する前に、何を比べるか決めます。練習例では、横方向を「方法」「準備するもの」「向いている人」、縦方向を参加方法ごとに分けます。
| 方法 | 準備するもの | 向いている人 |
|---|---|---|
| 会場で参加 | 筆記用具 | 対面で質問したい人 |
| オンラインで参加 | 接続できる端末 | 自宅から参加したい人 |
これは構成を説明する架空の例です。実際に対応していない参加方法や、未確認の料金を載せないようにします。金額を比較する表なら、税込・対象プラン・期間など、比較条件も表の近くに明記します。
表は情報の比較に使い、ページを左右に配置するためだけに使わない方が管理しやすくなります。配置のためならカラムなど別のブロックを検討します。WordPress公式のテーブルガイドでも用途を確認できます。
2．編集画面の「＋」からテーブルを入れる
管理画面で「投稿」または「固定ページ」→対象ページのタイトル、と進みます。初めての場合は管理画面への入り方から確認できます。
- 本文の表を入れたい場所をクリックします。
- 「＋」を押し、「テーブル」と検索して選びます。
- 列数と行数の入力欄が出たら、必要な数を指定して作成します。今回の例は三列、本文二行です。
- まず本文の二行に参加方法を入力します。項目名は次の手順で見出し行に入れます。
公式画像の「Table」がテーブルです。空の段落で /table と入力して候補から選ぶ方法もあります。作成後はセル、つまり一つずつのマスをクリックして文章を入力します。
画面上部に表専用のツールバーが出れば、表が選べています。画像は二列の公式サンプルなので、今回の三列の練習表とは列数が異なります。
3．項目名は見出し行へ入れる
表を選択した状態で、右上の設定ボタンを押し、「ブロック」のタブを開きます。
「Header section」が見出し行です。オンにすると表の上部に見出し用の行を追加できます。今回の例では、そこに「方法」「準備するもの」「向いている人」を入力します。
見出し行を設定せず、本文一行目を太字にするだけでは、表の構造は同じになりません。項目名がある表は、見出し用の行として設定すると意味を整理できます。すでに本文の一行目に項目名を入れた場合は、重複しないよう内容を移して確認します。
同じ設定欄の「Fixed width table cells」は、列幅を均等にする設定です。オン・オフで文章の収まり方が変わるので、長い説明がある列はプレビューを見て判断します。
4．行や列を増やすときは、基準になるセルを選ぶ
ツールバーの格子状のボタンが「テーブルを編集」です。先に、挿入したい位置の近くにあるセルをクリックしてから開きます。
| 画像内の表示 | 操作 | どこに追加・削除されるか |
|---|---|---|
| Insert row before | 行を前に挿入 | 選んだ行の上 |
| Insert row after | 行を後に挿入 | 選んだ行の下 |
| Delete row | 行を削除 | 選んだ行 |
| Insert column before | 列を前に挿入 | 選んだ列の左 |
| Insert column after | 列を後に挿入 | 選んだ列の右 |
| Delete column | 列を削除 | 選んだ列 |
例えば「録画で学ぶ」を三つ目の方法として足すなら、最後の行のセルを選び、「行を後に挿入」を使います。行を削除する操作は、その行の内容も消すため、選択位置を確かめてから実行します。
5．詳しい説明は、表の下やリンク先へ分ける
一つのセルに長文を詰め込むと、スマホで縦に長くなります。表では短い違いを示し、条件や例外は表の下に説明します。
詳細ページへのリンクを入れる場合は、セルの「会場での参加方法を見る」などの文字を選択し、鎖の形のリンクアイコンからURLを設定します。操作は公式のリンク編集ガイドで確認できます。
「詳細」だけのリンクを各行に繰り返すより、「会場参加の詳細」「オンライン参加の詳細」のように対象を含めると、どこへ進むか伝わります。目立つ申込ボタンが必要なら、表の外へボタンブロックを追加する方法もあります。
6．保存し、スマホで右端まで読めるか確かめる
変更を保存してプレビューを開きます。さらに公開ページをスマホで開き、表の右端と最後の行まで確認します。テーマによって、横スクロール・折り返し・列の幅が変わります。
| 見え方 | 直し方の候補 |
|---|---|
| 文字が一文字ずつ縦に並ぶ | 列数を減らす、説明を短くする、列幅設定を見直す |
| 右側の情報が見えない | 横スクロールできるか確認し、できなければ表を小さく分ける |
| 見出しと内容の対応がわかりにくい | 見出し行と項目名を確認する |
| 似た条件を比較していない | 対象プランや単位をそろえる |
| リンクが押せない・行き先が違う | 公開ページで一つずつ開き、URLを確認する |
横スクロールできる表にした場合も、読み手が気づけるよう「表は横にスクロールできます」と近くに案内します。ただし実際に動くことを確認してから記載してください。
文字を画像にして表の代わりにすると、後からの更新や検索、読み上げで困ることがあります。小さな表なら、まずテキストのまま情報を減らして読みやすくする方法を試します。スマホ公開前チェックも確認できます。
公式資料確認日：2026年10月14日。比較例とレイアウトを見直す順序は編集部の提案です。掲載画像は公式参考画面の引用で、すべてのテーマで同じ表示になるものではありません。
出典・確認情報
確認日：2026-10-14 ／ 公式情報の要点と編集部の提案を整理しています。価格・機能・条件は変更される場合があります。
WordPress公式：テーブルブロックWordPress公式：編集画面WordPress公式：リンクの編集
