ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

WordPressブロックでセルの結合・配色ができる表作成プラグインFlexible Table Block

ワードプレスのブロックエディターでシンプルな表を作成するならワードプレス標準のテーブルブロックでも十分ですが、やはりちょっと物足りない・・・そんなあなたにはプラグインFlexible Table Blockがおすすめです。

プラグインFlexible Table Blockを使えば、カスタムCSSを使わなくてもセルの結合やセルごとの配色など、簡単にできちゃいますよ。でもそれだけじゃありません・・・。

この記事でわかること
  • プラグインFlexible Table Blockとは
  • プラグインFlexible Table Blockでできること
  • プラグインFlexible Table Blockの使い方
  • 使用事例

この記事はデフォルトのテーブルブロックの操作はできるものとして解説していきます。テーブルブロックの操作方法については次の記事を参照ください。

プラグインFlexible Table Blockとは

プラグインFlexible Table Block

日本人開発者の浜野哲明さんが作成したプラグインです。2021年秋にリリースされたプラグインなのでまだ有効インストール数が多いとはいえませんが、使ってみると便利さに驚くはずです。

浜野さんはほかにもブロックエディターの使い勝手が便利になるプラグインを開発されているので、一度見てみるとよいでしょう。

浜野さんのgithub

プラグインFlexible Table Block でできること

デフォルトのテーブルブロックではできないことを中心にピックアップしてあげてみます。
(個人的に嬉しいと感じた順番です)

  • セルごとのスタイル制御
    (セルの結合・行高さ・文字色・背景色・パディング・角丸化・文字の配置・文字サイズ)
  • 枠線の制御
    (色・幅・セパレート化・ボーダースタイル)
  • レシポンシブ対応(PCとモバイルの表示対応)
    (はみ出した場合スクロールをつける or モバイルでは縦に積む)
  • レシポンシブ切り替えデバイス幅の設定
    (初期値は768pxで切り替え。変更も可能)
  • キャプションの制御
    (文字サイズ・行高さ・パディング・キャプションの位置(上・下/左・中央・右))
  • 表ヘッダーの固定化・列の固定化
  • テーブルの横幅設定
    (横幅・最大幅・最小幅)
  • セルのタグ制御
    (tdとthの切り替え)
  • テーブル・セルの角丸化
  • 自分なりのデフォルト設定を登録可能
    (よく使う設定を毎回変更する必要がなくなる)

このように表で思いつくことはほとんどできちゃいます。もちろんワードプレス標準のテーブルブロックと同じくストライプ状のスタイルも選択できます。

これならカスタムCSSのお世話になる必要はありませんよね。

プラグインFlexible Table Block の使い方

プラグインをインストール・有効化後の設定は何もありません。ブロックエディターを開けてブロックを挿入するところから始めます。

ブロックの挿入

Flexible Tableブロックは標準のテーブルブロックと同じテキストグループに入っています。

Flexible Table

Flexible tableブロック挿入直後~表の作成

Flexible tableブロックを挿入すると次のように表示されます。

Flexible Table挿入直後

ここでカラム数・行数およびヘッダー・フッターセクションを指定して表の大枠を設定することができますが、あとからでも設定できるので ”表を作成” をクリックします。

すると次のように表が表示されます。あとはヘッダー追加や列数・行数を増減させたり、各セルへの文字入力・スタイルの調整をして表を完成させていきます。

表の作成直後

表の作成基本操作

表の基本操作として、列・行の挿入・削除および結合・分割方法を紹介します。

列・行の挿入・削除

標準のテーブルブロックと操作方法はほとんど同じです。

1.任意のセルを選択(カーソルを置く)

任意のセルを選択

選択したセルは青く表示されます。

2.テーブルの編集ボタンから挿入・削除を実施する

テーブルの編集から挿入または削除をする

以上で選んだセルを起点にして列・行の挿入や削除ができます。

セルの結合

1.結合させたい任意のセルを複数選択する

1つずつセルを選択するならばCTRLキー(MacではCommandキー)を押しながら、いっぺんに範囲指定するならばShiftキーを押しながらカーソルでセルを選択します。

複数のセルを選択

2.テーブルの編集ボタンから ”セルの結合” をクリックする

テーブルの編集からセルの結合

結合実施後です。

結合実施後

セルの分割

結合したセルは、分割することで元に戻せます。

1.分割したいセルを選択する

分割したいセルを選択

2.テーブルの編集から ”セルの分割” クリック

セルの分割

以上で結合したセルが元に戻ります。

列・行単位での一括選択で結合・削除

列単位・行単位で一括選択して結合や削除が可能です。

列単位の選択

列単位の選択

行単位の選択

行単位の選択

列単位・行単位の結合(セルの結合と同じ)

テーブルの編集からセルの結合

