SWELLの始め方ガイド|これからSWELLを使い始める方はこちら→SWELLの始め方ガイド→クリックタップ

セルを結合しつつSWELLのテーブル拡張機能を使った表を作る方法

当ページのリンクには広告が含まれています。
  • URLをコピーしました!

以下のようにSWELLのテーブルブロックの独自拡張機能を使いながらセル結合をする方法を紹介します。

セルを結合しつつSWELLのテーブル機能を使う方法-5

テーブルブロックはWordPress本体が用意してくれているブロック(コアブロック)で、これまでセルの結合はできませんでした。

しかし、WordPress6.2からWordPress標準のテーブルブロックでセルの結合ができるようになったため、SWELLのセル背景にアイコンを挿入する機能などを使いつつセルを結合させた表を作ることも可能になりました。

ただ、現時点では記事の編集画面で直感的な操作でセルを結合することはできず、HTMLを直接編集するなどの作業が必要になります。

そこでこの記事では、ひと手間加えるだけでHTMLを自分で編集することなく、SWELLのテーブル機能を使用しつつセル結合する方法を紹介します。

2023年4月29日リリースのSWELL V.2.7.5アップデートで、直感的な操作で簡単にセルの結合ができるようになりました!!!
※詳細:


執筆時の環境 ※初回執筆:2023/4/9
WordPress

v.6.2

SWELL

v.2.7.4,1

記事はできる限り最新情報に更新していきますが、キャプチャ等は執筆時点の物が多くなると思います。


SWELLのブロックエディターガイド

SWELLの高機能なブロックエディターを快適に使うためのガイドを作りました。

目次

【最新!】SWELLの機能で簡単にテーブルのセル結合をする方法

WordPressのバージョンは6.2以上SWELLのバージョンを2.7.5以上にアップデートした状態であれば、とても簡単にセルの結合ができます。

STEP
WordPressのテーブルブロックで自由に表を作る
SWELLのテーブルセル結合機能-1
STEP
テーブルブロックを選択し、サイドバーの「セルの結合・分割」タブを開く
SWELLのテーブルセル結合機能-2
STEP
「セルの結合・分割」タブ内で結合したいセル範囲をshiftキーを押しながら選択し、「セルを結合」ボタンをクリック
SWELLのテーブルセル結合機能-3

結合したいセル全てで同様の作業を行ってください。

結合したセルを分割したい場合は、分割したいセルを選択して「セルを分割」ボタンをクリックすればOKです。

STEP
SWELLのテーブル機能で自由に装飾をする
SWELLのテーブルセル結合機能-4

この操作だけで表のセル結合ができます。

さとしん

操作もとても簡単なのである程度複雑な表も直感的に作成できるようになりました…!

【参考】SWELLの機能以外でテーブルのセルを結合する方法

この方法は、SWELLにセル結合機能が追加される前に執筆した内容です。本日時点でより簡単にセル結合ができるのは記事前半の「【最新】SWELLの機能で簡単にテーブルのセル結合をする方法」で紹介した内容です。

ただ、ここで紹介する方法も本日時点で使うことが可能なの興味があれば試してみてください。

HTMLを直接編集せずにテーブルのセルを結合する方法を大きく2種類紹介します。

それぞれ紹介します。

Excel・Googleスプレッドシートを活用する

ツイートでも紹介しましたが、事前にExcelやGoogleスプレッドシートでセルを結合した表を作成して、WordPressのエディター上にコピペすると、セルの結合が保持されたままの表を作成することができます。

この方法については、Googleスプレッドシートの場合とExcelの場合で微妙に手順が異なるのでそれぞれ説明していきます。

Googleスプレッドシートの場合

Googleスプレッドシートで元の表を作成する場合はとてもシンプルです。以下の手順でWordPress上に表を作成できます。

STEP
スプレッドシートで自由に表を作る
セルを結合しつつSWELLのテーブル機能を使う方法-6
STEP
作成した表をコピーする
セルを結合しつつSWELLのテーブル機能を使う方法-7
STEP
作成した表をペースト(貼り付け)する
セルを結合しつつSWELLのテーブル機能を使う方法-4

