国内シェアNo1サービスの「中の人」がブログ運営に役立つ情報をわかりやすくお届け!

WordPressにテーブル表を挿入する方法を解説|おすすめプラグインも紹介!

【2022年10月11日更新】テーブル表内の文字サイズの変更方法を追記しました。

この記事のレベル
初心者
(4.0)
重要度
(3.5)
難しさ
(2.0)

こんにちは、T部長です!

ブログを運営していると、「他社のサービスや製品を比較表でまとめたい!」「エクセルのように分かりやすく表にしたい!」

そのように感じることありませんか?

そんな方のために今回の記事では、テーブル表の基本の使い方やアレンジ方法を徹底解説していきます!

T部長

この記事は次のような人におすすめ!

  • サービス・製品の比較表を作りたい
  • おしゃれな比較表を作って分かりやすい記事を作りたい
  • テーブル表の作り方やカスタマイズ方法が知りたい

簡単そうに見えて、実は取り扱いの難しいテーブル表。おしゃれで分かりやすいテーブル表を作りたいと思っても、うまくいかないことが多々あります。

「css」「html」を使えば自由にカスタマイズできますが、初心者にはハードルが高め。

今回は専門知識なしでも分かりやすいテーブル表をに作る方法を解説していますので、ぜひ参考にしてみてください!

それでは、どうぞ!

WordPressでテーブル表を作る方法2つ

それではWordPressでテーブル表を作る方法を解説していきます。

方法は次の2つです。

順番に解説していきます。

WordPressの基本機能を使う

ひとつめが、WordPrssの基本機能を使ったテーブル表を作成する方法です。

手順は次のとおりです。

ブロックエディタより「+」をクリックします
ブロックエディタより<+>をクリックします

ブロックエディタの使い方が分からない方は、以下の記事を参考にしてみてください。

【図解あり】WordPressブロックエディタ(Gutenberg)の使い方
検索窓に「テーブル」と入力し、「テーブル」をクリックします
検索窓に「テーブル」と入力し、「テーブル」をクリックします
カラム数(列数)と行数を入力します

今回はカラム数を4、行数を4としました。

カラム数(列数)と行数を入力します。
テキストを入力します

表の大枠は完成しましたので、次に好きなテキストを入力していきます。

テキストを入力します
基本のテーブル表の作成はこれで完了です

ただ、この状態だとなんの装飾もないテーブル表になってしまいます。テーブル表の装飾方法も記事中盤で解説していますのであわせてご覧ください。

エクセル・スプレッドシートからコピペする

次にエクセルやスプレッドシートを使ったテーブル表の掲載方法を解説します。

今回はGoogleスプレッドシートを使います。

手順は次のとおりです。

まずはスプレッドシートを開きます

スプレッドシートの利用にはGoogleアカウントが必要です。あらかじめご用意ください。

まずはスプレッドシートを開きます
シートのセル内にテキストを入力していきます
シートのセル内にテキストを入力していきます
テキストが入力されたセルをキーボードの<ctrl+c>を押してコピーします

コピーをすると選択したセルが青枠で囲われます。

テキストが入力されたセルをキーボードの<ctrl+c>を押してコピーします
WordPressの画面に戻りでコピーをしたセルをペーストします
WordPressの画面に戻り<ctrl+v>でコピーをしたセルをペーストします

テーブル表の反映はこちらで完了です。

比較表をスプレッドシートで管理しておくと、行や列の入れ替えが簡単になります。

表の中身を入れ替えることが多い場合は、あえてスプレッドシートやエクセルで管理をすると楽に運用できます。

シートで装飾してもWordPressには反映されない

スプレッドシート内で装飾しても、WordPress側にペーストしても反映されません。
たとえば、次の画像のようにスプレッドシート内でセルを装飾をしてみましょう。

この状態でWordPress側にペーストすると、装飾が反映されずプレーンの状態に戻ってしまいます。

テーブル表の装飾を反映するにはWordPress側で編集する必要があります。

テーブル表のスタイル・装飾を変更する方法9つ

テーブルの大枠を反映したところで、次にスタイルや装飾を変更する方法を解説します。

WordPressの基本性能で備わるテーブル表のオプション機能は次の9つです。

順番に解説していきます。

1.スタイルを変更する

まずは「スタイル」を変更する方法を解説します。

スタイルとは表の基となるレイアウトやデザインのことです。

まず制作したテーブル表の上でクリックしてカーソルを合わせます
まず制作したテーブル表の上でクリックしてカーソルを合わせます
右上にあるタブを「ブロック」に切り替えます
右上にあるタブを「ブロック」に切り替えます

すると、直下にテーブルという項目が表示されますので「ストライプ」を選択してみましょう

