自由自在にかっこいいテーブルがつくれるWPプラグイン「Flexible Table Block」便利な機能8つを詳しく解説

ワードプレスにはもともと、テーブル(表)を作る機能がありますが、機能が限定していてスマホ表示などでは窮屈な表示になってしまうことが多いです。

そんな時に感じるのが、「スマホ表示でも表がキレイに表示されるように横スクロールする機能を追加したい!」ということです。

この記事では、そんな悩みをお持ちの方に、スマホ表示でも横幅の広い表がキレイに表示されるように横スクロールする機能を簡単に追加できる「Flexible Table Block」という便利なプラグインの導入方法と使い方をご紹介します。

Flexible Table Blockでできること

ちなみにFlexible Table Blockは、テーブルに横スクロールする機能を追加できるだけでなく、様々な機能を兼ね備えています。

その機能には以下のようなものがあります。

  1. セルの統合や分割
  2. ヘッダーセクションの追加
  3. セルのテキスト色・背景色の変更
  4. セル幅の指定(固定)(pxによる指定もしくは%指定)
  5. 幅広のテーブルをスクロールさせる(デスクトップ・モバイル)
  6. キャプションの設定(フォントサイズ・位置)
  7. 列や行を簡単に追加することができる
  8. 列や行を簡単に削除することができる

※Flexible Table Blockには、これら以外にもたくさんの機能があり直感的に使用することができるのでぜひ使ってみてください。

これら機能の設定方法は、記事後半で詳しく解説します。


Flexible Table Blockのインストール
Flexible Table Blockの導入

それでは、まずFlexible Table Blockの導入方法を実際の管理画面の画像を使って分かりやすく解説していきます。

Flexible Table Blockのインストール

まずは、Flexible Table Blockをインストールしていきましょう。

プラグイン⇒新規追加で「Flexible Table Block」と入力してください。

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を選択したら、以下のような画面が表示されます。

Flexible Table Block 表のカラム数や行数の初期設定

これから作成する表に合わせてカラム数と行数を決めて入力してください。

ヘッダーセクションやフッターセクションが必要な場合は、この画面でも設定できますので必要なら設定しておきましょう。

先程、「Flexible Table Blockでできること」でご紹介した内容ををひとつひとつ解説していきます。

確認のため、もう一度、記載しておきます。

  1. セルの統合や分割
  2. ヘッダーセクションの追加
  3. セルのテキスト色・背景色の変更
  4. セル幅の指定(固定)(pxによる指定もしくは%指定)
  5. 幅広のテーブルをスクロールさせる(デスクトップ・モバイル)
  6. キャプションの設定(フォントサイズ・位置)
  7. 列や行を簡単に追加することができる
  8. 列や行を簡単に削除することができる

01.セルの統合や分割

Flexible Table Blockでセルの統合と分割の方法を解説します。

セルの統合

セルの統合については、まず統合する複数のセルを選択します。

複数のセルを選択するには、Ctrlキーを押しながら統合する複数のセルをクリックしていけば複数のセルを選択するることができます。

また、一気に多くのセルを選択したい場合は、まず始点となるセルをクリックし、Shiftキーを押しながら終点のセルをクリックすると、視点から終点までのすべてのセルを選択することができます。

Flexible Table Blockで複数のセルを選択

複数のセルを選択したら、メニューバーのテーブルアイコンを選択します。

Flexible Table Blockで複数のセルを選択後にメニューバーのテーブルアイコンを選択

テーブルアイコンをクリックすると、「セルの統合」が表示されますのでクリックしてください。

Flexible Table Blockでセルを統合

セルの統合が完了です。

セルの分割

セルの分割は、統合したセルを選択しメニューバーのテーブルアイコンを選択します。

Flexible Table Block セルの統合

そうすると、「セルの分割」という選択肢が表示されますのでクリックしてください。

Flexible Table Blockでセルの分割

