WordPressにブロックエディタを使っているアナタ、TablePress（表作成プラグイン）に使いにくさを感じていませんか？

私（@saosaoyamayama）は使いにくいです、はい。

ということで、TablePressに代わる表作成プラグイン「Flexible Table Block」を使ってみました。

このプラグインはブロックエディタ向けに作られているもので、ブロックエディタの強みをフルに生かしており、とーっても使いやすかったです。

機能盛りだくさんなのですべて紹介する忍耐力はありません。掻い摘まんで基本的な機能と推しポイントを書いておきます。

WordPressブロックエディタで表を作成する4つの方法と比較

4つの方法と書きましたが、表作成プラグインはたくさんあるので実際は「4」ではありません。今回は以下の4つに絞って比較表を作ってみました。

Flexible Table Block

今回初めて使用したWordPressプラグイン

TablePress

多くのメディアが採用しているWordPressプラグイン

HTML

ブロックエディタの「カスタムHTMLブロック」に記述する

表ブロック

ブロックエディタのデフォルトブロック

なお比較表はFlexible Table Blockを使って作成しています。

Flexible Table Block

ブロックエディタ専用の表作成プラグインです。モバイル表示でセルを縦積みしたりスクロールをオンにしたり程度のレスポンシブには対応。

ブロックエディタの強みである「編集結果を見ながら編集できる」点をフルに生かしており、編集の自由度も高し！

細かい部分にこだわらなければ、CSSを使わずにプラグインだけで見た目の良いテーブルが作れます。

TablePress

表作成プラグインの代表格ですね〜。クライアントメディアの多くがこのプラグインを採用しています。ブロックエディタでも使用可能です。

複数記事・複数箇所でテーブルが同期できるのが大きな強みでしたが、ブロックエディタに「ブロックの同期機能」が付いたため、この強みは薄れたかな……と思っています。

またエディタ上で編集できないのが地味に面倒。プラグインの編集画面を開いて編集するしかありません。

HTML（タグ手打ち）

古（いにしえ）から伝わるタグ打ちによるテーブル。　ブロックエディタでは「カスタムHTMLブロック」を挿入してタグを打ち込みます。

このブロック単体で、編集画面上でプレビューできるので、わざわざ記事プレビューを開かずともおおよそのレイアウトは確認可能。

ただしカスタムHTMLブロックは自動インデントされないので、非常に見にくい・扱いにくい。もちろんCSSは別途記述が必要で、プレビューには反映されません。

表ブロック

ブロックエディタの標準装備ブロックです。レスポンシブ非対応なのは惜しい。

でもセル数が少ないシンプルな表を作るだけなら、最も素早く完成できるのではないでしょうか。

Flexible Table Blockを使ってみる

Flexible Table Blockでできることを挙げていくと相当なボリュームなので、ここでは一般的な設定・機能だけをかいつまんで記載します。

• プラグインインストール〜テーブル挿入
• 行・列操作とセル結合
• Flexible Tableの各種設定
• HTML編集
• ヘッダー作成
• フォント色変更
• その他のセル設定

続いて、Googleスプレッドシート並みにややこしい罫線の設定、CSSでデザインしたい人向けのクラス付与方法、テーブルを使い回したい人向けの同期・解除方法も書いております。

• ちょっとややこしい罫線設定
• デフォルトCSSとクラス付与方法
• 作ったテーブルを使い回す方法

普段ブロックエディタを使わない人も、ぜひチャレンジしてみてくださいませ。

プラグインインストール〜テーブル挿入

WordPressのプラグイン検索で①「Flexible Table Block」を探してインストール・有効化します。続いて表を入れたい記事をブロックエディタで開きましょう。

表を挿入したい箇所にカーソル or ポインタを持っていくと、近場に「＋」（②）が出現するのでクリックしましょう。一覧にFlexible Table Blockがなければ（多分ない）「すべて表示」をクリック。

左側にブロック一覧のカラム（③）が開きます。この中から「Flexible Table Block」のアイコンを探しましょう。表の上に葉っぱが乗っているようなアイコンです。

※見つからなかったら、編集画面を一旦閉じて開き直してから探してみてください。

アイコンをクリックすると、テーブルの初期設定画面（④）が表示されます。後から設定できるので、まずは「表を作成」でよいのではないでしょうか。

行・列操作とセル結合

行や列を追加・削除する方法と、セルを結合する方法です。この操作は結構頻繁に使うかも知れませんね。

