2023.10.16

WordPress プラグイン「Flexible Table Block」で、表のセル結合してみた！

こんにちは！Maromaroのディレクターoyucoです。

現在、WordPressで構築したサイトの更新マニュアルを作成しています。お客さまのほうで、お知らせやイベントの更新、固定ページで作成したページの更新などができるよう作業手順や編集のコツなどもちりばめて作成しているところです。

WordPressではブロックエディタ「Gutenberg」を使っていて、WordPress上でもExcelで表を作成するように簡単に表が作成できますが、プラグイン「Flexible Table Block」を使うと簡単に下のようなセルを結合した表が作成できたので、ご紹介します。

セルを結合した表の作成手順

新規で投稿ページを準備、または表を掲載するページを開きます。

記事作成欄で表を掲載するところで、左上「＋」アイコンをクリックしてブロック一覧を表示します。
WordPressにプラグイン「Flexible Table Block」がインストール・有効化されていると、ブロック一覧に「Flexible Table」が表示されています。

「Flexible Table」をクリックすると、記事作成欄にFlexible Tableが表示されるので、表を作成します。

まず、ヘッダーセクション（項目名の欄）がある場合は選択すると、プレビューにヘッダーセクションが挿入されます。
次に、カラム数と行数を入力、「表を作成」をクリックします。記事作成欄に表が掲載されます。

表のセルに項目名やテキストを入力します。
列や行の挿入や削除は、セルを選択してメニューバーの「テーブルの編集」アイコンをクリックで、該当の設定をクリックで行うことができます。

以下が表にテキストを入力した状態で、結合するセルは空欄にしています。これから表を結合します。

結合するセルを選択します。複数のセル選択はマウスで範囲選択してできますが、キーボード「Shift」を押しながらセル選択ができるのでオススメします。
メニューバーの「テーブルの編集」アイコンをクリックして「セルの結合」をクリックして完了です。

結合したセルを分割

結合したセルを分割する場合は、結合したセルを選択して、メニューバーの「テーブルの編集」アイコンをクリックして「セルの分割」をクリックして完了です。

以上です。
HTMLの知識がある方は、今回のプラグインなしで「カスタム HTML」でtableタグで表組みして、結合したいthタグやtdタグにcolspan=”2（結合セル数）”やrowspan=”3（結合セル数）”を入力でも、同じ表ができます。

私は久しぶりにtableタグで表を組んでみたのですが、セルを結合する際に挿入するタグがcolだっけrowだっけ？どこに入れてどこのセルを削除するんだっけ？って、tableタグとにらめっこして目がまわってしまいました。
かつてはテーブルレイアウトでHTMLページをtableで組んで、tableの入れ子のまた入れ子、またまた入れ子でレイアウト調整したこともありtableは得意だったのですが、プラグイン入れてちゃちゃっと表のセルを結合できるなんて便利になりましたね。

WordPressでサイトを更新しているけど、まだブロックエディタ「Gutenberg」を使ってない方や、プラグイン「Flexible Table Block」がインストールしたい方などなど、MaromaroではWordPressの保守や運用サポートも行っていますのでお気軽にご相談くださいませ。

WordPressについては、こちらの記事もオススメです。

Maromaro Blog