WordPressブロックでセルの結合・配色ができる表作成プラグインFlexible Table Block
ワードプレスのブロックエディターでシンプルな表を作成するならワードプレス標準のテーブルブロックでも十分ですが、やはりちょっと物足りない・・・そんなあなたにはプラグインFlexible Table Blockがおすすめです。
プラグインFlexible Table Blockを使えば、カスタムCSSを使わなくてもセルの結合やセルごとの配色など、簡単にできちゃいますよ。でもそれだけじゃありません・・・。
- プラグインFlexible Table Blockとは
- プラグインFlexible Table Blockでできること
- プラグインFlexible Table Blockの使い方
- 使用事例
この記事はデフォルトのテーブルブロックの操作はできるものとして解説していきます。テーブルブロックの操作方法については次の記事を参照ください。
https://web-children.com/2021/07/07/gutenberg-table-block/プラグインFlexible Table Blockとは
日本人開発者の浜野哲明さんが作成したプラグインです。2021年秋にリリースされたプラグインなのでまだ有効インストール数が多いとはいえませんが、使ってみると便利さに驚くはずです。
浜野さんはほかにもブロックエディターの使い勝手が便利になるプラグインを開発されているので、一度見てみるとよいでしょう。
プラグインFlexible Table Block でできること
デフォルトのテーブルブロックではできないことを中心にピックアップしてあげてみます。
（個人的に嬉しいと感じた順番です）
- セルごとのスタイル制御
（セルの結合・行高さ・文字色・背景色・パディング・角丸化・文字の配置・文字サイズ） - 枠線の制御
（色・幅・セパレート化・ボーダースタイル） - レシポンシブ対応（PCとモバイルの表示対応）
（はみ出した場合スクロールをつける or モバイルでは縦に積む） - レシポンシブ切り替えデバイス幅の設定
（初期値は768pxで切り替え。変更も可能） - キャプションの制御
（文字サイズ・行高さ・パディング・キャプションの位置（上・下/左・中央・右）） - 表ヘッダーの固定化・列の固定化
- テーブルの横幅設定
（横幅・最大幅・最小幅） - セルのタグ制御
（tdとthの切り替え） - テーブル・セルの角丸化
- 自分なりのデフォルト設定を登録可能
（よく使う設定を毎回変更する必要がなくなる）
このように表で思いつくことはほとんどできちゃいます。もちろんワードプレス標準のテーブルブロックと同じくストライプ状のスタイルも選択できます。
これならカスタムCSSのお世話になる必要はありませんよね。
プラグインFlexible Table Block の使い方
プラグインをインストール・有効化後の設定は何もありません。ブロックエディターを開けてブロックを挿入するところから始めます。
ブロックの挿入
Flexible Tableブロックは標準のテーブルブロックと同じテキストグループに入っています。
Flexible tableブロック挿入直後～表の作成
Flexible tableブロックを挿入すると次のように表示されます。
ここでカラム数・行数およびヘッダー・フッターセクションを指定して表の大枠を設定することができますが、あとからでも設定できるので ”表を作成” をクリックします。
すると次のように表が表示されます。あとはヘッダー追加や列数・行数を増減させたり、各セルへの文字入力・スタイルの調整をして表を完成させていきます。
表の作成基本操作
表の基本操作として、列・行の挿入・削除および結合・分割方法を紹介します。
列・行の挿入・削除
標準のテーブルブロックと操作方法はほとんど同じです。
１．任意のセルを選択（カーソルを置く）
選択したセルは青く表示されます。
２．テーブルの編集ボタンから挿入・削除を実施する
以上で選んだセルを起点にして列・行の挿入や削除ができます。
セルの結合
１．結合させたい任意のセルを複数選択する
１つずつセルを選択するならばCTRLキー（MacではCommandキー）を押しながら、いっぺんに範囲指定するならばShiftキーを押しながらカーソルでセルを選択します。
２．テーブルの編集ボタンから ”セルの結合” をクリックする
結合実施後です。
セルの分割
結合したセルは、分割することで元に戻せます。
１．分割したいセルを選択する
２．テーブルの編集から ”セルの分割” クリック
以上で結合したセルが元に戻ります。
列・行単位での一括選択で結合・削除
列単位・行単位で一括選択して結合や削除が可能です。
列単位の選択
行単位の選択
列単位・行単位の結合（セルの結合と同じ）
列単位・行単位の削除は、選択したときに表示される削除ボタン（ゴミ箱マーク）をクリック
以上で列・行の挿入・削除および結合・分割により、表の骨格が作成できたら、各セルに文字入力をしていきますが、特筆すべきことはないので説明は割愛します。
表のスタイルを整える手順
Flexible Table Blockのスタイルは、すでに紹介したとおり非常に多くの項目が調整可能です。なので、いちいちスタイルを個別に調整するのではなく表全体のデフォルトスタイルを決めてしまってから、一部変更したいところを調整する、という手順がよいかと思います。
- 表全体のデフォルトスタイルを決めて保存する
- 各部のスタイル調整
- （必要に応じて①②を繰り返すことも可能）
デフォルトスタイルは、すべてのFlexible Table Blockに適用されます。何度も同じ設定をする必要がない反面、あとから変更するとFlexible Table Blockで作成した既存の表のスタイルにも影響するので注意が必要です。
デフォルトスタイルを決める
デフォルトスタイルは、画面右のパネル内にある ”グローバル設定” で入力します。
項目を紹介すると以下の通りです。変更したら保存を忘れないようにしましょう。
テーブルのデフォルトスタイル
| スタイル | 初期値 |
|---|---|
| テーブルの横幅 | 100％ |
| テーブルの最大値 | 100％ |
| ストライプスタイルの背景色（奇数行） | 淡いグレー |
| ストライプスタイルの背景色（偶数行） | 白 |
| セルの枠線 | シェア |
ストライプスタイルの背景色は、テーブルのスタイルでストライプを選択した場合に適用されます。デフォルトスタイルの表では関係ありません。
セルのデフォルトスタイル
| スタイル | 初期値 |
|---|---|
| セルのテキスト色（thタグ） | テーマのデフォルト色 |
| セルの文字色（tdタグ） | テーマのデフォルト色 |
| セルの背景色（thタグ） | 淡いグレー |
| セルの背景色（tdタグ） | 白 |
| セルのパディング | 0.5em |
| セルのボーダー幅 | 1px |
| セルのボーダースタイル | solid |
| セルのボーダー色 | 黒 |
| セルのテキスト配置 | 左揃え |
| セルの縦配置 | 中央揃え |
thタグとはヘッダーとして使うセル、tdタグとは表のデータ領域（すなわち表のメイン部分）のセルを指します。
その他
| スタイル・エディター機能 | 初期値 |
|---|---|
| レシポンシブブレークポイント | 768px |
| エディター上でセクションラベルを表示する | ON |
| エディター上で行/列の挿入/選択ボタンを表示する | ON |
| 十字キーで移動するとき挿入/選択ボタン、行/列の選択ボタン、セクションラベルにフォーカスする | OFF |
| エディター上の<th>タグにドットを表示する | ON |
| セルを結合するときに、すべてのセルの内容を保持する | OFF |
| 管理者以外のユーザーにグローバル設定リンクを表示する | OFF |
レシポンシブポイントとは、PCとモバイルの表示を分ける画面幅のことをいいます。
レシポンシブポイント以下の画面幅で、”モバイルでは縦に並べる” などテーブル設定で設定したモバイル用の項目が適用されます。
768pxはノーマルiPadの画面幅ですから、とくにこだわりのない場合は変更しなくてよいでしょう。
これらのデフォルトスタイルの中であえて変更したいな、と私が思ったのは、セルのテキスト配置を左揃えから中央揃えにしておくことくらいですね。表の文字をセルの中央に配置することが私の場合多いからです。
あとは、セルのパディングをもう少し増やしたほうがいいかな、とも思います。0.5emでなく1emとか。
各スタイルの調整
デフォルトスタイルが決まったら、画面右パネルで追加変更したいスタイルを調整していきます。
”スタイル” は、標準のテーブルブロックにもあった設定で、表のスタイルとしてデフォルトかストライプタイプを選択します。
Flexible Table Blockであらたに追加された設定、"テーブル設定"、"セル設定"、"キャプション設定" の３つの設定について具体的に紹介していきましょう。
テーブル設定
デフォルト設定（グローバル設定）と同じ項目だけでなく、ここでしか設定できない項目があります。以下の通りです。
| スタイル | 説明 |
|---|---|
| ヘッダーセクション | 表にヘッダーをつける |
| フッターセクション | 表にフッターをつける |
| 表のセル幅を固定 | セルの横幅を表の中で均等に固定振り分けする |
| デスクトップ表示でスクロールする | 表がコンテンツ幅からはみ出したときにスクロールをつける （デスクトップ表示のとき※） |
| モバイル表示でスクロールする | 表がコンテンツ幅からはみ出したときにスクロールをつける （モバイル表示のとき※） |
| モバイルでは縦に並べる | モバイル表示のとき（※）表を縦に積み上げる |
| 固定制御 | ヘッダーまたは最初の列を固定表示する |
| テーブルのパディング | セルの枠線をセパレートしているとき表にパディングをつける |
| テーブルのボーダー幅 | セルの枠線をセパレートしているとき表に設定可能 |
| テーブルのボーダースタイル | 初期値は通常線。ドット、破線、2重線を選択できる |
| テーブルのボーダー色 | 初期値は黒 |
セル設定
セルの設定で個々のセルのスタイルを変更することができます。結合したセルも通常セルと同様に変更が可能です。
テーブル設定同様、デフォルト設定（グローバル設定）でできない設定をピックアップしておきます。
| スタイル | 説明 |
|---|---|
| セルのフォントサイズ | テーマのデフォルト値 |
| セルの行の高さ | テーマのデフォルト値 |
| セルの幅 | 初期値は自動 or 固定幅 |
| セルの角丸 | 初期値はゼロ |
| セルのタグ | 初期値：ヘッダーはth、通常セルはtd |
| セルのCSS | セルごとにカスタムCSSを適用するとき使う |
個々のセルごとに文字色や背景色をデフォルト設定（グローバル設定）から変更したい場合は、”セルのテキスト色”、”セルの背景色”を使います。画面右パネル内の”色”という項目を使うわけではないことに注意しましょう。
キャプション設定
キャプション設定は以下の通りです。キャプション設定はデフォルト設定（グローバル設定）にはないので、ここで設定するとよいでしょう。
表の作成事例
事例１：イメージと配色対応表（セルの結合と背景色を使用）
イメージと配色の対応表を作成してみました。セルの結合と背景色を多用することで作成可能です。
モバイル表示でスクロールをしているので、スマホ表示では次のように左右にスクロールします。
事例２：住所禄（モバイルで縦に並べる）
モバイルでは縦に積む設定にしておくとスマホでは次の表示となります。
このようにセルの色を工夫しておくと、縦に並べたときに見やすい表になります。
グローバル設定のレシポンシブブレークポイントで設定した横幅以下で縦に並べることになります。
まとめ
もう一度Flexible Table Blockでできることを並べてみます。
（私の好きな順です）
- セルのスタイル制御
（セルの結合・行高さ・文字色・背景色・パディング・角丸化・文字の配置・文字サイズ） - 枠線の制御
（色・幅・セパレート化・ボーダースタイル） - レシポンシブ対応（PCとモバイルの表示対応）
（はみ出した場合スクロールをつける or モバイルでは縦に積む） - レシポンシブ切り替えデバイス幅の設定
- キャプションの制御
（文字サイズ・行高さ・パディング・キャプションの位置（上・下/左・中央・右）） - 表ヘッダーの固定化・列の固定化
- テーブルの横幅設定
（横幅・最大幅・最小幅） - セルのタグ制御
（tdとthの切り替え） - テーブル・セルの角丸化
設定が多くて大変なように見えますが、デフォルト設定（グローバル設定）をうまく使えば、ほとんど少しの設定変更でかなり使いまわせるようになりそうですね。
ぜひあなたのブロックライブラリーに入れてみてはいかがでしょうか。