列単位・行単位の削除は、選択したときに表示される削除ボタン(ゴミ箱マーク)をクリック

列単位の削除

以上で列・行の挿入・削除および結合・分割により、表の骨格が作成できたら、各セルに文字入力をしていきますが、特筆すべきことはないので説明は割愛します。

表のスタイルを整える手順

Flexible Table Blockのスタイルは、すでに紹介したとおり非常に多くの項目が調整可能です。なので、いちいちスタイルを個別に調整するのではなく表全体のデフォルトスタイルを決めてしまってから、一部変更したいところを調整する、という手順がよいかと思います。

  1. 表全体のデフォルトスタイルを決めて保存する
  2. 各部のスタイル調整
  3. (必要に応じて①②を繰り返すことも可能)

デフォルトスタイルは、すべての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であらたに追加された設定、"テーブル設定"、"セル設定"、"キャプション設定" の3つの設定について具体的に紹介していきましょう。

テーブル設定

テーブル設定

デフォルト設定(グローバル設定)と同じ項目だけでなく、ここでしか設定できない項目があります。以下の通りです。

スタイル説明
ヘッダーセクション表にヘッダーをつける
フッターセクション表にフッターをつける
表のセル幅を固定セルの横幅を表の中で均等に固定振り分けする
デスクトップ表示でスクロールする表がコンテンツ幅からはみ出したときにスクロールをつける
(デスクトップ表示のとき※)
モバイル表示でスクロールする 表がコンテンツ幅からはみ出したときにスクロールをつける
(モバイル表示のとき※)
モバイルでは縦に並べるモバイル表示のとき(※)表を縦に積み上げる
固定制御ヘッダーまたは最初の列を固定表示する
テーブルのパディングセルの枠線をセパレートしているとき表にパディングをつける
テーブルのボーダー幅 セルの枠線をセパレートしているとき表に設定可能
テーブルのボーダースタイル初期値は通常線。ドット、破線、2重線を選択できる
テーブルのボーダー色初期値は黒

セル設定

セルの設定で個々のセルのスタイルを変更することができます。結合したセルも通常セルと同様に変更が可能です。

セル設定

テーブル設定同様、デフォルト設定(グローバル設定)でできない設定をピックアップしておきます。

スタイル説明
セルのフォントサイズテーマのデフォルト値
セルの行の高さテーマのデフォルト値
セルの幅初期値は自動 or 固定幅
セルの角丸初期値はゼロ
セルのタグ初期値:ヘッダーはth、通常セルはtd
セルのCSSセルごとにカスタムCSSを適用するとき使う

個々のセルごとに文字色や背景色をデフォルト設定(グローバル設定)から変更したい場合は、”セルのテキスト色”、”セルの背景色”を使います。画面右パネル内の”色”という項目を使うわけではないことに注意しましょう。

キャプション設定

キャプション設定は以下の通りです。キャプション設定はデフォルト設定(グローバル設定)にはないので、ここで設定するとよいでしょう。

キャプション設定

表の作成事例

事例1:イメージと配色対応表(セルの結合と背景色を使用)

イメージと配色の対応表を作成してみました。セルの結合と背景色を多用することで作成可能です。

イメージと配色(PC表示)

モバイル表示でスクロールをしているので、スマホ表示では次のように左右にスクロールします。

イメージと配色(スマホ表示)

事例2:住所禄(モバイルで縦に並べる)

住所録(PC表示)

モバイルでは縦に積む設定にしておくとスマホでは次の表示となります。

住所録(スマホ表示)

このようにセルの色を工夫しておくと、縦に並べたときに見やすい表になります。

グローバル設定のレシポンシブブレークポイントで設定した横幅以下で縦に並べることになります。

まとめ

もう一度Flexible Table Blockでできることを並べてみます。
(私の好きな順です)

  • セルのスタイル制御
    (セルの結合・行高さ・文字色・背景色・パディング・角丸化・文字の配置・文字サイズ)
  • 枠線の制御
    (色・幅・セパレート化・ボーダースタイル)
  • レシポンシブ対応(PCとモバイルの表示対応)
    (はみ出した場合スクロールをつける or モバイルでは縦に積む)
  • レシポンシブ切り替えデバイス幅の設定
  • キャプションの制御
    (文字サイズ・行高さ・パディング・キャプションの位置(上・下/左・中央・右))
  • 表ヘッダーの固定化・列の固定化
  • テーブルの横幅設定
    (横幅・最大幅・最小幅)
  • セルのタグ制御
    (tdとthの切り替え)
  • テーブル・セルの角丸化

設定が多くて大変なように見えますが、デフォルト設定(グローバル設定)をうまく使えば、ほとんど少しの設定変更でかなり使いまわせるようになりそうですね。

ぜひあなたのブロックライブラリーに入れてみてはいかがでしょうか。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる