2026.10.26

【2026年10月版】Flexible Table Blockの使い方をわかりやすく解説｜JIN:Rで見やすい比較表を作ろう

hitode99

記事内に商品プロモーションを含む場合があります

「ブログで比較表を作りたいけど、WordPressの標準の表だと思った通りにならない……」

「セルを結合したいのに、やり方がわからない」

「作った表がスマホで見ると崩れて、すごく見にくい」

こんな悩みはありませんか？

そんな方におすすめなのが、表を作るためのプラグイン「Flexible Table Block」です

Flexible Table Blockを使えば、セルの結合や色付け、スマホでの見え方の調整まで、ブロックエディターの中でかんたんにできます

この記事では、Flexible Table Blockのインストール方法から、表の作り方、デザインの整え方、スマホでの表示の設定、サイト全体に効く「グローバル設定」まで、画像付きでわかりやすく解説していきます

ヒトデ君

JIN:Rで比較表を作りたいなら、まず入れておきたいプラグインだよっ！

ワードプレスのおすすめプラグインはこちらの記事をどうぞ▼

Flexible Table Blockとは？

Flexible Table Blockは、WordPressのブロックエディターで、自由に表（テーブル）を作れる無料のプラグインです。作者はAki Hamanoさんです

WordPressにも標準で「テーブル」ブロックがありますが、できることはかなり限られています。Flexible Table Blockを使うと、標準の表ではできないセルの結合や、セルごとの色・枠線の設定、スマホ向けの表示の切り替えなどができるようになります

なお、Flexible Table Blockを使うには、WordPress 7.0以上・PHP 8.0以上が必要です。古いWordPressのままだとインストールできないので、先にWordPressを最新にしておきましょう

標準の表ブロックとの違い

標準の表ブロックとFlexible Table Blockの主な違いは、こんな感じです

できること	標準の表ブロック	Flexible Table Block
セルの結合・分割	×	○
セルごとの文字色・背景色・枠線	×	○
横スクロール表示（PC・スマホ）	×	○
スマホでセルを縦に並べる	×	○
固定ヘッダー・最初の列を固定	×	○
サイト全体の表をまとめて設定	×	○（グローバル設定）

※「×」は、標準の表ブロックにはセルごとの設定や切り替えの項目がない、という意味です。標準の表ブロックでも、表全体の背景色や枠線はある程度設定できます

ヒトデ君

比較表で「おすすめ」の列だけ色をつける、みたいなことができるのがうれしいね！

JIN:Rを使っているなら、比較表を作る人は入れておこう

Flexible Table Blockは、JIN:R公式の推奨プラグインにも入っています（表作成・横スクロール対応の表として紹介）

JIN:Rは標準の表まわりの機能が限られているので、商品やサービスの比較表を作りたい人はFlexible Table Blockを入れておくのがおすすめです

逆に、記事の中で比較表をほとんど使わないなら、急いで入れる必要はありません。表を作りたくなったタイミングで入れればOKです

また、Cocoonを使っている人は、テーマ側に表のスタイルが用意されているので必須ではありません。セルの結合やスマホでの縦並びなど、凝った表を作りたくなったら検討してみましょう

Flexible Table Blockのインストール方法

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

WordPressの管理画面から「プラグイン」→「プラグインを追加」とクリックし、検索欄に「Flexible Table Block」と入力します

プラグインの検索結果に表示されたFlexible Table Blockの「今すぐインストール」ボタン

検索結果の先頭に「Flexible Table Block」が表示されます。作者が「Aki Hamano」になっていることを確認して、「今すぐインストール」をクリックします

ヒトデ君

似た名前のプラグインもあるから、作者名でチェックしよう！

インストールが終わると、ボタンが「有効化」に変わるので、そのままクリックします

プラグイン一覧にFlexible Table Blockが表示されたらインストールは完了です

一覧には「柔軟な設定を持つテーブルを簡単に作成することができます。」という説明が表示されています

Flexible Table Blockは、有効化した時点ですぐに使えます。設定画面で初期設定をする必要はありません

Flexible Table Blockでの表の作り方

ここからは、実際に比較表を作りながら使い方を解説していきます

Flexible Tableブロックを挿入する

投稿の編集画面を開き、ブロックの挿入（「＋」ボタン）の検索欄に「Flexible Table」と入力します

ブロックの挿入パネルで「Flexible Table」と検索して表示されたブロック

「Flexible Table」ブロックが表示されるので、クリックして挿入します

ヒトデ君

「テーブル」は標準の表ブロックだから、間違えないように注意だよっ！

カラム数・行数を決めて表を作成する

ブロックを挿入すると、表の作成画面が表示されます

表の作成画面のヒント。Macの場合はCtrlキーの代わりにCommandキーを使う

作成画面には次の項目があります

ヘッダーセクション（初期はオフ）
フッターセクション（初期はオフ）
カラム数（初期は3）
行数（初期は3）

比較表を作るなら、「ヘッダーセクション」をオンにしておくのがおすすめです。一番上の行が見出し行になるので、「商品名」「価格」などの項目名を入れやすくなります

ここでは例として、ヘッダーセクションをオン、カラム数3、行数4にしました

決まったら「表を作成」をクリックします

表が作成され、右のサイドバーに「グローバル設定」「テーブル設定」「セル設定」「キャプション設定」「高度な設定」のパネルが表示されます

なお、作成画面の冒頭には「Ctrlキーで複数のセルを選択、Shiftキーで範囲を選択」というヒントが出ています（Macでは「Ctrl」が「Command」と表示されます）。このあとのセルの結合や色付けで使うので、覚えておきましょう

表に文字を入力する

セルをクリックすると、そのまま文字を入力できます

編集画面では、表の横に「thead」「tbody」といったラベルや、見出しセルの点が表示されますが、これは編集画面だけの表示です。公開したページには出ないので安心してください

複数のセルをまとめて設定したいときは、Ctrlキー（MacはCommandキー）を押しながらセルをクリックして選択します

Ctrlキーを押しながら複数のセルを選択すると、サイドバーが「複数セル設定」に変わる

複数のセルを選択すると、サイドバーの「セル設定」が「複数セル設定」に変わり、選んだセルにまとめて色や配置を設定できます

セルを結合する

標準の表ブロックではできない、セルの結合をやってみましょう

結合したいセルを、Shiftキーを押しながらクリックして範囲選択します。このとき、文字の上ではなく、セルの余白部分をクリックするのがポイントです

ヒトデ君

文字の上をShiftクリックしても選択されないんだよね……。余白を狙おう！

範囲を選択したら、ツールバーの表アイコンをクリックしてメニューを開き、「セルの結合」をクリックします

Shiftキーで範囲選択し、ツールバーの表アイコンから「セルの結合」をクリックする

選択したセルが1つにまとまりました

初期設定のままだと、結合したときに残るのは最初のセルの文字だけです。全部のセルの文字を残したい場合は、あとで解説する「グローバル設定」の「セルを結合する時に、すべてのセルの内容を保持する」をオンにしておきましょう

同じメニューには「行を上に挿入／下に挿入」「行を削除」「列を左に挿入／右に挿入」「列を削除」「セルの分割」もあります。結合したセルを元に戻したいときは「セルの分割」を使います

行・列を追加する、削除する

行や列は、メニューを使わなくてもマウスで追加できます

表の外側にある丸い点にマウスを乗せると、「＋」ボタンに変わります。クリックすると、その場所に行（または列）が追加されます

削除したいときは、表の左にある「>」で行全体、上にある「⌄」で列全体を選択します。選択するとゴミ箱ボタンが表示されるので、クリックすると削除できます

表のデザインを整える

表ができたら、見やすくなるようにデザインを整えていきましょう

ヘッダー行に背景色をつける

まずはヘッダー行（一番上の行）を選択します

ヘッダー行の左の「>」をクリックしてヘッダー行を選択し、サイドバーのセル設定を表示

サイドバーの「セル設定」を開くと、フォントサイズ、行の高さ、幅、文字色、背景色、パディング、角丸、ボーダー、配置、セルのタグ（TH／TD）、CSSクラスが設定できます

「背景色」から好きな色を選ぶと、ヘッダー行に色がつきます

ヒトデ君

ブログのメインカラーに合わせると、ぐっと統一感が出るよ！

枠線・文字の配置を整える

続けて、同じセル設定から枠線と配置を整えます。例えば、ボーダーを「実線・2px・好きな色」にして、配置を「中央揃え」にすると、見出しらしいメリハリが出ます

セル設定でボーダーを実線・2px・色を設定し、配置を中央揃えに。セルのタグはTHのまま

「セルのタグ」は、見出しセルならTH、普通のセルならTDです。ヘッダーセクションのセルは最初からTHになっているので、基本はそのままでOKです

