WordPressのブロックエディターで表を作る｜テーブルブロックの使い方

WordPressのブロックエディターで表を作る方法を紹介します。

ブロックエディターで表を作るときは「テーブルブロック」を使用します。

WordPress標準のテーブルブロックは設定できる項目が少なく、作成できる表は基本的にシンプルです。

標準のテーブルブロックで設定できない機能は、テーマやプラグインで実現できることがあります。

ブログ記事の「比較表」や、サービスページの「料金表」など表を作る機会は頻繁にあると思うので、テーブルブロックの使い方を覚えて見やすいコンテンツを作っていきましょう。

では、WordPressブロックエディターのテーブルブロックの使い方を紹介していきます。

---

テーブル(表)ブロックの基本的な使い方

ブロックエディターのテーブルブロック(表ブロック)の使い方を解説していきます。

以下の手順で表を作成することができます。

これで、基本的な表ブロックの使い方は以上です。

また、テーブルブロックの標準機能では以下の設定はできないので注意してください。

これらの機能を設定したい場合は「テーブルブロックの機能を拡張できるテーマやプラグイン」で紹介するテーマ、プラグインの導入を検討してください。

この先は、標準のテーブルブロックでできる設定や操作を紹介していきます。

見出しの挿入はサイドバー「表の設定」から

サイドバー「表の設定」で表の要素を編集することができます。

設定できる内容は以下の3種類です。

それぞれ紹介してきます。

表のセル幅の固定

通常はセル内の文字数に合わせて、セルの幅が変動していきます。

文字数に関係なく、セルの幅を一定にしたい場合は、この項目にチェックをいれましょう。

テキストがセル幅に収まりきらない場合は、自動で改行されます。

ヘッダーセクションとフッターセクション

表の1番上の行(ヘッダー)と下の行(フッター)が、他の行と違うスタイルになります。

例えば、表の項目名をヘッダーに、表の合計の数値をフッターに入力する。といった使い方ができます。

テーブルのスタイルは2種類から選択

WordPressのテーブルブロック標準の機能として、2種類のスタイルが準備されています。

サイドバーの「スタイル」から以下の2種類が選択できます。

実際には以下の様に、表のデザインが変わります。

また、同様にサイドバーの「色設定」から、見出し(ヘッダーセクション)以外の背景色を一括で設定することができます。

特定セルだけ色を変えることは、現状のブロックエディターの標準仕様ではできません。

ブロックツールバーから行、列の追加や削除ができる

列や行の追加、削除はブロックツールバー「表を編集」から編集が可能です。

セル内のテキストの配置も「配置を変更」で設定できます。

また、セル内のテキストには一通りの装飾が可能です。

「インライン画像」でセルの中に画像も配置できます。

シンプルですが、WordPress標準のテーブルブロックでできることは以上です。

次は、さらに柔軟なテーブルの表現ができるテーマとプラグインを紹介します。

テーブルブロックの機能を拡張できるテーマやプラグイン

WordPressのテーブルブロック標準機能では、上述したとおり以下のような設定ができません。

これらの設定ができるようになる、おすすめのテーマとプラグインを紹介します。

SWELLテーマの表ブロックはPC表示、スマホ表示ともに超高機能！

SWELLはブロックエディターの対応度が抜群のWordPressテーマです。

追加のプラグインなど不要で、テーマを適用するだけでテーブルブロックの機能が協力に拡張されます。

SWELLでは、標準のテーブルブロックに以下のような機能が追加されています。

例えば、SWELLのテーブルブロックの機能を使うと、以下のような素敵な商品比較表を作成できます。

この比較表はSWELLの機能を組み合わせて以下のような仕様になっています。

• ボタンリンクはクリック数の計測ができる
• ボタンリンクにはASPのリンクを改変無しで設置可能
• セルの背景にアイコンを表示させて見ためで比較できるようにする

これら全て、SWELLの標準機能のみで簡単に作ることができます。

SWELLのテーブルブロックの詳細と比較表の作り方は以下の記事にまとめました。

Flexible Table Blockプラグインではセルの結合もできる！

Flexible Table Blockプラグインは、標準のテーブルブロックとは比べ物にならないくらい柔軟な表現ができる無料のテーブルプラグインです。

一例として、以下のような設定ができます。

• セルの結合
• 罫線の種類の変更(点線、二重線など)
• 特定セルの背景色変更

以下のような表が簡単に作れます。

また、プラグインの開発者さんも日本人の方なので、安心して使えることもメリットだと思います。

Flexible Table Blockについては、以下の記事で機能や使い方をまとめています。

表をうまく組み込んで分かりやすいコンテンツを作っていきましょう

WordPressブロックエディターの「テーブルブロック」について紹介しました。

何かを比較したり、複数の項目を並べて表示したいときに表を作ることはとても重要です。

テーブルブロックで簡単に表が作れるので、使い方をぜひ覚えておきましょう。

また、標準のテーブルブロックでは機能も最小限に絞られていて複雑な表は作れません。

表で柔軟な表現をしたいときは機能をテーブルの機能を拡張してくれるテーマやプラグインの導入もおすすめです。

この記事では、以下のテーマとプラグインを紹介しました。

どちらもとても高機能なので、ぜひ活用してみてください。

最後まで読んでいただきありがとうございました！

---

SWELL公式サイトはこちらからどうぞ…！

ブロックエディターの関連記事