そうすると、以下の画像のように統合されていたセルが分割されます。

Flexible Table Blockでセルの分割が完成

02.ヘッダーセクションの追加

表にヘッダーセクションを追加する方法は表のブロックを選択した状態でサイドメニューの「テーブル設定」をクリックしてください。

テーブル設定を選択すると、テーブル設定のメニューが表示されますので、ヘッダーセクションをONにしましょう。

Flexible Table Blockでヘッダーセクションの追加

すると、ヘッダーセクションが追加されます。

ヘッダーセクションの背景色は個別に設定できますので、次項でその方法を解説します。

03.セルのテキスト色・背景色をセルごとに設定する

テキスト色・背景色もセルごとに個別に設定できます。

ブロックエディターのテーブルの場合、少し面倒なのですが、Flexible Table Blockの場合、非常に簡単にテキスト色・背景色の設定ができます。

テキスト色の設定

まず、テキストの色を変更するセルを選択してください。

そして、右のブロックメニューの「セルの設定」をクリックしましょう。

Flexible Table Blockのセル設定でテキスト色を変更

開いたメニューの中に、テキスト色の選択メニューが出てきます。

いくつかサンプルで色が用意されていますので、気に入った色があれば選択してみてください。

もし、お好みの色が無い場合は「カスタムカラー」を選択してカラーコードをいれてお好みの色を設定してください。

背景色の設定

背景色の設定に関してもテキスト色の設定とほぼ同じですが、念のためご説明します。

まず、背景色を変更したいセルを選択⇒右のメニューから「セル設定」を選択し、今度は「セルの背景色」のメニューから背景色を変更していきましょう。

テキスト色同様に、色を選択すればセルの背景色を変更することができます。

04.セルの横幅・テーブル全体の横幅を固定する

Flexible Table Blockでは、セルの横幅やテーブル全体の横幅を指定して固定することができます。

セル幅の固定

しかも、PXだけでなくEM・REMといった単位を指定して変更することができます。もちろんテーブル全体の横幅の何%という指定もできます。

セルの横幅を固定する方法は、横幅を固定したいセルを選択し、右のメニューから「セル設定」をクリックします。

すると、セルの設定メニューが開きますので「セルの幅」という部分から幅を設定していきます。

Flexible Table Block でセルの幅を設定する

先程も、ご説明いたしましたがセルの幅はPX・EM・REMの単位を指定して設定することができます。

Flexible Table Block でセルの幅を固定する

テーブル全体幅の割合(%)でもセルの幅を指定できますが、割合を小さくしすぎるとスマホ表示では窮屈なセル幅になるので注意が必要です。

テーブル全体の横幅の固定

セルの横幅だけでなく、テーブル全体の横幅も指定して固定することができます。

右サイドメニューから「テーブル設定」を選択してテーブル設定メニューを開いてください。

Flexible Table Blockで横幅を設定するためにテーブル設定を開く

テーブル設定メニューの中に、「テーブルの横幅」「テーブルの最大幅」「テーブルの最小幅」という設定項目があります。

Flexible Table Blockを使ってテーブルの最小幅を設定する

必要に応じて、テーブルの横幅を「テーブルの横幅」「テーブルの最大幅」「テーブルの最小幅」という3つのメニューを使って指定することができます。

ちなみに、弊社サイトの場合はスマホ表示でテーブルのテキストがキレイに表示されるようにテーブルの最小幅を設定して、次項でご紹介するテーブルの横スクロール機能をつけてスマホ表示でもテーブルがキレイに表示されるようにしています。

05.幅広のテーブルをスクロールさせる(デスクトップ・モバイル)

私がFlexible Table Blockの機能の中で一番気に入っているのが、テーブル(表)に横スクロールする機能を簡単に付けることができる点です。

ブロックエディターのテーブルにはもちろん、横スクロールを付ける機能は付いていないので、Flexible Table Blockの横スクロールを付加する機能は重宝しています。