ブロックメニュー（表に触ると出てくる横長のバー）の「表」っぽいアイコンを起点にします。

行・列の追加と削除

行・列の挿入方法は大きく2つあります。

1つ目はセルを選択する方法。行・列を追加したい場所の隣接セルを選択し、メニュー内の「○○を○に挿入」をクリックすればOKです（画像その1）。行ごと・列ごと選択する必要はありません。

2つ目は丸ポチから追加する方法。テーブル周囲にあるグレーの丸ポチにポインタを乗せると「＋」と「○○を○に挿入」が表示されます（画像その2）。とてもわかりやすいですね！

なお行・列を削除する時は、行・列の端にある「くの字」マークを押して一括選択し（画像その3）、ゴミ箱マークをクリック。直感的ですねー。

セルの結合

セルの結合はめちゃくちゃ簡単。結合したいセルを選択し、メニュー内の「セルの結合」をクリックします。これだけ！カンタン！

上画像では、横方向の結合と縦方向の結合をやっています。プレビューを開かずに結合が確認できる安心感はFlexible Table Blockの強みですね……。自宅のトイレぐらいの安心感。

TablePressのセル結合では、セル内に「#colspan#」「#rowspan#」を記入するんですが、行・列どっちがどっちだっけ……ってなるし、プレビューを開かないとうまくいっているか確認できないんですわ。

Flexible Tableの各種設定

Flexible Table Blockで設定できる項目をザックリ挙げておきます。表をクリックするとエディタ右側にメニューが表示されるので、ざっと眺めてみてください。

メニューが出ていない場合は、WordPress右上の「設定」ボタンをクリックすれば出てきますよ。

メニューは大きく3つに分かれています。

• Flexible Table自体の設定
• ブロックのスタイル設定
• グローバル設定

Flexible Table自体の設定

メニュー内の歯車マークをアクティブにすると表示されます（図参照）。テーブル・セル・キャプションなど、Flexible Tableのパーツごとに設定できる項目が詰まっています。

• テーブル設定：テーブル幅や余白など全体の設定
• セルの設定：列・行の幅を変えたり単一セルの色を変えたり など

かなり細かく設定を追い込める印象です。

ブロックのスタイル設定

こちらはWordPressのブロック共通のデフォルト設定項目です。歯車の隣の丸いマークを押すと表示されます。

できることは「Flexible Table自体の設定」のテーブル設定とほぼ同じ。下手にいじると、どちらが適用されているかわからなくなるので、いじる必要はないかなーと思います。

グローバル設定

Flexible Tableの設定の一番上にある「グローバル設定」は、デフォルトスタイルが設定できます。

テーブルやセルの初期値設定はもちろん、レスポンシブの切替設定（○px以下になったらモバイル表示、など）もできます。

またテーブルそのものではなく、編集操作についても指定できる「エディターオプション」もスゴい。セル移動だのラベルの有無だの、自分が作業しやすいようにカスタムできるわけです。

HTML編集

Flexible Table Blockに限らず、ブロックエディタのコンポーネントのほとんどは「HTML」で編集できます。

ブロックメニューの「…」メニューから「HTMLとして編集」でタグが表示でき、直接編集も可能です。ただまあ、見てのとおりめっちゃくちゃ見にくい……。

使用シーンとして考えられるのは、CSS装飾用にクラスを付与する時でしょうか。ただ後述しますが「高度な設定」からクラスが付与できるので、滅多に使わないと思います。

※私は「モバイルのみ特定位置で改行」を指定する<span>タグを入れるのに使っています。

ヘッダー作成

Flexible Table Blockでテーブルヘッダー（フッター）を作る方法は以下の二択です。

• ヘッダーセクション：<thead>タグで囲まれる正真正銘のヘッダー
• セルを「TH」指定：表見出し<th>をヘッダーとして使う

マークアップ的には前者が正しいんだと思いますが、私はもろもろの理由で後者にしています。

ヘッダーセクション（画像①）

ヘッダーセクションを使うと、<thead>で囲まれた由緒正しいテーブルヘッダーが作成できます。作り方は超簡単で、「ヘッダーセクション」トグルをONにするだけです。

ちなみに、既存セルのヘッダー転用はできません。必ず新しいヘッダー（セルの中身がからっぽのヘッダー）が挿入されます。たとえばTHで作った表見出しを後からヘッダーセクションに変更、はNG。

