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

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

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

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

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

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

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

T部長

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

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

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

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

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

それでは、どうぞ!

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

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

方法は次の2つです。

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

WordPressの基本機能を使う

まず一つめがWordPrssの基本機能を使ったテーブル表を作成する方法を解説していきます。

手順は次のとおりです。

ブロックエディタより「+」をクリックします
ブロックエディタより<+>をクリックします
検索窓に「テーブル」と入力し、「テーブル」をクリックします
検索窓に「テーブル」と入力し、「テーブル」をクリックします
カラム数(列数)と行数を入力します

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

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

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

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

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

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

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

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

手順は次のとおりです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.スタイルを変更する

スタイルを変更する方法を解説です

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

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

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

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

2.文字の色を変更する

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

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

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

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

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

3.背景色を変更する

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

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

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

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

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

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

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

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

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

4.セルの幅を固定する

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

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

こちらで完了です。

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

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

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

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

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

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

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

使い方としてランキングを挿入して並べたり、プラン名をヘッダーセクションに追加をしたりのもありですね。

テーブル内で見出しとして挿入したい項目があれば、ヘッダーセクションの追加がおすすめです。

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

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

行や列の追加・削除は、テーブル表の作成時によく使う操作なので覚えておきましょう!

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

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

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

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

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

8.画像を挿入する

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

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

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

テーブル表のレイアウトに合わせて画像幅も調整しましょう!

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

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

1.TablePress

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

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

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」と検索し、アイコンをクリックします
ヘッダーセクション・フッターセクションの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の導入は完了です。

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

最後にテーブル表をエディタに挿入する際の注意点を解説します。

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

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

パソコン表示

パソコン表示

スマートフォン表示

スマートフォン表示

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

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

キャンペーン開催中

国内シェアNo.1レンタルサーバー「エックスサーバー」では2022年7月21日18時まで、
初期費用0円&月額料金20%OFFキャンペーンを開催中です!

今なら初期費用0円+月額792円~お得にWordPressブログが始められます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

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

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

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

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

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

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

【初心者でも安心】たった10分で出来るWordPressブログの始め方

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