Flexible Table Blockの横スクロールを付加する機能につきましては、少し長くなるので以下の記事で個別に解説していますので参考にしてください。

スマホ表示で横スクロールするかっこいいテーブルをFlexible Table Blockで簡単に作成する方法

06.キャプションの設定(フォントサイズ・位置)

キャプションとはテーブルに関する簡単な説明文であるとお考えください。

Flexible Table Blockのキャプション設定

上の画像は、弊社サイトのトップページにあるホームページ制作プランの料金・内容についての表ですが、表の下部に「各プランの料金・内容について(横スクロールします)」と記載してあります。

このキャプションの位置やフォントサイズを変更することができます。

キャプション設定メニューについて

テーブルを選択して、右サイド部分のメニューから「キャプション設定」を選択しましょう。

キャプション設定のメニューが開きます。

具体的には以下の設定ができます。

  • キャプションのフォントサイズ
  • キャプションの行の高さ
  • キャプションのパディングの設定
  • キャプションの位置の変更(上下)
  • キャプションの位置の変更

次項から個別に解説していきます。

キャプションのフォントサイズ

キャプションのフォントサイズの欄に、数値を入力することでフォントサイズを変更することができます。

ちなみに、キャプションのフォントサイズに関しても%・PX・EM・REMの単位を指定して設定することができます。

キャプションの行の高さ

キャプションの行の高さは、キャプションの文字が収まっている行の高さのことです。

行の高さを変更するにはこの欄に数値を入力すれば変更可能です。

キャプションのパディング

キャプションのパディングに関しては基本的に調整される方は少ないかと思いますので簡単にご説明させていただきます。

まずパディングとは、簡単に分かりやすく言うとキャプションのテキストに対する上下左右の余白だと思ってください。厳密には少し違いますがここでの説明は割愛させていただきます。

パディングとはテキストなどが収まっている要素の内側の余白

パディングに関しても%・PX・EM・REM・VW・VHの単位で指定が可能です。

ちなみに、キャプションのパディングは上下左右を個別に指定することも可能です。

「キャプションのパディング」のリセットボタン下の青い部分をクリックしましょう。

すると、上下左右のパディングを別々に設定できるように入力欄が表示されますので個別に設定してください。ちなみに入力欄は左から上・右・下・左の順です。(上の画像を参照)

07.列や行を簡単に追加できる

Flexible Table Blockは、行や列を驚くほど簡単に追加することができます。

列や行の追加方法は、行と行の間、列と列の間に点がありますが、その点をクリックするだけで列や行を簡単に追加することができます。

Flexible Table Blockで列や行を追加する方法

点が薄くて分かりづらいと思いますが、上の画像を参考にしてください。

08.列や行を簡単に削除することができる

Flexible Table Blockでは、列や行も非常に簡単に削除することができます。

列の上端、行の左端についている矢印をクリックしてみてください。

ゴミ箱のアイコンが表示れますので、それをクリックすると列や行を削除することができます。

Flexible Table Blockで列や行を削除する

まとめ

自由自在にテーブルをカスタマイズすることができるワードプレスのプラグイン「Flexible Table Block」をご紹介しましたが、いかがだったでしょうか?

非常に便利なプラグインであることをお分かりいただけたのではないでしょうか?

今回の記事では、よく使う便利な機能について限定してご紹介させていただきましたが、Flexible Table Blockには今回ご紹介した機能以外でも「ブレークポイントを変更する」「セルの角を丸くする」「枠線の種類を変更する」といった便利な機能がたくさんあります。

さらにFlexible Table Blockは、その機能のほとんどが難しくなく直感的に利用することができます。

ブロックエディターで「かっこいいテーブルを作りたい!」と思っている方にはFlexible Table Blockは本当におすすめです。

尾道WEBサービスではホームページ制作だけでなく、ワードプレスに関する情報も定期的にアップしていきますので、興味のある方はご覧になってみてください。