また「ヘッダー」なので表の最上段・行方向（横向き）にしか作れません。

※ヘッダーセクションを指定すると「ヘッダー固定」が使えるようですが、私の環境ではうまく固定できませんでした……。

セルを「TH」指定（画像②）

「表見出し」をヘッダーとして扱う方法です。ヘッダーにしたいセルを選択した状態で「セルのタグ」から「TH」を選択すると、<td>で囲まれていたセルが<th>囲み、つまり表見出しに変わります。

THになったセルは背景がグレー・太字がデフォルトです（ブロックエディタ・プレビューとも）。お好みの色に変更して使いましょう。

TH指定の利点は、TDのセルを後からヘッダーにできることですね。また実のところ「ヘッダー」ではないので、列方向（縦向き）にも設定できます。

フォント色変更

Flexible Table Blockではフォント色や背景色がセル単位で変更できます。またフォント色はセル単位だけでなくテキスト単位でも指定可能。

これができるからHTMLをいじる必要がないわけです。なお、セル背景も同じ方法設定できます。直感的〜！

セル内のテキストの色を変更（画像①）

セルを選択した状態で「セルのテキスト色」の白丸をクリック。色の選択メニューが出てきます。パレットに使いたい色があれば、その色をクリックして適用しましょう。

使いたい色がなければカスタムカラーを使います。

グレーの格子部分をクリックするとカスタムカラーの選択画面が出てくるので、カラーコードを直接指定するか、グラデーションエリア・カラーバーを使って色を決めればOK。設定画面外のどこかをクリックして戻りましょう（「決定」ボタンはありません）。

なお、複数セルを選択すれば一括変更もできるし、セル背景もまったく同じ方法で変更できますよ〜。

テキストの一部分だけ色を変更（画像②）

色を変えたい文字だけを選択した状態でテーブルメニュー内「∨」をクリック→「ハイライト」を選択します。

あとは①と同じように色を指定するだけ。テキストの特定文字だけ色を変えられます。

その他のセル設定

他にもこんなことができますよーということで……。

複数のセルを選択した状態でさまざまなスタイルが一括適用できます。これが本当に便利。スタイルは行単位・列単位で統一することが多いので、めちゃくちゃ助かります。

TablePressだとCSSが必須だし、しかも行数・列数を指定してスタイルを適用するっていうトンデモ仕様ですから……。

それとメニューバーの「∨」内にある「インライン画像」を使うと、セル内に画像が入れられる！

ちょっとややこしい罫線設定

Flexible Table Blockでは「テーブルの罫線」「セルの罫線」が別々に設定できます。

上図の下段に書いたのが「テーブルの罫線」です。これを設定すると、テーブル外周の罫線だけにスタイルが適用されるようでした。

今回は見出しセルをの背景を茶色に、通常セル背景をベージュに変更し、それぞれ逆色の罫線を設定してみました。

セルを複数選択して、背景・罫線ともに一括指定するだけなのでカンタン〜。

と、思いきや……

見出しセルと通常セルの罫線が微妙にズレてしまいました。テーブル罫線を茶色で設定してあるのに、セル罫線が優先されてしまう模様……。ということで、「表ブロック」と入力したセルの罫線を修正しますよ。

上図の下段に手順を書きました。①セルを選択した状態で「②セルのボーダー色」のリンクマークをクリックします。

そうすると、上下左右別々に罫線が指定できるんですね〜。ということで右罫線を茶色に変更したところ、罫線の段差は解消できました。

Flexible Table Blockを別サイトでも使っているんですが、罫線の色指定は結構ややこしいというか、設定したはずの罫線色が変わってしまったり、上記のようにテーブル罫線の設定が無効になってしまったりするんですよね。

それでも、編集画面上で罫線のズレに気付けるので、修正が苦になりません。

デフォルトCSSとクラス付与方法

Flexible Table Blockは、上述のとおり編集画面上のメニューからさまざまなスタイルが付与できます。

また、当然ながらCSSでもスタイリングできます。セルのデフォルトスタイルは以下のとおり。テキストは上下中央揃えで左寄せですね。

th, td {
 padding: 0.5rem;
 border: 1px solid #000000;
 text-align: left;
 vertical-align: middle;
}

単一セルの装飾ならCSSを使わないほうがラク。ブロックエディタで見た目を確認しながら設定を追い込めるのが大きなメリットです。

