ブロックエディタで自由自在にテーブルが作れるプラグイン「Flexible Table Block」

ブロックエディター(Gutenberg)使ってますか？
クラシックエディターから変えた頃はどうなるかと思いましたが、慣れるとかなり使い勝手がいいですよね。

ただ、ブロックエディターの「テーブル」は微妙だと感じている人も多いでしょう。機能が無さすぎて「文字を入れるだけの箱」なんて揶揄されることも…

そこで今回は、そんな不満を解消してくれるプラグイン「Flexible Table Block」を紹介します。高機能なのに使いやすく、誰でも綺麗なテーブルが作れますよ！

Flexible Table Blockの機能

Flexible Table Blockは、ブロックエディター(Gutenberg)で使える「拡張版テーブルブロック」を追加するプラグインです。

機能一覧

このプラグインで使えるテーブルでは、以下のような編集ができます。

直感的に思い通りのテーブル(表)を作ることができるのが一番の魅力です。操作感と機能性はExcelに近いかもしれません。

ちなみに、Flexible Table Blockはブロックディター (Gutenberg) 専用です。クラシックエディターで同様の機能・操作感を求めるなら「TablePress」がおすすめですよ。

TablePress の使い方・解説

テーブルの作成例

プラグインの機能を使えば、こんな表も簡単に作れちゃいます。

普通のテーブルブロックだとセル幅の変更や結合はもちろんのこと、ヘッダーなども使用することができないため、このプラグインの導入でデザインの幅が広がるのは間違いないでしょう。

さらに、プラグインは日本語対応している上に完全無料です。ブロックエディターでテーブル(表)を作るなら、Flexible Table Blockの導入を強くオススメします！

頻繁なアップデートあり

Flexible Table Blockはリリースされて間もないプラグインです。
そのため、今も頻繁にアップデートされて新しい機能が追加されています。

アップデート情報や追加機能について詳しい情報が知りたい方は、開発者の浜野哲明さん(@tetsuaki_hamano)のツイートをチェックしてみてください。

---

Flexible Table Blockの導入・起動方法

それでは、プラグインを導入していきましょう。
難しい初期設定もないので安心してインストールしてください。

インストールと有効化

プラグインの「新規追加」へ移動し、”Flexible Table Block”で検索。

見つかったらインストールと有効化をしましょう。

導入に関しては以上です。
既にエディター上からFlexible Table Blockが使えるようになっています。

Flexible Table Blockでテーブルを作る

Flexible Table Blockでテーブルを作る際は、普通のテーブルブロックではなくウィジェット内の「flexible table」を使用します。

ブロックを選択すると、表の行数やカラム数・ヘッダーやフッターなどを設定するポップアップが出ます。適当にカラム数などを選択し、「表を作成」をクリックしましょう。(後から変更・追加可能です)

---

Flexible Table Blockの使い方

右側のサイドバーから直感的に操作できるので、基本的な編集は説明するまでもないかと思います。

そのため、ここでは「これどうやるんだっけ？」となりがちな編集の小技を紹介していきます。一度覚えればExcelのようにパパッと思い通りの表が作れるようになりますよ。

複数セルの選択

セルをまとめて編集したい時は、複数のセルを選択して編集するのが楽です。

CtrlやShiftで複数選択する

ひとつずつ選択したい場合は、Ctrlキー＋クリックで選択するセルを増やすことができます。

まとめて選択したい場合は、始点をクリックして終点をShiftキー＋クリックで、始点から終点までのセルが一括で選択されます。

行やカラムで選択する

行やカラムを指定して選択したい場合は、任意の行・カラム前のボタンをクリックすれば、まるごと選択することができます。

この場合は1行・1カラムずつしか指定できず、2～3行をまとめて指定するといったことはできません。

セルの結合

2つ以上のセルを選択して、文書ツールの「テーブル編集」から「セルの結合」をクリックします。

元に戻す場合は「セルの分割」で結合したセルが分かれます。

セル結合時にセル内のコンテンツ(文字)を保持する

グローバル設定のオプションから「結合するセル内のコンテンツを全て残すかどうか」が選択できます。(ver2.2.0より)

デフォルトではこの設定がOFFになので、セル結合時に後ろ側のセル内のコンテンツが消えるようになっています。

セルの背景色・文字色を変える

特定のセルの色（背景色や文字色）を変えることもできます。

1. セルを選択（複数選択可）
2. サイドバーから文字色・背景色を選択する

セルに画像を挿入する

挿入したいセルを選択、文書ツールの「インライン画像」で画像を挿入することができます。

画像をクリックすれば大きさも変更することが可能です。

インライン画像はHTMLに埋め込まれるため、入れ過ぎると表示速度が遅くなることがあるので注意してください。

外側と内側で異なるボーダーを設定する

1, 外側のボーダー(枠線)を設定

「テーブル設定」の「テーブルのボーダースタイル」から変更します。(右のボタンをクリックすれば、上下左右を別々に指定することもできます)

2, 内側のボーダー(枠線)を設定

「Shift＋クリック」でセルを全て選択して、「複数セル設定」の「セルのボーダースタイル」で変更します。(ヘッダーやフッターは別途行う必要がある)

3, 完成

完成すれば、こんな感じになります。

px以外の単位で大きさを指定する

セルの幅やフォントサイズなどはデフォルトでpx(ピクセル)単位になっています。%などの他の単位で指定したい場合は、「PX」の部分をクリックすると任意の単位に変更することができます。

デフォルトのスタイルを変更する

テーブルの設定の下「グローバル設定」から、テーブルやセルのデフォルトのスタイルを変更することが可能です。

毎回スタイルを考えるのは大変なので、グローバル設定を使いお気に入りのスタイルを使いまわしましょう。

---

まとめ

ブロックエディターのテーブルは使い勝手が悪いものでしたが、そんな不満ともこれでおさらばですね。

テーブルは情報伝達にはもってこいの媒体です。このプラグインを上手く使って、ブログ記事をさらに良いものにしていきましょう。