ワードプレスで表を作る方法|初心者でも簡単なテーブルブロック・プラグイン・スマホ対応まで解説
はじめに
ワードプレスで記事や固定ページを作っていると、料金表、比較表、営業時間表、商品スペック表などを入れたい場面があります。文章だけで説明するよりも、表を使ったほうが情報を整理しやすく、読者も内容をひと目で比較できます。
ただし、ワードプレスの表の作り方にはいくつかの方法があります。標準機能のテーブルブロックを使う方法、プラグインを使う方法、ExcelやGoogleスプレッドシートの表を貼り付ける方法などです。
この記事では、初心者でも迷わず作業できるように、ワードプレスで表を作る基本手順から、スマホで見やすくする方法、よくあるトラブルの解決策までわかりやすく解説します。
1. ワードプレスで表を作る方法は3つある
ワードプレスで表を作る方法は、大きく分けて次の3つです。
1つ目は、ワードプレス標準の「テーブルブロック」を使う方法です。追加のプラグインを入れずに使えるため、初心者にもっともおすすめです。
2つ目は、表作成用のプラグインを使う方法です。セル結合、並び替え、検索、細かいデザイン調整などをしたい場合に向いています。
3つ目は、ExcelやGoogleスプレッドシートで作った表をワードプレスに貼り付ける方法です。すでに手元に表データがある場合や、表を頻繁に更新する場合に便利です。
1-1. 初心者はまず標準のテーブルブロックがおすすめ
ワードプレスで表を作るのが初めてなら、まずは標準機能のテーブルブロックを使いましょう。
テーブルブロックは、投稿画面や固定ページの編集画面から簡単に追加できます。行数と列数を指定するだけで表の枠が作られ、あとはセルの中に文字や数字を入力していくだけです。
たとえば、次のような表なら標準のテーブルブロックで十分作れます。
| 項目 | 内容 |
|---|---|
| 営業時間 | 10:00〜18:00 |
| 定休日 | 水曜日 |
| 料金 | 3,000円〜 |
シンプルな情報整理や比較表であれば、プラグインを使わなくても問題ありません。
1-2. デザインやセル結合をしたいならプラグインを使う
標準のテーブルブロックは便利ですが、できることには限りがあります。たとえば、セルを結合したり、複雑な比較表を作ったり、表に検索機能や並び替え機能を付けたりする場合は、プラグインを使うほうが便利です。
代表的な表作成プラグインには、TablePressやFlexible Table Blockなどがあります。
TablePressは、大量のデータを表にまとめたいときに向いています。管理画面で表を作成し、ショートコードを記事に貼り付けて表示できます。
Flexible Table Blockは、ブロックエディター上で表を作りながら、セル結合や背景色などを調整したい場合に便利です。
1-3. Excelやスプレッドシートの表を貼り付ける方法もある
すでにExcelやGoogleスプレッドシートで表を作っている場合は、その表をコピーしてワードプレスに貼り付ける方法もあります。
簡単な表であれば、コピー&ペーストだけでテーブルとして挿入できることがあります。ただし、セルの装飾や罫線、幅などは崩れる場合があるため、貼り付け後に調整が必要です。
また、Googleスプレッドシートを埋め込めば、元のスプレッドシートを更新したときにワードプレス側にも反映しやすくなります。頻繁に更新する一覧表や在庫表、スケジュール表などに向いています。
1-4. 目的別に選ぶ表の作り方早見表
ワードプレスの表の作り方は、目的に合わせて選ぶことが大切です。
| 目的 | おすすめの方法 |
|---|---|
| 簡単な表を作りたい | テーブルブロック |
| 料金表や比較表を作りたい | テーブルブロックまたはプラグイン |
| セル結合を使いたい | プラグイン |
| 並び替えや検索機能を付けたい | TablePress |
| Excelの表を使いたい | コピー&ペースト |
| 更新が多い表を使いたい | Googleスプレッドシート埋め込み |
| スマホで見やすくしたい | 列数を減らす、横スクロール対応にする |
初心者はまずテーブルブロックで作り、必要に応じてプラグインやスプレッドシートの活用を検討するとよいでしょう。
2. ワードプレス標準のテーブルブロックで表を作る手順
ここからは、ワードプレス標準のテーブルブロックを使って表を作る手順を解説します。
テーブルブロックは追加の設定が少なく、初心者でも扱いやすいのが特徴です。基本的な流れを覚えておけば、料金表、比較表、会社概要、営業時間表などさまざまな場面で使えます。
2-1. 投稿・固定ページでテーブルブロックを追加する
まず、ワードプレスの管理画面から「投稿」または「固定ページ」を開きます。新しく記事を作る場合は「新規追加」、既存の記事に表を入れる場合は対象の記事を編集します。
表を入れたい位置で「+」ボタンをクリックし、ブロック検索欄に「テーブル」と入力します。表示された「テーブル」ブロックを選択すると、表を作成する画面が表示されます。
ブロック一覧から探す場合は、「テキスト」や「デザイン」などのカテゴリ内にあることもあります。見つからない場合は、検索窓で「テーブル」と入力するのが早いです。
2-2. 行数と列数を指定して表を作成する
テーブルブロックを追加すると、最初に列数と行数を指定する画面が表示されます。
たとえば、3列4行の表を作りたい場合は、列数に「3」、行数に「4」と入力します。そのあと「表を作成」ボタンをクリックすると、指定したサイズの表が挿入されます。
あとから行や列を追加・削除できるため、最初はおおまかな数で作っても問題ありません。ただし、最初に表の全体像を考えておくと、あとで調整しやすくなります。
料金表なら「プラン名」「料金」「内容」、比較表なら「項目」「商品A」「商品B」のように、列の役割を先に決めておくと作業がスムーズです。
2-3. 表にテキストや数字を入力する
表が作成されたら、それぞれのセルをクリックして文字や数字を入力します。
たとえば、料金表なら次のように入力します。
| プラン | 月額料金 | おすすめの人 |
|---|---|---|
| ライト | 1,000円 | 個人ブログ向け |
| スタンダード | 3,000円 | 小規模サイト向け |
| プレミアム | 5,000円 | 本格運用向け |
セル内では通常の文章と同じように文字を入力できます。必要に応じて太字やリンクの設定も可能です。
ただし、1つのセルに長い文章を入れすぎると、表が横に広がったりスマホで見づらくなったりします。表では短い言葉で要点をまとめ、詳しい説明は表の前後の本文で補足するのがおすすめです。
2-4. 行・列をあとから追加・削除する
表を作ったあとに、行や列を追加したくなることもあります。テーブルブロックでは、あとから行や列の追加・削除ができます。
表をクリックすると、ブロック上部にツールバーが表示されます。そこから表の編集メニューを開き、「行を上に挿入」「行を下に挿入」「列を左に挿入」「列を右に挿入」などを選びます。
不要な行や列がある場合は、「行を削除」「列を削除」を選びます。
行や列を削除すると、その中に入力していた内容も消えるため、削除前に必要な情報が残っていないか確認しましょう。
2-5. ヘッダー行・フッター行を設定する
表を見やすくするには、ヘッダー行を設定するのがおすすめです。ヘッダー行とは、表の一番上にある見出し部分のことです。
たとえば、次の表では「プラン」「料金」「内容」がヘッダー行です。
| プラン | 料金 | 内容 |
|---|---|---|
| Aプラン | 1,000円 | 基本機能のみ |
| Bプラン | 3,000円 | 標準機能あり |
テーブルブロックを選択し、右側の設定パネルから「ヘッダーセクション」をオンにすると、表の上部にヘッダー行を設定できます。
必要に応じて「フッターセクション」も追加できます。フッター行は、合計金額や補足情報を入れたいときに便利です。
2-6. 表の幅や配置を調整する
テーブルブロックでは、表の配置や幅を調整できます。
ブロックを選択すると、上部ツールバーに配置の設定が表示されます。テーマによって使える項目は異なりますが、「幅広」「全幅」「中央寄せ」などを選べる場合があります。
表が本文幅に収まらない場合は、列数や文字量を減らすことも大切です。無理に横幅を広げるよりも、情報を整理してシンプルにしたほうが読みやすくなります。
特にスマホ表示では横幅が限られるため、パソコンで見たときだけでなく、スマホで見たときの幅も意識しましょう。
2-7. 表の背景色や文字装飾を変更する
テーブルブロックでは、テーマやエディターの設定によって、背景色や文字色を変更できます。
表全体を選択し、右側のブロック設定から「色」や「スタイル」を調整します。見出し行だけを目立たせたい場合は、ヘッダー行を設定したうえで背景色を変えると見やすくなります。
また、重要な数字や項目は太字にすると目に留まりやすくなります。
ただし、色を使いすぎると逆に見づらくなります。表のデザインでは、装飾よりも読みやすさを優先しましょう。
3. テーブルブロックでできること・できないこと
ワードプレス標準のテーブルブロックは便利ですが、万能ではありません。どこまで標準機能で対応できるのかを知っておくと、プラグインを使うべきか判断しやすくなります。
3-1. シンプルな比較表や料金表なら標準機能で十分
テーブルブロックは、シンプルな表を作るには十分な機能を備えています。
たとえば、次のような表に向いています。
| 表の種類 | 内容 |
|---|---|
| 料金表 | プラン名、価格、内容を整理する |
| 比較表 | 複数の商品やサービスを比べる |
| 営業時間表 | 曜日ごとの営業時間をまとめる |
| 会社概要 | 会社名、所在地、代表者などを整理する |
| スペック表 | 商品の仕様を一覧にする |
文字量が少なく、列数も2〜4列程度であれば、テーブルブロックだけでも見やすい表を作れます。
3-2. セル結合や細かい装飾は標準機能だけでは難しい
標準のテーブルブロックでは、Excelのようにセルを結合する機能は基本的に使えません。
たとえば、「上の行だけ2列を結合する」「左側の項目を複数行にまたがって表示する」といった複雑な表を作りたい場合、標準機能だけでは対応が難しくなります。
また、セルごとに細かく背景色を変えたり、枠線の太さを調整したりする場合も、テーマや追加CSSの知識が必要になることがあります。
このような表を作りたい場合は、Flexible Table Blockなどの表作成プラグインを使うと作業しやすくなります。
3-3. 並び替えや検索機能は基本的にプラグインが必要
商品一覧、料金比較、データ一覧などでは、読者が表の中身を検索したり、価格順・名前順に並び替えたりできると便利です。
しかし、ワードプレス標準のテーブルブロックには、表の検索機能や並び替え機能はありません。
大量のデータを扱う場合は、TablePressのようなプラグインを使うのがおすすめです。プラグインを使えば、表の管理もしやすくなり、記事ごとに同じ表を使い回すこともできます。
3-4. 表が崩れる原因は列数・文字量・スマホ表示にある
ワードプレスで表を作ったときに「表示が崩れる」と感じる原因の多くは、列数の多さ、セル内の文字量、スマホ表示への未対応です。
特に、5列以上の表や長い文章を含む表は、スマホで横幅が足りなくなりやすくなります。その結果、文字が極端に折り返されたり、ページから表がはみ出したりします。
表を作るときは、次の点を意識しましょう。
| チェック項目 | 対策 |
|---|---|
| 列数が多い | 重要な項目だけに絞る |
| 文字量が多い | 短い言葉にまとめる |
| スマホで崩れる | 横スクロールや縦並びを検討する |
| 表が横に長い | 複数の表に分ける |
3-5. テーブルブロックが向いている表の例
テーブルブロックが向いているのは、情報をシンプルに整理する表です。
たとえば、次のような表です。
| 項目 | 内容 |
|---|---|
| 店名 | サンプルカフェ |
| 住所 | 東京都〇〇区〇〇 |
| 営業時間 | 10:00〜19:00 |
| 定休日 | 火曜日 |
このように、左側に項目、右側に内容を入れる2列の表は、スマホでも比較的見やすく、初心者でも作りやすい形式です。
反対に、複雑なランキング表、商品数が多い比較表、検索や並び替えが必要な表は、プラグインを使うほうが向いています。
4. プラグインを使ってワードプレスに表を作る方法
標準のテーブルブロックで対応できない場合は、表作成プラグインを使いましょう。プラグインを使うことで、セル結合、検索、並び替え、デザイン調整などがしやすくなります。
4-1. 表作成プラグインを使うメリット
表作成プラグインを使うメリットは、標準機能よりも自由度の高い表を作れることです。
主なメリットは次のとおりです。
| メリット | 内容 |
|---|---|
| セル結合ができる | 複雑なレイアウトに対応しやすい |
| デザインを調整しやすい | 背景色、罫線、余白などを変更しやすい |
| 表を管理しやすい | 複数の記事で同じ表を使える |
| 検索・並び替えが使える | データ量の多い表に向いている |
| CSVを活用できる | 外部データを取り込みやすい |
特に、商品比較表やランキング表、料金プラン一覧などを本格的に作りたい場合は、プラグインの利用を検討しましょう。
4-2. TablePressで本格的な表を作る手順
TablePressは、ワードプレスで表を作るプラグインとしてよく使われています。管理画面で表を作成し、ショートコードを投稿や固定ページに貼り付けて表示します。
基本的な手順は次のとおりです。
まず、ワードプレス管理画面の「プラグイン」から「新規追加」を開きます。検索欄に「TablePress」と入力し、プラグインをインストールして有効化します。
有効化すると、管理画面にTablePressのメニューが追加されます。「新しいテーブルを追加」を選び、表の名前、行数、列数を入力して作成します。
作成画面でセルに文字や数字を入力し、必要に応じてオプションを設定します。保存するとショートコードが発行されるので、そのショートコードを記事内に貼り付ければ表を表示できます。
TablePressは、データ量が多い表や、複数ページで同じ表を使いたい場合に便利です。
4-3. Flexible Table Blockでセル結合や装飾をする手順
Flexible Table Blockは、ブロックエディター上で柔軟に表を作りたい場合に便利なプラグインです。
標準のテーブルブロックよりも細かい調整がしやすく、セル結合や背景色の変更などにも対応しやすいのが特徴です。
使い方の流れは、まずワードプレス管理画面の「プラグイン」から「Flexible Table Block」を検索し、インストールして有効化します。
投稿や固定ページの編集画面でブロック追加ボタンをクリックし、「Flexible Table」を選びます。行数と列数を指定して表を作成し、セル内にテキストを入力します。
セルを選択すると、結合や装飾の設定ができます。見出し行だけ背景色を変えたり、特定のセルを強調したりしたいときに便利です。
4-4. 比較表・ランキング表に向いているプラグイン
商品比較やランキング記事を作る場合は、通常の表だけでなく、ボタン、評価、画像、価格などを見やすく配置できるプラグインが役立ちます。
比較表やランキング表では、読者が「どれを選べばいいか」をすぐに判断できることが大切です。
たとえば、次のような項目を入れると比較しやすくなります。
| 項目 | 内容 |
|---|---|
| 商品名 | 比較対象の名前 |
| 価格 | 税込価格や月額料金 |
| 特徴 | 他の商品との違い |
| おすすめ度 | 星や点数で表現 |
| 公式リンク | 詳細ページへの導線 |
アフィリエイト記事や商品レビュー記事では、表の見やすさがクリック率や成約率に影響することもあります。表が複雑になる場合は、比較表に強いプラグインやテーマ独自の表機能を活用しましょう。
4-5. プラグインを選ぶときの注意点
表作成プラグインを選ぶときは、機能の多さだけで判断しないことが大切です。
確認したいポイントは次のとおりです。
| 確認項目 | 理由 |
|---|---|
| 更新されているか | 古いプラグインは不具合や安全面が心配 |
| 使いやすいか | 操作が難しいと更新が面倒になる |
| スマホ対応しているか | 表が崩れる原因になる |
| 必要な機能があるか | セル結合、検索、並び替えなどを確認 |
| サイト表示が重くならないか | 読み込み速度に影響することがある |
プラグインを入れすぎると、管理が複雑になったり、サイトの表示速度に影響したりする場合があります。必要な機能を明確にしてから選びましょう。
4-6. プラグインを使わずに済むケース
すべての表にプラグインが必要なわけではありません。
次のようなケースでは、標準のテーブルブロックで十分です。
| ケース | 理由 |
|---|---|
| 2〜4列程度のシンプルな表 | 標準機能で作りやすい |
| セル結合が不要 | 複雑なレイアウトが必要ない |
| 検索や並び替えが不要 | 読者がそのまま読めば理解できる |
| 表の数が少ない | 管理画面で一括管理する必要がない |
| デザインにこだわりすぎない | テーマの標準デザインで十分 |
初心者の場合、最初からプラグインを入れるよりも、まずテーブルブロックで作ってみるのがおすすめです。標準機能で足りないと感じたタイミングで、プラグインを検討しましょう。
5. スマホでも見やすい表にする方法
ワードプレスで表を作るときに特に注意したいのが、スマホ表示です。パソコンではきれいに見えていても、スマホでは文字が詰まったり、表が横にはみ出したりすることがあります。
現在はスマホでサイトを見る読者が多いため、表もスマホ前提で設計することが重要です。
5-1. スマホで表が見にくくなる理由
スマホで表が見にくくなる主な理由は、画面幅が狭いからです。
パソコンでは横幅に余裕があるため、5列や6列の表でも表示できます。しかしスマホでは横幅が限られているため、列数が多い表は収まりきりません。
また、セル内の文字量が多いと、1文字ずつ細かく折り返されたり、行の高さが極端に長くなったりします。
スマホで表が見にくくなる原因は、主に次の3つです。
| 原因 | 内容 |
|---|---|
| 列数が多い | 横幅が足りなくなる |
| 文字量が多い | セル内で何度も改行される |
| 余白が広い | 表全体がさらに大きくなる |
5-2. 列数を減らしてシンプルな表にする
スマホ対応で最も効果的なのは、列数を減らすことです。
表に入れる情報を増やしすぎると、読者は比較しにくくなります。本当に必要な項目だけに絞りましょう。
たとえば、次のような5列の表があるとします。
| 商品名 | 価格 | 容量 | 特徴 | おすすめ度 |
|---|---|---|---|---|
| 商品A | 1,000円 | 500ml | 初心者向け | ★★★★☆ |
スマホで見づらい場合は、次のように情報を整理できます。
| 商品 | 価格・特徴 |
|---|---|
| 商品A | 1,000円。500mlで初心者向け。おすすめ度は高め。 |
このように2列にすると、スマホでも読みやすくなります。
5-3. 横スクロール対応にする
列数を減らせない場合は、横スクロール対応にする方法があります。
横スクロール対応にすると、表が画面からはみ出す代わりに、読者が左右にスクロールして内容を確認できます。料金比較表やスペック表のように、どうしても列数が多くなる表に向いています。
テーマによっては、テーブルブロックに横スクロールが自動で付くこともあります。付かない場合は、追加CSSやプラグインで対応することもできます。
ただし、横スクロールにした場合は、読者がスクロールできることに気づきにくいことがあります。表の前に「横にスクロールできます」と一言入れておくと親切です。
5-4. スマホでは縦並び表示にする
表の内容によっては、スマホでは表形式にこだわらず、縦並びにしたほうが見やすい場合もあります。
たとえば、商品比較表をスマホで表示するときは、横に商品を並べるよりも、商品ごとに情報を縦に並べたほうが読みやすくなります。
| 表形式 | スマホでの見やすさ |
|---|---|
| 横並びの比較表 | 項目が多いと見づらい |
| 商品ごとの縦並び | 1商品ずつ確認しやすい |
プラグインやテーマによっては、スマホ表示時だけ表を縦並びに変える機能が用意されていることもあります。
標準のテーブルブロックで難しい場合は、表を使わずに見出しやリストで整理する方法も検討しましょう。
5-5. 文字サイズ・余白・改行を調整する
スマホで表を見やすくするには、文字サイズや余白の調整も大切です。
文字が小さすぎると読みにくく、大きすぎると表がすぐに横幅いっぱいになります。表内の文字は、本文より少し小さめにする場合もありますが、読めないほど小さくするのは避けましょう。
また、セル内の余白が広すぎると、表全体が大きくなります。テーマやプラグインで余白を調整できる場合は、スマホ表示に合わせて調整しましょう。
セル内で不自然な改行が起きている場合は、文章を短くしたり、言い換えたりすることも有効です。
5-6. 公開前にスマホ表示を確認する方法
表を作ったら、公開前に必ずスマホ表示を確認しましょう。
確認方法はいくつかあります。
| 方法 | 内容 |
|---|---|
| プレビューで確認 | ワードプレスのプレビュー機能を使う |
| ブラウザ幅を狭くする | パソコン画面でスマホ幅を再現する |
| 実際のスマホで確認 | 最も確実な方法 |
| テーマのレスポンシブ確認機能を使う | テーマによって利用できる |
パソコンだけで確認していると、スマホでの崩れに気づきにくいです。特に、料金表や比較表のように読者の判断に関わる表は、必ずスマホでも確認しましょう。
6. Excel・Googleスプレッドシートの表をワードプレスに入れる方法
ワードプレスで表を作るとき、ExcelやGoogleスプレッドシートで作成済みの表を使いたい場合もあります。ここでは、外部で作った表をワードプレスに入れる方法を解説します。
6-1. コピー&ペーストで表を貼り付ける
最も簡単なのは、ExcelやGoogleスプレッドシートの表をコピーして、ワードプレスの編集画面に貼り付ける方法です。
まず、Excelまたはスプレッドシートで使いたい範囲を選択します。コピーしたら、ワードプレスの投稿編集画面で貼り付けたい位置をクリックし、そのままペーストします。
表の構造が保たれれば、ワードプレス上でテーブルとして挿入されます。その後、必要に応じて文字や列幅、装飾を調整します。
ただし、複雑な罫線や背景色、セル結合などは正しく反映されないことがあります。貼り付け後に必ず表示を確認しましょう。
6-2. 表のレイアウトが崩れたときの直し方
Excelやスプレッドシートから貼り付けた表は、レイアウトが崩れることがあります。
よくある崩れ方は次のとおりです。
| トラブル | 対策 |
|---|---|
| 罫線が消える | ワードプレス側で表スタイルを設定する |
| 文字がずれる | セル内の余分な改行を削除する |
| 幅が広すぎる | 列数や文字量を減らす |
| 装飾が反映されない | ワードプレス側で再設定する |
| セル結合が崩れる | プラグインを使う |
貼り付けた表が大きく崩れる場合は、無理に修正するよりも、ワードプレスのテーブルブロックで作り直したほうが早いこともあります。
6-3. 画像として貼り付ける場合のメリット・デメリット
Excelやスプレッドシートの表を画像として貼り付ける方法もあります。スクリーンショットを撮って画像としてアップロードすれば、見た目をそのまま表示できます。
画像として貼り付けるメリットは、レイアウトが崩れにくいことです。Excelで作ったデザインをそのまま見せたい場合には便利です。
一方で、デメリットもあります。
| デメリット | 内容 |
|---|---|
| 文字が検索エンジンに伝わりにくい | 画像内の文字は本文として扱われにくい |
| スマホで読みにくい | 小さく表示されると文字が見えにくい |
| 修正が面倒 | 変更のたびに画像を作り直す必要がある |
| アクセシビリティが低い | 読み上げ機能で内容が伝わりにくい |
表を画像だけで掲載するのは、SEOやユーザビリティの面で不利になることがあります。画像を使う場合でも、本文で内容を補足するようにしましょう。
6-4. スプレッドシートを埋め込む方法
Googleスプレッドシートの表をワードプレスに埋め込む方法もあります。
Googleスプレッドシート側で共有設定を行い、埋め込み用のコードを取得します。そのコードをワードプレスの「カスタムHTML」ブロックに貼り付けると、ページ内にスプレッドシートを表示できます。
この方法のメリットは、元のスプレッドシートを更新すれば、埋め込み先のワードプレスにも反映されやすいことです。
ただし、表示サイズやスマホ対応には注意が必要です。埋め込み表示は横幅が大きくなりやすいため、スマホで見づらくないか確認しましょう。
6-5. データ更新が多い表に向いている方法
価格表、スケジュール、在庫一覧、参加者リストなど、データ更新が多い表は、管理しやすさを重視しましょう。
更新頻度が低い表なら、ワードプレスのテーブルブロックで直接編集しても問題ありません。
一方で、頻繁に内容が変わる表は、Googleスプレッドシートを埋め込む方法や、TablePressで表を一元管理する方法が向いています。
| 更新頻度 | おすすめの方法 |
|---|---|
| ほとんど更新しない | テーブルブロック |
| 月に数回更新する | TablePress |
| 頻繁に更新する | Googleスプレッドシート埋め込み |
| 複数人で管理する | Googleスプレッドシート |
更新しやすい方法を選ぶことで、古い情報を掲載したままにしてしまうリスクを減らせます。
7. ワードプレスの表を見やすくするデザインのコツ
表は、ただ作ればよいわけではありません。読者が内容を理解しやすいように、見やすいデザインに整えることが大切です。
ここでは、ワードプレスの表を見やすくするための基本的なコツを紹介します。
7-1. 見出し行を目立たせる
表の見出し行は、読者が各列の意味を理解するために重要です。
見出し行が本文と同じ見た目だと、どこからデータが始まるのかわかりにくくなります。ヘッダー行を設定し、背景色を変えたり太字にしたりして目立たせましょう。
| プラン | 料金 | 特徴 |
|---|---|---|
| ライト | 1,000円 | 初心者向け |
| スタンダード | 3,000円 | 機能が充実 |
このように、最上部に項目名をそろえるだけでも表は見やすくなります。
7-2. 行ごとに背景色を変えて読みやすくする
行数が多い表では、読者が横方向に目で追いにくくなります。そのような場合は、行ごとに背景色を少し変えると読みやすくなります。
いわゆるストライプ表示にすると、どの行を読んでいるのかがわかりやすくなります。
ただし、色の差が強すぎると目が疲れます。薄い背景色を使い、文字が読みやすいコントラストを保つことが大切です。
7-3. 数字や価格は右寄せ・中央寄せを使い分ける
表の中に数字や価格を入れる場合は、配置にも気を配りましょう。
一般的に、金額や数値は右寄せにすると桁がそろって見やすくなります。一方で、記号や短い評価、丸バツなどは中央寄せにすると見やすくなります。
| 商品 | 価格 | 評価 |
|---|---|---|
| 商品A | 1,000円 | ◎ |
| 商品B | 12,000円 | ○ |
| 商品C | 980円 | △ |
このように配置を使い分けると、表全体が整理されて見えます。
7-4. 情報を詰め込みすぎない
表に情報を詰め込みすぎると、かえって読みにくくなります。
1つの表にすべてを入れようとせず、必要に応じて複数の表に分けましょう。たとえば、料金比較と機能比較を同じ表に入れると横に長くなりすぎる場合は、別々の表にしたほうが見やすくなります。
また、表内では短い言葉を使い、詳しい説明は本文で補足するのがおすすめです。
表は「要点を整理する場所」と考えると、読みやすい構成になります。
7-5. 比較したい項目を左列にそろえる
比較表を作るときは、比較したい項目を左列にそろえると読みやすくなります。
たとえば、複数のサービスを比較する場合は、左列に「料金」「機能」「サポート」「おすすめの人」などの項目を並べ、右側に各サービスの内容を入れます。
| 項目 | サービスA | サービスB |
|---|---|---|
| 料金 | 月額1,000円 | 月額2,000円 |
| 機能 | 基本機能のみ | 高機能 |
| サポート | メール対応 | チャット対応 |
この形式にすると、読者は知りたい項目ごとに比較しやすくなります。
7-6. 読者が判断しやすい表の作り方
表を作る目的は、読者が情報を理解し、判断しやすくすることです。
そのためには、単にデータを並べるだけでなく、読者が知りたい順番で情報を整理する必要があります。
商品比較なら「価格」「特徴」「おすすめの人」「注意点」などを入れると判断しやすくなります。料金表なら「プラン名」「料金」「含まれる内容」「向いている人」を入れると親切です。
表を作る前に、「読者はこの表を見て何を判断したいのか」を考えましょう。目的が明確になると、必要な項目も自然に決まります。
8. ワードプレスの表作成でよくあるトラブルと解決策
ワードプレスで表を作っていると、罫線が出ない、幅がはみ出す、スマホで崩れるなどのトラブルが起こることがあります。ここでは、よくある問題と解決策を紹介します。
8-1. 表の罫線が表示されない
表を作ったのに罫線が表示されない場合、テーマのデザイン設定が影響している可能性があります。
ワードプレスのテーブルブロック自体に罫線があっても、使用しているテーマによっては罫線が薄かったり、表示されなかったりすることがあります。
まずは、テーブルブロックのスタイル設定を確認しましょう。テーマ側に表デザインの設定がある場合は、そちらも確認します。
それでも表示されない場合は、追加CSSで罫線を設定する方法もあります。ただし、CSSに慣れていない場合は、表デザインを調整できるプラグインを使うほうが簡単です。
8-2. 表の幅がページからはみ出す
表の幅がページからはみ出す場合は、列数が多すぎるか、セル内の文字が長すぎる可能性があります。
まず、不要な列を削除できないか確認しましょう。すべての情報を1つの表に入れず、複数の表に分けるのも有効です。
また、長い文章は短く言い換えます。たとえば「初心者でも簡単に利用できるプランです」は、表内では「初心者向け」とまとめられます。
それでも幅が収まらない場合は、横スクロール対応にしましょう。
8-3. スマホで表が崩れる
スマホで表が崩れる場合は、パソコン向けの表をそのまま表示していることが原因になりやすいです。
解決策としては、列数を減らす、文字量を減らす、横スクロール対応にする、スマホでは縦並びにするなどがあります。
特に、商品比較表や料金表はスマホで崩れやすいので注意が必要です。公開前に必ずスマホで表示確認をしましょう。
8-4. 行や列を追加できない
テーブルブロックで行や列を追加できない場合は、表全体ではなくセル内だけを選択している可能性があります。
表のセルをクリックしたあと、ブロック全体が選択されているか確認しましょう。上部のツールバーに表の編集メニューが表示されていれば、行や列を追加できます。
それでも操作できない場合は、ブロックエディターの表示が一時的に不安定になっていることもあります。下書きを保存し、ページを再読み込みしてから再度試してみましょう。
8-5. セルを結合できない
標準のテーブルブロックでは、セル結合は基本的にできません。
Excelのように複数のセルを選んで結合したい場合は、Flexible Table Blockなどのプラグインを使う必要があります。
どうしてもプラグインを使いたくない場合は、表の構成を見直し、セル結合が不要な形に整理しましょう。複雑な表よりも、シンプルな表のほうが読者にとって見やすい場合もあります。
8-6. 表の色やデザインを変更できない
表の色やデザインを変更できない場合は、使っているテーマやブロックの設定範囲が限られている可能性があります。
まずは、ブロック設定の「色」「スタイル」「タイポグラフィ」などを確認しましょう。テーマによっては、表のデザイン設定が少ない場合もあります。
細かくデザインを変えたい場合は、表作成プラグインを使うか、追加CSSで調整する方法があります。
ただし、デザインを凝りすぎると読みにくくなることがあります。必要最低限の装飾で、情報が伝わりやすい表を目指しましょう。
8-7. プラグインの表が表示されない
TablePressなどのプラグインで作った表が表示されない場合は、ショートコードの貼り付けミスやプラグインの設定ミスが考えられます。
まず、ショートコードが正しく貼り付けられているか確認しましょう。余分なスペースや記号が入っていると、正しく表示されないことがあります。
次に、プラグインが有効化されているか確認します。キャッシュ系プラグインを使っている場合は、キャッシュを削除すると表示が直ることもあります。
また、テーマや他のプラグインとの相性で表示が崩れる場合もあります。原因がわからない場合は、一時的に他のプラグインを停止して確認する方法もあります。
9. ワードプレスで表を作るときのSEO・ユーザビリティの注意点
ワードプレスで表を作るときは、見た目だけでなくSEOやユーザビリティも意識しましょう。検索エンジンと読者の両方にとってわかりやすい表にすることが大切です。
9-1. 表だけでなく本文でも内容を補足する
表は情報を整理するのに便利ですが、表だけで説明を終わらせるのはおすすめできません。
表の前後に本文を入れて、「この表で何を比較しているのか」「どこを見ればよいのか」を説明しましょう。
たとえば料金表を掲載する場合は、表の前に「各プランの料金と主な機能を比較します」と書き、表の後に「初めて利用する場合はスタンダードプランが選びやすいです」のように補足すると親切です。
本文で説明を加えることで、読者にも検索エンジンにも内容が伝わりやすくなります。
9-2. 読者が比較しやすい項目名にする
表の項目名は、読者がすぐに意味を理解できる言葉にしましょう。
たとえば、「A」「B」「C」のような曖昧な項目名よりも、「料金」「機能」「サポート」「おすすめの人」のように具体的な言葉を使ったほうがわかりやすくなります。
商品比較表では、読者が知りたい項目を優先して入れることが大切です。運営者が見せたい情報ではなく、読者が判断に必要な情報を整理しましょう。
9-3. スマホユーザーを前提に設計する
表はスマホユーザーを前提に作りましょう。
スマホで読みにくい表は、読者が途中で離脱する原因になります。特に、横に長すぎる表や文字が小さすぎる表は注意が必要です。
表を作るときは、最初から「スマホで見たときに読みやすいか」を考えます。列数を減らす、文章を短くする、横スクロールにするなど、スマホでの使いやすさを優先しましょう。
9-4. 画像の表だけにしない
表を画像として掲載する場合は、画像だけで終わらせないようにしましょう。
画像内の文字は、通常のテキストに比べて検索エンジンや読み上げ機能に伝わりにくい場合があります。また、スマホでは画像が縮小され、文字が読みにくくなることもあります。
どうしても画像の表を使う場合は、本文でも同じ内容を説明するか、代替テキストを設定しましょう。可能であれば、テーブルブロックやプラグインで表を作るほうがおすすめです。
9-5. 不要な装飾より見やすさを優先する
おしゃれな表を作りたいと思って、色や装飾を増やしすぎると、かえって読みにくくなることがあります。
表で大切なのは、読者が情報を迷わず理解できることです。背景色、太字、アイコンなどは必要な部分だけに使いましょう。
特に、比較表では「どれがおすすめなのか」「何が違うのか」がすぐにわかるようにすることが重要です。デザインは、情報をわかりやすくするために使いましょう。
9-6. 商品比較・料金比較で信頼性を高めるポイント
商品比較や料金比較の表では、情報の正確性が重要です。
価格、機能、キャンペーン内容などは変更されることがあります。古い情報のままだと、読者の信頼を失う原因になります。
比較表を作るときは、次の点を意識しましょう。
| ポイント | 内容 |
|---|---|
| 更新日を記載する | 情報の新しさが伝わる |
| 公式情報を確認する | 誤った価格や機能を載せない |
| 比較条件をそろえる | 公平に比較できる |
| メリットだけでなく注意点も書く | 信頼性が高まる |
| 読者に合う選び方を補足する | 判断しやすくなる |
表は便利な反面、情報が古くなると誤解を招きやすい部分でもあります。定期的に見直して、正確な情報を保ちましょう。
10. ワードプレスの表の作り方に関するよくある質問
最後に、ワードプレスの表の作り方についてよくある質問に回答します。
10-1. ワードプレスで表を作るのにプラグインは必要?
シンプルな表であれば、プラグインは必要ありません。
ワードプレス標準のテーブルブロックを使えば、料金表、比較表、営業時間表、会社概要などは簡単に作れます。
ただし、セル結合、検索、並び替え、細かいデザイン調整をしたい場合は、プラグインを使うと便利です。
まずはテーブルブロックで作り、標準機能で足りないと感じたらプラグインを検討しましょう。
10-2. テーブルブロックでセル結合はできる?
標準のテーブルブロックでは、Excelのようなセル結合は基本的にできません。
セル結合を使いたい場合は、Flexible Table Blockなどのプラグインを使う方法があります。
ただし、セル結合を多用した表はスマホで崩れやすくなることがあります。可能であれば、セル結合を使わなくても伝わるシンプルな構成にするのがおすすめです。
10-3. スマホで横スクロールできる表は作れる?
スマホで横スクロールできる表は作れます。
テーマによっては、表が自動的に横スクロール対応になる場合があります。対応していない場合は、追加CSSやプラグインを使って横スクロールを設定できます。
横スクロールにする場合は、表の前に「横にスクロールできます」と案内を入れると、読者に親切です。
10-4. Excelの表をそのまま貼り付けられる?
Excelの表は、コピー&ペーストでワードプレスに貼り付けられる場合があります。
ただし、罫線、背景色、セル結合、列幅などは崩れることがあります。貼り付け後に、ワードプレス側で調整が必要になることもあります。
シンプルな表ならコピー&ペーストで十分ですが、複雑な表はテーブルブロックやプラグインで作り直したほうがきれいに表示できる場合があります。
10-5. おしゃれな表を作るにはどうすればいい?
おしゃれな表を作るには、色や余白、見出し行のデザインを整えることが大切です。
ただし、装飾を増やしすぎると読みにくくなります。見出し行を目立たせる、行ごとに薄い背景色を付ける、重要な数字を太字にするなど、必要な部分だけを装飾しましょう。
デザインにこだわりたい場合は、表作成プラグインや、表デザインに対応したテーマを使うのもおすすめです。
10-6. 表作成におすすめのプラグインはどれ?
目的によっておすすめのプラグインは変わります。
本格的に表を管理したい場合はTablePressが向いています。複数の記事で同じ表を使いたい場合や、検索・並び替え機能を使いたい場合に便利です。
ブロックエディター上でセル結合や装飾をしたい場合は、Flexible Table Blockが使いやすいです。
比較表やランキング表を作りたい場合は、使用しているテーマに専用機能がないか確認するのもおすすめです。
プラグインを選ぶときは、必要な機能、スマホ対応、更新状況、使いやすさを確認しましょう。
まとめ
ワードプレスで表を作る方法は、主に「標準のテーブルブロックを使う方法」「プラグインを使う方法」「ExcelやGoogleスプレッドシートの表を活用する方法」の3つです。
初心者がまず試すなら、標準のテーブルブロックがおすすめです。投稿や固定ページの編集画面から簡単に追加でき、シンプルな料金表や比較表なら十分対応できます。
一方で、セル結合、検索、並び替え、細かいデザイン調整が必要な場合は、TablePressやFlexible Table Blockなどのプラグインを使うと便利です。
また、スマホで見やすい表にするためには、列数を減らす、文字量を短くする、横スクロールに対応する、公開前にスマホ表示を確認することが大切です。
ワードプレスの表は、読者が情報を比較し、判断しやすくするための重要な要素です。見た目の装飾だけでなく、読みやすさ、スマホ対応、情報の正確性を意識して、わかりやすい表を作りましょう。