直下にテーブルという項目が表示されますので「ストライプ」を選択してみましょう
反映が完了するとこのように表示されます
反映が完了するとこのように表示されます

スタイルは使用しているWordPressテーマによってさまざまなバリエーションがあります。好みのスタイルを選んで投稿してみてください!

2.文字の色を変更する

次にテーブル内の文字の色を変更する方法を解説していきます。

制作したテーブルを選択した状態で右サイドバーの「色」をクリックします
制作したテーブルを選択した状態で右サイドバーの「色」をクリックします
「テキスト色」項目の好きな色をクリックするとテーブルに反映されます
「テキスト色」項目の好きな色をクリックするとテーブルに反映されます

白とグレーで配色されたタイル状の箇所をクリックすると、好みのカラーに変更もできます。

白とグレーで配色されたタイル状の箇所をクリックすると、好みのカラーに変更もできます

ちなみにWordPressのデフォルトの機能では、セルごとにテキスト色の変更はできません。WordPressテーマの機能を使うか、プラグインを導入する必要があります。

3.背景色を変更する

テーブル内の背景色を変更する方法を解説します。

制作したテーブルを選択した状態で右サイドバーの「色」をクリックします
制作したテーブルを選択した状態で右サイドバーの「色」をクリックします
「背景色」項目の好きな色をクリックするとテーブルに反映されます
「背景色」項目の好きな色をクリックするとテーブルに反映されます

背景色も同様に白とグレーで配色されたタイル状の箇所をクリックすると、好みのカラーに変更もできます。

背景色も同様に白とグレーで配色されたタイル状の箇所をクリックすると、好みのカラーに変更もできます。

またグラデーションへの変更も可能です。

またグラデーションへの変更も可能です。

グラデーションの配色や割合、タイプや角度を変更すれば、グラデーションを自由自在に彩れます。

グラデーションの配色や割合、タイプや角度を変更すれば、グラデーションを自由自在に彩れます。

ただし、ハデなデザインにしすぎるとテーブル表の視認性が悪くなるので、読者にとって見やすい配色にしておきましょう。

4.セルの幅を固定する

次にセルの幅を固定する方法を解説します。

制作したテーブルを選択した状態で右サイドバーの「表の設定」をクリックします
制作したテーブルを選択した状態で右サイドバーの「表の設定」をクリックします
「表のセル幅を固定」をONにします
「表のセル幅を固定」をONにします

こちらで完了です。

セル幅を固定すれば、文字数ごとに異なるセル幅が一定の長さに統一されます。

テーブル表に統一感を出したいときにONにするのがおすすめです。

5.ヘッダーセクション・フッターセクション

次にヘッダーセクション・フッターセクションを追加する方法を解説します。

ヘッダーセクション・フッターセクションとは行の最初、または最後に見出しのようなものを追加できる機能のことです。

制作したテーブルを選択した状態で右サイドバーの「表の設定」をクリックします
制作したテーブルを選択した状態で右サイドバーの「表の設定」をクリックします
ヘッダーセクション、またはフッターセクションをクリックしてONにします。
ヘッダーセクション、またはフッターセクションをクリックしてONにします

行の先頭に「ヘッダーラベル」と表示されたら完了です。

ヘッダーセクションの使い方として、「〇位」などのランキング順位の挿入や、プラン名を追加するなどの用途におすすめです。

6.列・行を追加、削除する

次に列や行の追加、または削除をする方法を解説します。

テーブルを選択した状態でテーブルのアイコンをクリックします
テーブルを選択した状態でテーブルのアイコンをクリックします
列や行を追加、または削除したい項目をクリックします
列や行を追加、または削除したい項目をクリックします
行が追加されれば完了です
行が追加されれば完了です

比較表などを作成する際に、行や列が足りなくなったり、追加しすぎたりしたときに使います。

表を作成する際によく使う機能なので、覚えておきましょう!

7.左寄せ・中央揃え・右寄せに変更する

次にテキストを左寄せ・中央揃え・右寄せにする方法を解説します。

テーブルを選択した状態で「3本線」のアイコンをクリックします
テーブルを選択した状態で「3本線」のアイコンをクリックします
「カラムを左寄せ・中央配置・右寄せ」いずれかをクリックします

今回は中央配置にしてみました。

「カラムを左寄せ・中央配置・右寄せ」いずれかをクリックします
テキストの配置が変更されれば完了です
テキストの配置が変更されれば完了です

8.画像を挿入する

最後にセル内に画像を挿入する方法を解説します。

挿入したいセルを選択した状態で「v」のアイコンをクリックし、「インライン画像」をクリックします
挿入したいセルを選択した状態で「v」のアイコンをクリックし、「インライン画像」をクリックします
メディアライブラリが表示されるので、挿入したい画像を選択します
メディアライブラリが表示されるので、挿入したい画像を選択します
セル内に画像が反映されれば完了です
セル内に画像が反映されれば完了です

