WordPressのブロックエディタは、テーブル（表）の各セルを個別にカスタマイズできない問題があります。
直感的に操作できるブロックエディタにも関わらず、テーブルだけはクラシックエディタを使う必要がありました。この問題を解決してくれるのが、今回紹介するFlexible Table Blockです。
セルを個別に編集できるだけでなく、枠のデザインや画像の挿入など、自由度の高いカスタマイズが可能。テーブルを多様する人にとっては、大きなアドバンテージになるでしょう。本記事では、Flexible Table Blockの使い方について解説します。
目次
Flexible Table Blockでできること
Flexible Table Blockは、日本人の「Aki Hamano」さんが作った無料で使えるWordPressのプラグインです。
ブロックエディタでのみ動作するプラグインで、日本語にも完全対応。
有料プランはなく、完全無料で使えるプラグインとなっています。
ブロックエディタの場合、セルごとにテーブルを編集できないデメリットがありました。ヘッダーのテキストだけ中央に配置したり、文字色や背景色を変えられなかったのです。
Flexible Table Blockを有効化することで、自由にカスタマイズできるようになります。
- セルの統合
- 背景色の設定
- 枠線の種類を変更
- 画像の挿入
- キャプションの位置を変更
- スクロール機能
- セルを固定表示
非常に自由度が高く、痒いところに手が届く仕様になっています。
頻繁にテーブルを利用する人にとっては、かなり価値の高いプラグインと言えるでしょう。
Flexible Table Blockの導入方法
はじめにFlexible Table BlockをWordPressにインストールしていきましょう。
WordPressの管理画面「プラグイン」→「新規追加」を選択した後「Flexible Table Block」と検索してください。
Flexible Table Blockの右側にある「今すぐインストール」をクリックします。
「今すぐインストール」をクリックすると「有効化」と表示されるので、こちらをクリックしてください。
これでインストールは完了です。
Flexible Table Blockの呼び出し方
WordPressの投稿画面左上にある「＋」ボタンをクリックします。
メニューの中に「Flexible Table」が追加されているので、こちらをクリックしてください。
投稿画面にFlexible Table Blockが追加されました。
毎回「＋」ボタンをクリックするのが面倒な方は、投稿画面上で「/」を入力した後「fle」と入力することで、簡単に呼び出せます。
これでFlexible Table Blockを使う準備が整いました。
Flexible Table Blockの使い方
Flexible Table Blockの便利機能の使い方を紹介します。
- セルの結合と分割
- セルの文字色や背景色を変更する
- ボーダー（枠線）のデザインを変更する
- セル内に画像を挿入する
- セルを固定表示する
- スクロール機能を設定する
- 行・列の追加と削除
- キャプションの位置を変更する
- よく使うデザインをデフォルトに設定する
セルの結合と分割
はじめに統合したいセルを選択します。
- Shiftキーを押しながら統合したいセルを選択
- テーブルマークをクリック
- 「セルの統合」をクリック
上記の手順でセルを統合できます。
セルをクリックすると、テキストが入力できます。
WordPressに標準装備されているテーブルと同じ使い勝手です。
プレビューで確認すると、下画像のようになりました。
セルの文字色や背景色を変更する
セルのテキストを装飾する際は、右上の設定ボタンをクリックします。
メニューが表示されます。
セルごとのテキストを装飾する場合は「セル設定」をクリックしてください。
下部にある「色」からテキストや背景色は、テーブル内の全てに適用されることを覚えておきましょう。
「セル設定」にある「セルのテキスト色」と「セルの背景色」を変更すると、選択したセル内のテキストを装飾可能です。
各項目の色をクリックすると、詳細が表示されます。
細かく色をカスタマイズしたい時は、カラー名をクリックしてください。
マウスで任意のカラーに設定するか、カラーコードを入力する方法もあります。
最後にプレビューで変更が適用されているかチェックしましょう。
ボーダー（枠線）のデザインを変更する
セルごとのボーダーを設定する
テーブルのボーダーを個別に変更する際は「セル設定」で行います。
ボーダースタイルでは点線や二重線などが設定可能。ボーダー色の変更もできます。
テーブル全体のボーダーを設定する
テーブル全体に変更を反映したい時は「テーブル設定」から行います。
「テーブルのボーダースタイル」と「テーブルのボーダー色」を変更すると、全体に反映されます。
「セルの枠線」では「シェア」と「セパレート」が選択可能です。
シェアは通常のテーブルで、セパレートを選択すると各セルが独立します。
内容によって使い分ければ、かなり見やすいテーブルが作れるでしょう。
セル内に画像を挿入する
画像を挿入したいセルを選択した状態で、上部にある「さらに表示」ボタンをクリックしてください。
メニューの詳細が表示されるので「インライン画像」を選択します。
挿入したい画像をアップロードして選択すると、セルの中に画像が挿入されます。
テキストと画像の組み合わせも可能なので、物販アフィリエイトの比較表を作る時に重宝します。
バランス良く並べるには、画像のサイズを揃えて作成するのがポイントです。
セルを固定表示する
Flexible Table Blockでは、EXCELのようにヘッダーか最初の列を固定表示に設定できます。
「テーブル設定」の中にある「固定制御」をクリックしてください。
- なし
- 固定ヘッダー
- 最初の列を固定
上記3つから好みのものを選択すれば設定完了です。
スクロール機能を設定する
スクロール機能は「テーブル設定」から行えます。
- デスクトップ表示でスクロールする
- モバイル表示でスクロールする
上記のいずれかを設定してください。
セルがたくさんあるテーブルを作る際は、スクロールをオンにしておくと利便性が上がります。
入力したテキストが見づらくならないようにするには「テーブルの横幅」を余裕のあるサイズに設定すればOKです。
プレビューを確認するとスクロール機能が有効化されていることが分かります。
行・列の追加と削除
行や列を追加する際は、テーブルの端にある「・」をクリックします。
マウスを合わせると「＋」マークに変わるので、こちらをクリックしましょう。
同様の操作をメニューから行うことも可能です。
- セルを選択
- テーブルマークをクリック
- 挿入ボタンをクリック
行や列を削除する際は、セルの端にある矢印マークをクリックして表示される、ゴミ箱マークをクリックしてください。
テーブルマークからも行や列の削除を選択できます。
キャプションの位置を変更する
キャプションをカスタマイズするには、テーブル設定の下にある「キャプション設定」をクリックします。
キャプションの位置やフォントサイズなどを設定可能です。
「リセット」をクリックすると、初期状態に戻せます。
参照元を掲載して、事実に基づいたテーブルであることを示す際に使えるでしょう。
よく使うデザインをデフォルトに設定する
常に同じデザインでテーブルを作りたい方は、デザインを保存することもできます。
Flexible Table Blockのメニューにある「グローバル設定」をクリックしましょう。
デフォルトのデザインを細かく設定できます。
プレビューを確認しながら、好みのデザインを設定してください。
全ての設定が完了したら「保存」をクリックしましょう。
これで毎回初期設定をする必要がなくなります。
効率的にテーブルを作成したい方は、ぜひ利用してみてください。
Flexible Table Blockのテンプレを複数保存する方法
Flexible Table Blockは、WordPressの再利用ブロックと組み合わせることで、よく使うテーブルデザインを登録して、簡単に呼び出せるようになります。
手順は以下の通りです。
- Flexible Table Blockでテーブルを作成
- 再利用ブロックに登録
- 作成した再利用ブロックを呼び出す
まずは、先述の作成手順で、お好きなテーブルをつくります。例えば、こんな感じです （例：「プランテーブル」）。
作成できたら、オプションから「パターン/再利用ブロックの作成」を押します。
次に再利用ブロックの名称を登録して、「生成」ボタンを押します。
すると次のよう「再利用ブロック」であることが紫の枠線で示されます。左上に「プランテーブル」という名称も左上に表示されていますね。これで登録完了です。
あとは、設置したい時に呼び出して使うだけです。
左上の「＋」マークから「再利用ブロック」のロゴをクリックして、このように一覧から呼び出せます。
もちろん、通常のブロックと同様で名称で検索しても呼び出し可能です。
次のように先ほど作成したプランテーブルがワンタッチで投稿画面に表示されます。
Flexible Table Blockと再利用ブロックをフル活用することで、面倒なテーブル作成を効率化できますね。複雑なテーブルも、あらかじめ作っておけば何度でも使い回し可能なので、スムーズに作業できるでしょう。
まとめ
Flexible Table Blockは、ブロックエディタ派にとって待望のプラグインと言えるのではないでしょうか。
セルごとの設定ができるだけでなく、各セルを独立させたり、スクロール設定ができたりなど、テーブル作成に関する様々な機能が利用できます。高機能にも関わらず、無料で利用できるのも魅力です。
画像が挿入できたり、ヘッダーを固定するなど、活用次第でCTAを作ることもできるでしょう。WordPressの再利用ブロックに保存すれば、よく使うテーブルデザインを瞬時に利用できます。
ブロックエディタのテーブル作成にストレスを感じていた方は、ぜひFlexible Table Blockを試してみてください。
コメント