作成した表のセル結合が保持されたままコピーされます。

STEP
SWELLのテーブル機能で自由に装飾をする
セルを結合しつつSWELLのテーブル機能を使う方法-5

Excelの場合

Excelの場合は少し手順が増えます。Excelからコピーした表をWordPressに貼り付ける際は、一度テーブルブロックを挿入した状態で行う必要があります。以下の手順です。

STEP
Excelで自由に表を作る
セルを結合しつつSWELLのテーブル機能を使う方法-1
STEP
作成した表をコピーする
セルを結合しつつSWELLのテーブル機能を使う方法-2
STEP
エディター上にテーブルブロックを挿入してブロックを選択する
セルを結合しつつSWELLのテーブル機能を使う方法-3
STEP
作成した表をペースト(貼り付け)する
セルを結合しつつSWELLのテーブル機能を使う方法-4

作成した表のセル結合が保持されたままコピーされます。

STEP
SWELLのテーブル機能で自由に装飾をする
セルを結合しつつSWELLのテーブル機能を使う方法-5

Flexible Table Blockプラグインから変換する

Excelやスプレッドシートの外部ソフトを使わず、WordPressだけで完結させたい場合は、超高機能な無料のテーブルプラグイン「Flexible Table Block」を活用しましょう。具体的にはFlexible Table Blockで作成したセル結合されている表をWordPress標準のテーブルブロックに変換するだけでOKです。

この手順はSWELL開発者の了さんが言及されていました。

さとしん

僕はFlexible Table Blockを頻繁に利用しているので、この方法が1番良さそうな感触でした…!

以下の手順です。

STEP
Flexible Table Blockで表を作成する
セルを結合しつつSWELLのテーブル機能を使う方法-8
STEP
ブロックツールバーから「テーブル」に変換する
セルを結合しつつSWELLのテーブル機能を使う方法-9

結合が保持されたまま標準のテーブルブロックに変換されます。

セルを結合しつつSWELLのテーブル機能を使う方法-10
STEP
SWELLのテーブル機能で自由に装飾する
セルを結合しつつSWELLのテーブル機能を使う方法-5

既に作成済みの表を編集してセルを結合させる方法

過去にSWELLの機能を使って作成していた表を、あらためてセル結合させた表に修正したいケースもあると思います。

そのような場合もSWELLのセル結合機能を使うのが簡単ですが、一応Flexible Table Blockを活用することでも修正が可能です。以下の手順です。

STEP
編集したいテーブルをFlexible Table Blockに変換する
セルを結合しつつSWELLのテーブル機能を使う方法-19

セル結合したい表を選択してブロックツールバーから変換。

セルを結合しつつSWELLのテーブル機能を使う方法-20
STEP
必要な箇所のセルを結合する
セルを結合しつつSWELLのテーブル機能を使う方法-21
STEP
編集完了後に再度WordPress標準のテーブルブロックに変換する
セルを結合しつつSWELLのテーブル機能を使う方法-22
STEP
過去のSWELL機能の設定が残ったままセルが結合された表が完成
セルを結合しつつSWELLのテーブル機能を使う方法-23

セル結合したテーブルの表示が崩れる場合の対応方法

セル結合したテーブルを作成する際に一部表示が不安定になることがあります。

WordPressでテーブルのセルを結合した際に表示が崩れる現象-1

そんな時は、テーブルを選択した状態で、サイドバーの「セルの結合・分割」タブ内にある「崩れたセルを修復する」ボタンをクリックするだけである程度の表示崩れは自動で修正してくれるようになりました。

WordPressでテーブルのセルを結合した際に表示が崩れる現象-2

この先にも表示崩れの修正方法を記載しています。ただし、SWELLにセル結合機能が追加される前に執筆した内容なので古い情報です。

もし、上記の手順でうまく修復できない場合などでこれから説明する方法も参考にしてみてください。


表示が不安定になる現象に対して、現時点で僕が見つけた対処方法を紹介しておきます。