セル内の画像をクリックすると、画像の横幅も変更できます。

表内に画像を用いることでメリハリがつき、読者にとって分かりやすい表を作成できるようになります。

画像を挿入する際はテーブル表のレイアウトが崩れないように、画像幅も調整しましょう!

9.文字サイズを変更する

最後に文字サイズの変更方法を解説します。

テーブル表をクリックし、カーソルを合わせる
右サイドバー「タイポグラフィ」のサイズを変更する

こちらで完了です。

この方法で文字サイズを変更した場合、編集画面ではテーブル表内の見た目は変わりません。

実際にプレビュー画面で確認してみると、問題なく反映されています。

ただし、この方法だとテーブル表の文字サイズが一括で変更されてしまいます。

使用しているWordPressテーマによっては、セルごと文字サイズの変更もできますので、個別に変更したい場合はテーマの機能を使いましょう。

テーブル表を便利に使うおすすめのプラグイン2つ

次にテーブル表をさらに細かくカスタマイズできる「テーブル作成プラグイン」を2つ紹介します。

1.TablePress

次にテーブル表をさらに細かくカスタマイズできるプラグインを2つ紹介します。

出典:TablePress – WordPress プラグイン | WordPress.org 日本語

TablePressは専門知識なしでおしゃれなテーブル表を簡単に作れるプラグインです

TablePressの使い方

TablePressの使い方を解説します。全機能をお伝えすると長くなってしまうので、基本の使い方のみ解説します。

WordPressの左サイドバーに「TablePress」という項目が追加されているのでカーソルを合わせ「新しいテーブルをクリック」します
WordPressの左サイドバーに「TablePress」という項目が追加されているのでカーソルを合わせ「新しいテーブルをクリック」します
テーブルの名称に任意のテキストを入力し「テーブルを追加」をクリックします
テーブルの名称に任意のテキストを入力し「テーブルを追加」をクリックします
「テーブルの内容」のセル内にテキストを入力する
「テーブルの内容」のセル内にテキストを入力する
右上のショートコードをコピーする
右上のショートコードをコピーする
投稿編集画面にショートコードをペーストする
投稿編集画面にショートコードをペーストする

こちらでテーブルの作成は完了です。

編集画面ではショートコードしか見えない状態ですが、プレビュー画面で確認してみると問題なく反映されています。

編集画面ではショートコードしか見えない状態ですが、プレビュー画面で確認してみると問題なく反映されています。

TablePressを使えば読者自身でテーブル表の並び替えが可能です。見やすく分かりやすい表を読者に伝えられます!

TablePressを使えばテーブル表の作成や管理だけでなく、次のようなことも可能です。

  1. 列・行の入れ替え
  2. 列・行の複製
  3. セルの結合
  4. 画像の挿入
  5. cssによるカスタマイズ
  6. 列数の多いテーブルをスクロール表示
    etc…

列の入れ替えや複製がとくに便利で、ランキングやサービス一覧の入れ替え時に簡単に管理ができます。

ただ、セルの背景色など装飾の変更はcssの知識が必要なため、初心者向けではありません。

2.Flexible Table Block

Flexible Table Block

出典:TablePress – WordPress プラグイン | WordPress.org 日本語

Flexible Table Blockはテーブル表のセルの結合や分割、配色の変更などを簡単に行えるプラグインです。

TablePressとは違いエディタ(執筆する画面)側でカスタマイズができるため、より直感的に好みのデザインに変更できます。

Flexible Table Block 使い方

それでは、Flexible Table Blockの使い方を解説していきます。

エディター画面で「+」をクリックし、検索窓に「Flexible Table Block」と検索し、アイコンをクリックします
エディター画面で「+」をクリックし、検索窓に「Flexible Table Block」と検索し、アイコンをクリックします
ヘッダーセクション・フッターセクションのON/OFF、カラム数や行数を入力し、表を作成をクリックします
ヘッダーセクション・フッターセクションのON/OFF、カラム数や行数を入力し、表を作成をクリックします
あとはセル内にテキストを入力していくだけです
あとはセル内にテキストを入力していくだけです

基本的な使い方は以上となります。

基本機能以外にも直感的に使えるアレンジ機能が豊富です。

  1. デスクトップ・モバイルごとに分けたスクロール表示
  2. 1列目(または1行目)を固定した状態でのスクロール
  3. テーブルの横幅調整
  4. 枠線のアレンジ
  5. セルの結合や分割
  6. セルごとの背景色やフォントサイズの変更
  7. キャプションの表示位置の変更など

