ブロックエディターで綺麗なテーブルが作れるプラグイン「Flexible Table Block」

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

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

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

プラグインはテーマや他のプラグイン・WordPressのバージョン次第では、正常に動作しないことがあります。安全なプラグインのみを紹介しておりますが、導入される際は自己責任でお願いします。

目次

Flexible Table Blockの機能・メリット

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

機能一覧

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

  • テーブルの大きさや色の変更
  • テーブルやセルのボーダー(枠線)の変更
  • ヘッダーやフッター、キャプションの追加
  • セルの幅や背景色の変更
  • セルの結合や分割
  • スクロール機能の追加
  • ヘッダーセルなどの固定表示

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

テーブルの作成例

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

Flexible Table Blockで作ったテーブルのサンプル

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

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

頻繁なアップデートあり

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

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

機能の追加については私もTwitterで発信しているので、併せてチェックしてください

Flexible Table Blockの導入・起動

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

インストールと有効化

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

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

Flexible Table Blockのインストール

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

Flexible Table Blockでテーブルを作る

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

Flexible Table Blockのブロック

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

Flexible Table Blockの起動

テーブル編集の小技

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

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

複数セルの選択

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

CtrlやShiftで複数選択する

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

Ctrlを押しながらのクリックで複数のセルを選択する
2つのセルが選択されている

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

Shiftキーを押しながらのクリックでセルを複数選択する
9個のセルが選択されている

これに限らずPC操作のあらゆるところで使えます

行やカラムで選択する

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

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

Flexible Table Blockのセルの行・カラム選択

セルの結合

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

Flexible Table Blockのセルの結合

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

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

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

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

Flexible Table Blockのセル結合時にセル内のコンテンツを保持する設定

セルに画像を挿入する

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

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

Flexible Table Blockでの画像の挿入

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

インライン画像は文字が入る所ならどこでも使えます

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

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

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

テーブルのボーダースタイル
2, 内側のボーダー(枠線)を設定

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

セルのボーダースタイル
3, 完成

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

外と内でボーダーが異なるテーブル
お気に入りのスタイルです

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

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

Flexible Table Blockの単位の変更

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

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

Flexible Table Blockのグローバル設定

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

まとめ

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

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

他にも「これどうやって編集するの?」という
疑問があればTwitterまでどうぞ

目次
目次
閉じる