ただしプラグインで設定できないスタイルを使いたければ、CSSの出番。テーブルの各パーツに「クラス」を付与しましょう。私はセル内改行をしたくないセルに「改行禁止」のCSSクラス「noBr」を適用しています。

なおCSSはブロックエディタの見た目に反映されません。そのため、CSSを脳内補完するか、エディタとプレビューを行ったり来たりする必要があります。

CSSのクラス設定

特定のセル（複数選択可）にクラスを付与する場合は、セルを選択した状態で「セルのCSSクラス」にクラスを記入します。上図では「noBr」を記入しました。

テーブル全体にクラスを付与するなら「高度な設定」内の「追加CSSクラス」を使います。

あとはCSSファイルにスタイルを記述するか、次に説明する「カスタムCSS」でサクッとCSSを指定しましょう。

※なお「高度な設定」はブロックエディタのすべてのブロックに設けられている項目で、CSSクラスだけでなくアンカーも付与できる優れもの。

サクッとCSSをいじるなら「カスタムCSS」

私は「子ファイル」を作っていないので、WordPressのちょっとしたCSSいじりには「カスタムCSS」を使っています。

いじりたいブロックにあらかじめクラスを付与しておき、記事のプレビューを開きます。上部に「カスタマイズ」という項目があるのでここをクリック。

プレビューの左側「カスタムCSS/JS」を選択すると記述エリアが出現するので、ここにザザザっとコードを書いていきます。

何がいいって、右側のプレビューに即反映されること！　「保存」を押さなくてもリアルタイムプレビューが可能なので、CSSに慣れていない人も安心です。

作ったテーブルを使い回す方法

ブロックエディタの便利機能として「ブロックの同期」があります。正式には「パターン」と呼ばれているようです（以前はこんな呼び名じゃなかった）。

この機能を使えば、TablePressのようにテーブルの同期・使い回しが可能！一応紹介しておきます。

ブロックをパターン化

まずはFlexible Tableのテーブルを「パターン」に登録しますよ！

まずメニューの「…」から①「パターンを作成」をクリック。わかりやすい名前②を付けます。今回は「MacBook価格表」にしてみました。

テーブルを複数箇所に埋め込んで同期して使いたい場合は「同期」のトグルをアクティブにしましょう。これでパターン化は完了。

ブロックエディタに戻ってテーブルを選択すると、パターン名の前に二重の菱形＋テーブル周囲に紫の枠が付いているはずです。

この状態ではテーブルが編集できません。登録ブロックなので、うかつに編集しないようにロックされているんですね〜。「オリジナルを編集」を押すとロックが解除されて編集できるようになります。

パターンブロック挿入と編集

パターンブロックを挿入する際はブロック一覧を展開し、「パターン」から「マイパターン」を選択します。その中から使いたいパターン（ブロック）を探してクリックすれば挿入OKです。

今回は、1つの記事に同一テーブルを2つ挿入してみました。この2つは登録中の親ブロックと同期中というより「親ブロックそのもの」。呪術廻戦でいうところの真人の分身ですね（？）。

ここから2つの方法でテーブルを編集してみましょう。

• 同期を気にせず編集
• 同期を切ってから編集

同期を気にせず編集（図左下）

下段テーブルの「オリジナルを編集」をクリックすると、テーブル編集画面に遷移します。表中の「チップ」を「チッポ」に変更し、元の画面に戻ると……。

上段のテーブルも「チッポ」に変わってしまいました。

2つの表が同期しているのではなく、2つの表が「登録ブロックと同期している」と考えてください。

「オリジナルを編集」は「登録ブロックを編集」なので、すべてのブロックが一斉に編集されることを覚えておきましょう。

同期を切ってから編集（図右下）

下段テーブルのテーブルメニューから「解除」を選択すると、他テーブルとのつながりが切れます。この状態で下段の「チップ」を「チップ性能」に変更しても、上段テーブルには影響しません。

こうやって簡単に同期を解除できる点において、TablePressよりも使い勝手が良いなと思っています。

TablePressで同じことをやろうとすると、エディタ上だけでは完結しないんですよね。

他方Flexible Tableはエディタ上で「解除」を押すだけ。めちゃくちゃラクだな〜と感じました。

できることはまだまだあるFlexible Table Block

思った以上に長くなってしまいましたが、Flexible Table Blockでできることは他にもたくさんあります。

メニューはすべて日本語表記でレイアウトもわかりやすいので、興味がある方はサクッとインストールして使ってみてください。