Flexible Table Blockを使えば、cssやhtmlの知識がなくても以下のようなテーブル表が直感的に作れます。

Flexible Table Blockを使えば、cssやhtmlの知識がなくても以下のようなテーブル表が直感的に作れます。

WordPressテーマのテーブル機能を使っていて、思い通りのアレンジがしにくいと感じたら、Flexible Table Blockの導入をおすすめします。

プラグインの導入方法

プラグインの導入方法について解説します。今回は「TablePress」を実際に導入してみました。

手順は以下をご覧ください。

WordPressトップページの「プラグイン」より「新規追加」をクリックします
WordPressトップページの「プラグイン」より「新規追加」をクリックします
右上の「プラグインの検索…」に「TablePress」と入力します
右上の「プラグインの検索...」に「TablePress」と入力します
「今すぐインストール」を押した後に「有効化」をクリックします
「今すぐインストール」を押した後に「有効化」をクリックします

こちらでTablePressの導入は完了です。

プラグインを導入の際、エラーが起きる可能性があるため、必ずバックアップを事前にとっておきましょう。

WordPressのバックアップの方法は、次の記事で解説しています。

【初心者向け】おすすめのWordPressバックアップ方法とは?簡単なバックアップの設定方法を解説

テーブル表を挿入する際の注意点2つ

テーブル表は、導入の際に気を付けておくべきことがあります。

「スマートフォンで表示をチェックする」「文字サイズや改行を調整しておく」の2つです。

なぜ注意しなければいけないのか? 以下でそれぞれ解説します。

スマートフォンで表示をチェックする

パソコンでプレビューをしながらテーブル表を作ると、スマートフォンで確認したときに表示が崩れていることが多くあります。

パソコン表示

パソコン表示

スマートフォン表示

スマートフォン表示

セル内の文字列が改行され、なんだか見づらい表示に。

スマートフォンはパソコンと比べ、横幅の表示領域が狭いためこのような表示になってしまいます。

読者がどんなデバイスで見ても分かりやすい表を伝えるために、事前にスマートフォンでテーブル表の表示を確認しておきましょう。

文字サイズや改行を調整しておく

テーブル表を使うと一つひとつのセルの表示領域が狭めです。そのため、1行で表示したいテキストが2行に改行されてしまいます。

テーブル表が不本意に改行される

そんな時は文字サイズを出来るだけ小さくし、2行目に入りそうな文字はあらかじめ改行しておくのがおすすめ!

文字サイズを出来るだけ小さくし、2行目に入りそうな文字はあらかじめ改行しておくのがおすすめ!

どんなデバイスで見ても同じレイアウトで表示されやすく、分かりやすい表を読者に伝えられます。

まとめ

WordPressでテーブル表を使うための基本操作やアレンジ方法を解説しました。

今回の内容をおさらいしますと、次のとおりです。

まとめ
  • シンプルなテーブル表を作るだけなら簡単
  • おしゃれに装飾するならテーマやプラグインが必要
  • 作成後はスマートフォンでチェックしよう

取り扱いが簡単そうで難しいテーブル表。WordPressのデフォルト機能だけだとおしゃれで見やすい表の作成は難易度が高めです。

そこでプラグインやWordPressテーマの機能を使えば、見やすく分かりやすい表を直感的に作れるようになります。

理想は「読者がどんなデバイスで閲覧しても見やすい表を作る」こと。スマートフォンの表示も確認しつつテーブル表をアレンジしていきましょう!

以上、最後まで読んでいただき、ありがとうございました。

キャンペーン開催中

国内シェアNo.1レンタルサーバー「エックスサーバー」では2023年2月3日12時まで、
半額キャッシュバックキャンペーンを開催中です!

今なら実質495円~お得にWordPressブログが始められます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

さらに2月2日18時までえらべるプレゼントキャンペーンも開催中です。
星野リゾート宿泊ギフト券やiPadなどの豪華景品が当たるビッグチャンス

ぜひこのお得な機会にWordPressブログをご検討ください!

当メディア「初心者のためのブログ始め方講座」では、
初心者の方に分かりやすく簡単にブログを始められる方法を紹介しています!

WordPressに使用される国内シェアNo.1サービス「エックスサーバー」の中の人が確実で信頼性の高い情報をお届けしています!

ブログをこれから始める方はこちらの完全ガイドをぜひご覧ください!

【初心者向け】ブログの始め方完全ガイド!立ち上げから収入を得る方法まで

また、初心者の方向けにWordPressでのブログ立ち上げがたった10分できる方法も紹介しています!

【たった10分】WordPressブログの始め方|初心者でも簡単に開設できる!

ブログの始め方・立ち上げに関する、ご質問・ご相談はボクのツイッターDM( @tbcho_xsv )までお気軽にどうぞ!