以下、注意点です。

  • いろいろ試している段階のため、他にもっと良い方法があるかもしれません。
  • 表の見た目を整えることのみ考慮しています。

【参考】表の罫線が一部消える場合

以下画像のように、主に表の一番下の行などで罫線が一部消えるケースがあります。おそらく表の1番下の行を含んで縦方向のセル結合をしている場合などに発生するようです。

セルを結合しつつSWELLのテーブル機能を使う方法-11

このような時は、SWELLのテーブルスタイルを「二重線」にすることで問題なく罫線が表示されます。

セルを結合しつつSWELLのテーブル機能を使う方法-12

【参考】表の見出し行の端が消える場合

表のヘッダーセクションを追加したときに右端の列が消えてしまうケースもありました。

セルを結合しつつSWELLのテーブル機能を使う方法-13

これはヘッダーの下の行でセル結合していると発生することがあるようです。そのため、ヘッダーの下にセル結合していないダミーの行を1行確保して、最後に行を消すことで対処することができます。以下に画像付きで説明します。

STEP
作成した表の1行上の行まで含めてコピーする
セルを結合しつつSWELLのテーブル機能を使う方法-18
STEP
WordPressのエディターに貼り付ける
セルを結合しつつSWELLのテーブル機能を使う方法-14
STEP
ヘッダーセクションを追加する
セルを結合しつつSWELLのテーブル機能を使う方法-15
STEP
ヘッダーの下の余分な行を削除する
セルを結合しつつSWELLのテーブル機能を使う方法-16

これで以下のように、特に違和感のない表を作ることができました。

セルを結合しつつSWELLのテーブル機能を使う方法-17

空白の行を1行追加して後から削除するだけなので、これなら特に大きな手間もかからずに症状が改善したテーブルが作成できると思います。

Flexible Table BlockとSWELLテーブル機能の使い分けについて

ここまで、WordPress標準のテーブルブロックをセル結合する方法を紹介してきましたが、その中でFlexible Table Blockプラグインを変換用のツールとして活用しました。

しかし、Flexible Table Blockは変換用のツールとしてのみ使用するのはとてももったいないです。SWELLのテーブル機能とFlexible Table Blockを使い分けて表を作っていくのが個人的にはおすすめです。

以下に、SWELLのテーブル拡張機能とFlexible Table Blockの使い分けの例を表にして書いてみました。(せっかくなのでFlexible Table Blockで作っています。)

SWELLテーブル機能とFlexible Table Blockの使い分け例
SWELLセル結合したシンプルな表を作りたい
記号アイコンを挿入しつつセル結合をしたい
Flexible Table Blockセル結合も含めて複雑な表を作りたい
罫線の有無や太さ・種類も調節した表を作りたい

Flexible Table Blockは、上記のとおり少しアレンジした見た目の表を作ることもできますし、以下のようなちょっとした作図もできてしまいます。


TeamC
12
2130
0
TeamATeamBTeamCTeamD

(本来の用途ではないので半分冗談ですが、これくらい何でも作れてしまうもの凄いプラグインだということが伝われば嬉しいです。。。)

さとしん

僕はSWELLのテーブル機能とFlexible Table Block、どちらも好きなので愛用しています…!

セルを結合した表でSWELLのテーブル拡張機能を使う方法まとめ

SWELLのテーマ機能を使いつつ、テーブルのセルを結合する方法を紹介しました。

WordPress6.2からテーブルブロックで一応セルの結合ができるようになったので、さらに柔軟な表が作りやすくなりました。

SWELLのテーブル機能はとても便利なものが多いので、Flexible Table Blockプラグインと併用しつつ適切に使い分けていけると良いかなと思います。

いろいろ試しながら見やすく読者に優しい表を作っていきましょう。

最後まで読んでいただきありがとうございました。


はこちらからどうぞ…!

SWELLブロックエディターの関連記事

WordPress本体とSWELLのブロックエディター機能を使いこなすためのSWELL記事の書き方ガイド↓↓

SWELL全般の関連記事

セルを結合しつつSWELLのテーブル拡張機能を使った表を作る方法

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次