SWELLで表のセルを結合・色分けする方法｜見やすい比較表の作り方

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

比較表を作ろうとしたら、セルの結合ができなくて困った…という経験はありませんか。見出しをまとめたり、おすすめの列だけ色を変えたりしたくても、やり方がわからないと手が止まってしまいますよね。SWELLの表は、ちょっとした工夫で見やすさが大きく変わります。

この記事では、SWELLで表のセルを結合する方法と色分けのコツを、手順付きでわかりやすく解説します。私が実際にやってしまった失敗もお伝えしますね。読み終えるころには、伝わる比較表が作れるようになりますよ。

▼あわせて読みたい：表の多い記事も、サーバーが速ければストレスなく表示されます。ブログの土台になるサーバー選びはこちらで解説しています。

あわせて読みたい

エックスサーバーの評判は本当？初心者ブログで実際に使ってみた正直レビュー 本記事はアフィリエイト広告を含みます。 「エックスサーバーって評判いいって聞くけど、初心者の自分でも本当に使いこなせるのかな」と不安になっていませんか。 サー...

SWELLの表でセル結合・色分けをする前に知っておきたい基本

SWELLで表を作るときは、WordPress標準の「テーブル」ブロックを使います。行や列の追加、全体の背景色の変更などは、このブロックだけで手軽に行えますよ。

ただし、標準のテーブルブロックにはセルを結合するボタンがありません。結合したいなら、方法を選ぶところから始めるのがポイントです。

セル結合の方法は「HTML編集」と「プラグイン」の2つ

セルを結合するには、ブロックを「HTMLとして編集」してcolspanやrowspanを書き込む方法と、「Flexible Table Block」というプラグインを使う方法があります。私も最初はHTMLを手打ちしていましたが、数字を1つ間違えただけで表全体がずれてしまい、何度もやり直しました。初心者の方にはプラグインのほうが断然安心です。

色分けは「強調したい場所だけ」に絞る

色分けは、おすすめの列や見出し行など、目立たせたい場所だけに使うのが基本です。以前、比較表のセルを項目ごとにカラフルに塗り分けたところ、かえってどこを見ればいいのかわからない表になってしまいました。使う色は2〜3色までに抑えると、すっきり見やすく仕上がりますよ。

SWELLで表のセルを結合して色分けする方法

ここでは、Flexible Table Blockを使ってセルを結合し、色分けする手順を紹介します。クリック操作だけで完結するので、HTMLに不慣れな方でも大丈夫です。

別のテーマでは表のデザインを追加CSSで整えていましたが、SWELLはテーブルの見た目が最初から整っているので、プラグインと組み合わせても違和感なくなじんでくれます。

Flexible Table Blockがおすすめな理由

Flexible Table Blockは、セルの結合や1マスごとの背景色の設定をエディター上で行えるプラグインです。複数のセルを選んで結合できるので、HTMLの数字を数える必要がありません。比較表をよく作る方ほど、作業時間の短さを実感できますよ。

結合前に表の完成形をメモしておく

いきなり結合を始めると、あとから行を足したくなったときに修正が大変です。どのセルをまとめるか、紙やメモ帳に簡単な完成図を書いてから作ると、やり直しがぐっと減ります。先に行数と列数を決めておくのがコツです。

プラグインを使わずにセル結合・色分けする方法

「プラグインはなるべく増やしたくない」という方は、標準のテーブルブロックだけで対応することもできます。少しだけHTMLに触れますが、手順さえわかれば難しくありません。

私自身、プラグインを入れすぎて管理画面が重くなった経験があるので、表を作る頻度が少ないならこちらの方法で十分だと感じています。作る頻度に合わせて方法を選びましょう。

「HTMLとして編集」でセルを結合する

テーブルブロックのツールバーにある「︙」から「HTMLとして編集」を選び、横に結合したいセルにはcolspan="2"、縦ならrowspan="2"を書き加えます。結合したぶんのセルを削除し忘れると表がずれるので、編集後は必ずプレビューで確認してくださいね。

標準機能で表全体の色を整える

テーブルブロックを選ぶと、右サイドバーの「スタイル」で「ストライプ」を選べます。1行おきに色がつくので、行の多い表でも目で追いやすくなりますよ。別のテーマではストライプを追加CSSで作っていましたが、SWELLならクリックひとつで本文になじむデザインに仕上がります。

▼あわせて読みたい：比較表の多い記事は、狙うキーワード選びで読まれ方が変わります。無料から使えるキーワード調査ツールの実力はこちらで正直にレビューしています。

あわせて読みたい

ラッコキーワードレビュー｜無料から使えるキーワード調査ツールはブログ運営に本当に使えるか正直に話... 本記事はアフィリエイト広告を含みます。 「ラッコキーワード、無料で使えると聞くけど、有料プランまで必要なのか正直知りたい」という人はいませんか。記事のネタを探...

SWELLの表のセル結合・色分けでよくある質問

結合したセルを元に戻すことはできますか？

できます。Flexible Table Blockなら結合を解除するボタンから戻せますよ。HTMLで結合した場合は、colspanやrowspanを消してセルを足し直しましょう。

スマホで表が見づらくなるのはなぜですか？

主な原因は列の数が多すぎることです。私も6列の表を作り、スマホで文字が詰まって読めなくなった経験があります。列は4つ程度までに抑えるのがおすすめです。

標準のテーブルとFlexible Tableはどちらを使うべきですか？

シンプルな表なら標準のテーブルブロックで十分です。セル結合や細かな色分けをよく使う方は、Flexible Table Blockを選ぶと作業がぐっと楽になりますよ。

色分けに使う色はどう選べばいいですか？

ブログのメインカラーを薄くした色を使うと、記事全体に統一感が出ます。濃い色は文字が読みにくくなるので、強調には淡い色を選びましょう。

まとめ：セル結合と色分けで伝わる比較表を作ろう

SWELLで表のセルを結合するなら、手軽さ重視ならFlexible Table Block、プラグインを増やしたくないならHTML編集がおすすめです。色分けは強調したい場所だけに絞り、2〜3色までに抑えると見やすく仕上がります。

比較表は、読者が商品を選ぶときに一番よく見られる場所です。まずは既存記事の表を1つ選び、見出し行の結合とおすすめ列の色分けから試してみてください。

▼あわせて読みたい：表や本文の文章もきちんと整えたい方へ。お手頃価格で始められる日本語校正ツール「Shodo」を実際に使ってみた感想をまとめています。

あわせて読みたい

Shodo（ショドー）レビュー｜日本語校正ツールはブログ運営に本当に使えるか正直に話します 本記事はアフィリエイト広告を含みます。 「Shodo、無料で使えると聞くけど、有料プランまで必要なのか正直知りたい」という人はいませんか。記事を公開したあとに誤字...

おすすめ記事