セルの結合・表作成ができる【Flexible Table Block】の使い方を解説

こんにちは、リベルテです。

早速ですが、

こんな悩みを解決していきます。

この記事は次の点をまとめました。

Flexible Table Blockの使い方をマスターして、記事のクオリティーをあげていきましょう！

そもそもFlexible Table Blockって何？

Flexible Table Blockというプラグインは、開発者の浜野哲明さん(@tetsuki_hamano）が

「どんなテーブルでもつくることができるブロック」ということを目標に作られたプラグインです。

思ったとおりにテーブル（表）が作れることはもちろんですが、

操作が簡単で自由自在に好きなテーブルがつくれることが魅力的なポイントです。

このプラグインのインストール表示が下の画像です。

2021年の秋頃にリリースをされていますが、

半年くらいで約3,000ほどインストールがされている人気のプラグインです。

テーブルをつくるプラグインを入れていない方は、これから解説するたくさんの機能や

使いやすさをみて、参考にしてみてください。

Flexible Table Blockでできること

以下の４つの機能を簡単に紹介していきます。

その①：セルの結合

セルの結合とは、複数のセルをひとつにまとめることです。

下のテーブル（表）がイメージです。

上記がセルの結合で、ひとつのセルに文字が入りきらない時やメリハリをつけたいときに使用します。

詳しいセルの結合のやり方は、こちらで説明しています。

その②：わく線（実線、点線）の設定

豊富にあるわく線（罫線）を使って、下のようなテーブルも作成することができます。

わく線の種類を変更できる要素は大きく３つあります。

詳しいわく線の使い方は、こちらで説明しています。（クリックシャンプ）

その③：背景色の設定

セルの背景色はこんな感じで設定できます。

ポイントになるセルや注目してほしいセルには背景色をつけることで、存在を際立せれます。

詳しい背景色の設定方法は、こちらで説明しています。（クリックシャンプ）

その④：横スクロール

下の動画のように、テーブル全体を横にスクロールする設定ができます。

詳しい横スクロールの設定方法は、こちらで説明しています。（クリックジャンプ）

Flexible Table Blockの基本的な使い方

ここからは、Flexible Table Blockの基本的な使い方を解説していきます。

Flexible Table Block（プラグイン）をインストールし、「有効化」をクリックしておきましょう。

記事の中にテーブルブロックを呼び出す

【手順1】「テキストグループ」から「Flexible Table Block」のアイコンを選択します。

【手順2】カラム数と行数の選択画面がでてくるので、「表を作成」をクリックしましょう。

３マス×３マスの表が表示されると思います。これで、テーブルブロックの呼び出しは完了です。

行や列を追加、削除する

【手順1】行や列を追加したいマス目をクリックします。

【手順2】「ブロックツールバー」の「テーブル編集」をクリックして、行や列の追加をします。

実際に左上のこのマスをクリックして、「行を上に挿入」をクリックすると、下のような表が作れます。

また、これら【手順1】【手順2】を踏まなくても、簡単に行や列の追加、削除ができる方法があります。

動画にまとめましたので、ご覧ください。

動画のようにセルとセルの間にある〔＋〕ボタンを押すと、簡単に列と行が増やせます。

必要のない列と行を削除する方法も動画にある通りで、灰色の矢印ボタンを押せばいいだけです。

セルの結合

【手順1】結合したいセルを選択していきます。（複数選びましょう）

【手順2】「テーブル編集」ボタンから「セルの結合」を選択します。

こんな感じでセルを１つの固まりに結合することができます。

セルの分割

【手順1】分割したいセルにカーソルをあて、「テーブル編集」ボタンの「セルの分割」をクリック。

たったこれだけで、セルをもとの状態にもどすことができます。

わく線（実線、点線）の設定

設定できるわく線は、上の画像のように大きく２つあります。

そして、わく線の種類を変更できる要素は大きく３つです。

まずは、テーブルのわく線の設定方法について解説していきます。

テーブルの設定

【手順1】テーブル（表）を選択して、画面右の操作パネルの「テーブル設定」をクリック。

【手順2】下の画像の【A】〜【D】の項目を設定していきます。

今回のテーブルボーダー幅は、3PXに設定しています。

また、テーブルの角丸は、5〜10PXくらいで指定するとちょうど良いと思います。

ボーダーの種類も４種類（直線、点線、破線、２本線）あるので、たくさんの使い分けが可能です。

続いては、セルの設定です。

セルの設定

セルの設定も、テーブル設定とほとんど同じ手順です。

【手順1】で「テーブル設定」か「セル設定」のどちらかを選ぶだけの違いです。

念のため、解説していきます。

【手順1】テーブル（表）を選択して、右画面の操作パネルの「セル設定」をクリック。

【手順2】下の画像の【A】〜【D】の項目を設定していきます。

セルのボーダー幅ですが、デフォルトの設定は1PXになっています。

上の画像のように、ボーダー幅を1PXあげるだけで、テーブル全体にメリハリがつくので

カスタマイズにおもしろさがでてきますね。

参考にしてみてください。

背景色の設定

【手順1】画面右の操作パネルの中から「セル設定」→「セルの背景色」をクリック。

---

あとは、お好みの色を指定するだけです。

複数のセルに背景色を指定したいときは、

Shiftキーを押しながらカーソルでセルを選択して、まとめて色を設定するのが時短です。

横スクロールの設定

横スクロールとは、画面内からはみ出たテーブルを折り返して表示させる機能です。

下のテーブルのように横スクロールするやり方を解説していきます。

訪問先		打合せの時間	打合せ内容	優先度	移動時間	担当者
〇〇商事		9:00~	◯◯について	高	徒歩	佐藤さん
△△不動産		10:00~	△△について	高	電車	鈴木さん
××自動車		11:00~	××について	中	電車	高橋さん
♦︎♦︎学校		13:00~	♦︎♦︎について	低	徒歩	田中さん
☆☆商店		14:00~	☆☆について	低	車	伊藤さん

【手順1】横スクロールするテーブルを選択し、画面右の操作パネルから「テーブル設定」をクリック。

【手順2】テーブル設定の中から、下の画像の５つの項目を設定します。

設定内容は下記です。

今回、テーブルの横幅は150%に設定しました。

設定するときは、パソコンとスマホの表示プレビューを確認しつつ、表示がくずれないように

設定するやり方がベストだと思います。

また、横スクロール自体はスマホで見たときに、見えづらいこともあるので

プレビューで確認しつつ、最小限の数にとどめるのが読者のためにもなりますね。

まとめ

最後までご覧いただきありがとございます。

この記事では、Flexible Table Blockの機能や基本的な使い方を簡単に解説しました。

操作方法についての振り返りですが、

テーブルの行や列を編集（追加や削除）するときは、「テーブル設定」にアクセスすれば基本できます。

そのほか、わく線（ボーダー線）の太さや色などの設定は、画面右の操作パネルから設定ができます。

上記のように操作内容もいたって簡単で、自由自在にテーブル（表）がつくれるこのプラグインは

とても重宝することと思います。

この記事をもとに、Flexible Table Blockを使いこなして、クオリティーの高い記事を

つくっていきましょう。