表全体の枠線や角丸を変えたいときは、「テーブル設定」の下のほうにある「ボーダー」「セルの枠線」「角丸」から設定できます

テーブル設定には、横幅・最大幅・最小幅・最小高さ・パディングの設定もあります

「表のセル幅を固定」は初期でオンになっています。列の幅がそろって見やすくなるので、基本はオンのままで大丈夫です

キャプションを追加する

表にタイトルや補足をつけたいときは、キャプションを使います。ツールバーのキャプションのボタンをクリックすると、表の下にキャプションの入力欄が追加されます

ツールバーのキャプションボタンで表の下にキャプションを追加し、キャプション設定で位置を変える

サイドバーの「キャプション設定」では、フォントサイズ、行の高さ、パディング、位置（上／下）、文字の配置が設定できます。初期は表の下に出るので、表のタイトルとして上に出したいときは位置を「上」にしましょう

スタイル（デフォルト／ストライプ）を切り替える

サイドバー上部のスタイルタブ（◐のアイコン）を開くと、表のスタイルを「デフォルト」「ストライプ」から選べます

「ストライプ」を選ぶと、1行おきに色がつくしま模様の表になります。行数が多い表は、ストライプにすると行を目で追いやすくなります

スマホでの表示を設定する

ブログの読者の多くはスマホから見ています。PCではきれいな表でも、スマホだと文字がつぶれて読みにくいことがあるので、スマホでの表示も設定しておきましょう

スマホ向けの設定は、「テーブル設定」の上のほうにまとまっています

デスクトップ表示でスクロールする（画面幅769pxより大きいとき）
モバイル表示でスクロールする（768pxより小さいとき）
モバイルでは縦に並べる（768pxより小さいとき）

3つとも初期はオフです

「モバイルでは縦に並べる」をオンにする

「モバイルでは縦に並べる」をオンにします

オンにすると、画面の幅が768pxより小さいとき（スマホで見たとき）、セルが1列に縦に並んで表示されます

PCでのプレビューはこちら

スマホでのプレビューでは、このように縦に並びます

横に長い表は「スクロール」と使い分けよう

列が多い比較表の場合、縦に並べると「どの値がどの商品のものか」がわかりにくくなることがあります。そんなときは「モバイル表示でスクロールする」をオンにしましょう。スマホでは表がそのままの形で表示され、指で横にスクロールして見られるようになります

列が2〜3列くらいの表 →「モバイルでは縦に並べる」
列が4列以上ある横長の比較表 →「モバイル表示でスクロールする」

ヒトデ君

設定したら、公開前にスマホで実際に見てみるのが一番確実だよっ！

さらに、行が多い表では「固定制御」で「固定ヘッダー」を選ぶと、スクロールしても見出し行が残るので見やすくなります。最初の列に商品名を入れた表なら、「最初の列を固定」も便利です。ただし、テーマによっては効かないことがあるので、設定したらプレビューで確認しましょう

グローバル設定でサイト全体の表をまとめて整える

ここまでの設定は、1つの表ごとの設定でした。「どの表も同じデザインにしたい」という場合は、グローバル設定を使うと、サイト全体の表にまとめて反映できます

グローバル設定を開く

表を選択した状態で、サイドバーの「グローバル設定」パネルを開き、「グローバル設定を編集」をクリックします

グローバル設定の画面（モーダル）が表示されます

グローバル設定で変更できる項目

グローバル設定は、大きく4つに分かれています

「テーブルスタイル」では、表の横幅（初期は100%）、最大幅（初期は100%）、セルの枠線、ストライプの色などが設定できます

グローバル設定（テーブルスタイル）：テーブルの横幅・最大幅・セルの枠線・ストライプの色

「セルスタイル」では、セルのパディング（初期は0.5em）や、ボーダー（初期は1px・実線・黒）などが設定できます

「レスポンシブ設定」では、スマホ表示に切り替わる画面幅（初期は768px）を変更できます

グローバル設定（レスポンシブ設定）：スマホ表示に切り替わる画面幅（初期は768px）

「エディターオプション」は、編集画面での動きを変える設定です。「セクションラベルを表示する」「コントロールボタンを表示する」「カーソル移動キーでコントロールボタンにフォーカスする」「th タグにドットを表示する」「タブキーでセルを移動する」「セルを結合する時に、すべてのセルの内容を保持する」「管理者以外のユーザーにグローバル設定リンクを表示する」の7つがあります