MENU
おすすめの記事
WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!

2024年4月にリニューアルしました!絞り込み検索やお気に入り機能もあります。ぜひ見ていってください!

さとしん
WordPressとSWELLが好きなブロガー。
ブロックエディターに出会ってWordPressが楽しくなりました。
WordPressのこと、SWELLのこと、ブロックエディターのことを熱く語るブログです。
【2024/9/22】SWELLサイト事例集を更新しました!→【20240922】SWELLサイト集更新!→クリックタップ

SWELLのテーブルブロック|便利な比較表も簡単に作れる!

当ページのリンクには広告が含まれています。
SWELLのテーブルブロックで比較表を作る!独自機能で柔軟な表現ができる!
  • URLをコピーしました!

SWELLのテーブルブロックについて紹介します。

SWELLのテーブル拡張機能の例
  • セル背景色の変更
  • セルの背景に○×などアイコンを挿入
  • テーブル全体の中央揃え
  • セル内のテキストにリスト風の装飾

※詳しくは「テーブルブロックの使い方とSWELLの独自機能の紹介」で解説

SWELLのテーブル機能で比較表が作れる
SWELLのテーブルブロックで比較表を作る手順-1

画像のようにセルの背景に○×の記号を入力したり、クリック率が計測できるボタンリンクを設置した比較表が作れる…!

※詳しくは「SWELLのテーブルブロックで超便利な比較表を作る手順!」で解説

さとしん

テーブルブロックの機能を覚えて、便利で見やすい表を作っていきましょう…!

この記事で紹介するSWELLのテーブル機能は、『SWELL ver. 2.6.0』以上の場合のみ使用できます。


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

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

目次

テーブルブロックの使い方とSWELLの独自機能

ブロックエディターで表を作るための「テーブルブロック」について以下の2点を紹介します。

  • テーブルブロックの基本的な使い方
  • SWELL独自のテーブルブロック拡張機能

テーブルブロックはWordPress本体で用意されているブロック(コアブロック)で、全テーマ共通の機能です。

WordPress標準機能のテーブルブロックをSWELLでは独自に機能拡張してくれています。

さとしん

他テーマと比較しても、SWELLのテーブルブロックの便利さは素晴らしいですよ…!

では、テーブルブロックについて紹介していきます。

テーブルブロックの使い方

上述したとおり、テーブルブロックはWordPress標準のブロックで全テーマ共通の機能です。

テーブルブロックの基本的な使い方は以下の記事で紹介しているので参考にしてください。

セルの結合について…

テーブルブロックではセルの結合はできません。

どうしても表を作る時にセルの結合をしたい方は「Flexible Table Block」という無料プラグインの利用をおすすめします。

WordPress6.2以降、標準のテーブルブロックでセルの結合が一応できるようになりました。WordPressの変更に合わせ、SWELLでもついにセル結合が簡単にできる設定項目が追加されました。記事後半の「セルの結合」で紹介します。

また、SWELLのテーブル機能だけでも十分ですが、さらに複雑な表を作りたい場合には引き続き「Flexible Table Block」プラグインが超おすすめのテーブルプラグインなのでぜひ活用してみてください。

さとしん

このプラグインは便利すぎて本当にすごいですよ…!笑

テーブルブロックの使い方の次は、SWELLオリジナルのテーブルブロック拡張機能を紹介します。

SWELL独自のテーブルブロック拡張機能

標準のテーブルブロックの機能では、少し物足りない方も多いと思います。

ですが、SWELLでは以下のようなオリジナルの拡張機能がかなりたくさん用意されています。

  • 表のスタイル(デザイン)の追加
  • 最低限確保するセル幅の指定
  • 表の横スクロール
  • 表の1行目か1列目の固定表示
  • 表の1列目を強調する

※詳細は公式の「」で紹介されています。

  • ヘッダーの背景色、テキスト中央寄せの設定
  • セルの背景色を変更
  • セルの背景に○×などアイコンを挿入
  • テーブル全体の中央揃え
  • セル内のテキストにリスト風の装飾
  • セル内のテキスト配置を中央寄せ

※詳細は公式の「」で紹介されています。

  • セルの結合・分割が簡単にできる(WordPress6.2以降)
  • テーブル全体のフォントサイズが設定できる
  • セル1列目の横幅が設定できる

※詳細は公式の「」で紹介されています。

  • セルのタグ(td,th)が切り替えできる

※詳細は公式の「」で紹介されています。

各機能の詳細は、公式サイトで丁寧にまとめられているのでぜひ確認しておいてください。

複数のSWELLアップデートでかなり機能が追加されたので、この記事でも一覧に整理しました。記事後半「SWELLのテーブル拡張機能のまとめ」に概要をまとめています。

さとしん

これだけの機能があれば、工夫次第でいろいろな表現ができますね…!

次は、テーブルを簡単に記事内に配置する方法を紹介します。

テーブル作成が苦手な人はテーブル用のブロックパターンを活用しよう!

SWELLのテーブルブロックはかなり高機能です。

でも、いざ自分でテーブルを作ろうとするとどのように表現したら良いか迷ってしまう人もいると思います。

SWELLでは、ブロックエディターのブロックパターンという機能で簡単にキレイなテーブルが作成できます。

ブロックパターンに登録されているテーブルは以下の5種類です。

SWELLのテーブル用ブロックパターン-4

ブロックパターンに登録されたコンテンツは、以下の手順で記事内に呼び出すことができます。

STEP
投稿画面の左上にある「+」ボタンをクリック
SWELLのテーブル用ブロックパターンの使い方-1
STEP
パターンをクリックし、カテゴリーから「[SWELL]テーブル」を選択
SWELLのテーブル用ブロックパターンの使い方-2
STEP
お好みのテーブル用パターンをクリックすると記事内に配置される
SWELLのテーブル用ブロックパターンの使い方-3
さとしん

テーブル作成が苦手な方、時短したい方はぜひ活用してみてください…!

このあとは、上記のような比較表を自分で作る手順も紹介しておきます。

SWELLのテーブルブロックで超便利な比較表を作る手順!

ブロックパターンを使わずに、自分で比較表を作る手順を紹介します。

今回は、SWELLのテーブルブロックの機能を活用して以下のような比較表を作っていきます。

SWELLのテーブルブロックで比較表を作る手順-1

さらに、以下のような機能が付いた比較表にしたいと思います。

  • ボタンリンクにはASPのリンクを改変無しで設定
  • ボタンリンクのクリック率も計測可能
  • セルごとに〇や×など記号を入力して視覚的に比較できる
さとしん

見やすさ的にも機能面でもとても良い感じの表になるかなと思います…!

今回は以下のステップで、比較表を作っていきましょう。

  1. 表の全体のレイアウトの作成
  2. 画像の挿入
  3. 計測機能付きのリンクの挿入
  4. リンクをボタンリンクにする
  5. セルの背景に○×など記号を入力(お好みで)

STEP1:表の全体レイアウトを作る

まずは、エディター上でテーブルブロックを挿入して表の全体像を整えていきましょう。

今回は以下画像のようにしました。

SWELLのテーブルブロックで比較表を作る手順-2

ヘッダーやフッター、列の固定やスクロールなど、SWELLの機能を駆使してお好みで設定しましょう。

例では「二重線」のスタイルで「縦1列目を強調する」をONにしてみました。テーブル全体を中央揃えにしています。

テーブルが上手く作れない場合は記事前半の「テーブルブロックの使い方とSWELLの独自機能の紹介」をもう一度読んでみてください。

次は、表の中に画像を挿入していきます。

STEP2:画像を「インライン画像」機能で挿入

表の1番上の行(今回の例ではヘッダー)に商品などの画像を挿入してみましょう。

以下の手順で画像を挿入できます。

STEP
画像を挿入したいセルを選択
STEP
「さらにブロックツールを表示」ボタン→「インライン画像」をクリック
SWELLのテーブルブロックで比較表を作る手順-3
STEP
メディアライブラリからお好みの画像を選択
SWELLのテーブルブロックで比較表を作る手順-4

この作業を画像が必要なセル全てで行ってください。

次は計測機能付きのリンクを設置していきます。

STEP3:クリック計測ができるリンクを設置

SWELLには「広告タグ管理機能」という便利機能があります。

広告タグ管理機能では、広告リンクの表示回数やクリック数を計測できます。

この機能を使ってクリック計測できるボタンリンクを表内に設置していきます。

事前準備として、設置したいASPなどのリンクを「テキスト型」で広告タグ管理機能に登録しておいてください。

登録したタグを以下の手順で表内に設置していきます。

STEP
広告タグの「呼び出しコード」をコピー
SWELLのテーブルブロックで比較表を作る手順-5
STEP
セル内に「呼び出しコード」をペースト
SWELLのテーブルブロックで比較表を作る手順-6

画像同様に、リンクが必要なセル全てで同様の作業をしてください。

次はこのリンクをボタン風に装飾していきます。

STEP4:リンクを「インラインボタン」機能で装飾

SWELLには、任意のテキスト部分をボタンにすることができる「インラインボタン」機能があります。

この機能を使うと、先ほどセル内に配置したリンクをボタンにすることができます。

以下の手順でリンクをボタンに変換していきましょう。

STEP
ボタンにしたいテキストを選択
SWELLのテーブルブロックで比較表を作る手順-7
STEP
「SWELL装飾」→「インラインボタン」をクリック
SWELLのテーブルブロックで比較表を作る手順-8
STEP
ボタンのスタイルを選択
SWELLのテーブルブロックで比較表を作る手順-9
STEP
ボタンリンクに設定してあるリンクを削除する

広告タグをインラインボタン化するときは、リンクは設定していない状態にしておきましょう。

SWELLのテーブルブロックで比較表を作る手順-10

編集画面では見た目がボタンではなくなりますが、実際の記事の画面ではしっかりボタンになっていて、計測機能も動作しているはずです。

SWELLのテーブルブロックで比較表を作る手順-11
編集画面
SWELLのテーブルブロックで比較表を作る手順-12
実際の記事の画面

広告タグをインラインボタン化するのは少しイレギュラーなやり方かもしれませんが、一応この手順でASPの改変無しリンクをクリック計測機能付きのボタンリンクにすることができます。

この手順をボタンにしたいリンクすべてで行うと、以下のようなリンクのクリック数が計測できる比較表が完成します。

SWELLのテーブルブロックで比較表を作る手順-13

最後に、セルの背景に記号アイコンを設定します。

STEP5:セルの背景に○×など記号を入力

セルの背景に〇や×など記号を入力したり、背景色を変えたり、お好みで表を整えましょう。

以下の手順でセルの背景色やアイコンの挿入ができます。

STEP
背景の設定をしたいセルを選択
STEP
「セル背景」をクリックして、背景色やアイコン、アイコンサイズを選択する
SWELLのテーブルブロックで比較表を作る手順-14

今回は、セルの背景に記号を入力してみました。

SWELLのテーブルブロックで比較表を作る手順-1

これで、SWELLの標準機能だけで作る比較表の完成です。

ボタンリンクに広告タグを使うことで、ASPのリンクも改変無しで設置できて、さらにボタンリンクの表示回数やクリック数も計測できるようになっています。

さとしん

比較表に必要な要素はSWELLの機能で十分すぎますね…!

有料プラグインの比較表をSWELLのテーブル機能で作り直す方法

特にTwitterで活動されているブロガーさんの中で有名な比較表が作れるプラグイン「SIMPLE BLOG DESIGN」を使用している方が多いと思います。

SBD使用時の注意事項

現状、このプラグインで比較表を作る場合は、SWELLの高速化機能を一部制限する必要があります。

さとしん

SWELLの高速化機能を活かしきれないので注意してください…!

SWELLの機能を最大限に活用するためにも、プラグインではなくSWELLのテーブル機能で比較表を作った方が良いかもしれません。

そこで、既にプラグインで作っていた比較表をなるべく簡単にSWELLのテーブルに置き換える方法を考えてみました。

以下の手順でテーブルを作り直すことができます。

STEP
プラグインで作ったテーブルを選択
SIMPLE BLOG DESIGNの比較表をSWELLのテーブル機能で作り直す手順-1
STEP
サイドバー→「高度な設定」→「追加CSSクラス」の中を全て削除
SIMPLE BLOG DESIGNの比較表をSWELLのテーブル機能で作り直す手順-2
STEP
デフォルトのテーブルになる
SIMPLE BLOG DESIGNの比較表をSWELLのテーブル機能で作り直す手順-3

プラグインで背景アイコンを設定していたセルのテキストは、「SWELL装飾」→「書式クリア」をしておくと良いかもしれません。

STEP
デフォルトのテーブルをSWELLの機能で再度装飾していく
SIMPLE BLOG DESIGNの比較表をSWELLのテーブル機能で作り直す手順-4

SWELLのテーブル機能で比較表を作る方法は「SWELLのテーブルブロックで超便利な比較表を作る手順!」を参考にしてください。

あとは、ご自身のタイミングで必要に応じてプラグインの無効化や削除などの対応をしてください。

さとしん

プラグインの比較表を複数作っていた方は、この手順でひとつずつ置き換えていくのが良いかもしれません…!

SWELLのテーブル拡張機能のまとめ

SWELLで使えるテーブルブロックの拡張機能について、記事前半の「SWELL独自のテーブルブロック拡張機能」で概要と公式サイトのリンク先を紹介しましたが、こちらでは各機能の実際の画像や簡単な操作・設定方法を紹介していきます。

表のスタイル(デザイン)の追加

SWELLでは、テーブルのデザインを4種類から選択できます。

SWELLのテーブルスタイル-デフォルト
SWELLのテーブルスタイル-ストライプ
SWELLのテーブルスタイル-シンプル
SWELLのテーブルスタイル-二重線

サイドバーのスタイルタブ内「スタイル」からお好みのデザインを選択しましょう。

SWELLのテーブルスタイルの選択

最低限確保するセル幅と1列目のセル幅の指定

SWELLでは以下の2種類の方法でセル幅が指定できます。

  • 各列で最低限維持するセル幅
  • テーブル1列目のセル幅

各列で最低限維持するセル幅は、サイドバーの設定タブ内「テーブル設定」から設定できます。4パターンから選択できます。

テーブル1列目のセル幅の設定は、同じ「テーブル設定」の「テーブル1列目の横幅」に自由に入力する形式になっています。

SWELLのテーブルセルの横幅設定

表の横スクロール

SWELLでは、PC、スマホ表示ともに表を横にスクロールすることができます。

スクロールできる表の場合、表の右上に「スクロールできます」というコメントが自動で表示されます。

スクロールできます
No.項目1項目2項目3項目4項目5項目6
1テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
2テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
横に長い表はスクロールできる

横スクロールの設定は、サイドバーの設定タブ内「横スクロール」設定から選択できるようになっています。

SWELLのテーブル横スクロール設定

また、その際にテーブル全体の横幅を選択できるようになるので、お好みで調整しましょう。

表の1行目か1列目の固定表示

SWELLでは表の「1番上の行」や「1番左の列」を固定表示することができます。

行や列の固定を設定した場合は以下のように動作します。

表の1番上の行を固定

No.項目1項目2
1テキストテキストテキストテキスト
2テキストテキストテキストテキスト
3テキストテキストテキストテキスト
4テキストテキストテキストテキスト
表の1番上を固定

表の1番左の列を固定

スクロールできます
No.項目1項目2項目3項目4項目5項目6
1テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
2テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
表の1番左の列を固定

この設定は行と列で設定方法が異なります。

まず行の固定は、サイドバーの設定タブ内、「テーブルヘッダー設定」内の「ヘッダーの固定設定」のプルダウンから選択します。

SWELLのテーブルヘッダー固定設定

列の固定の場合は、テーブルを横スクロールさせた状態で動作するので、サイドバー「横スクロール設定」から横スクロールの設定をすると「1列目を左端に固定する」のチェックが入れられるようになります。

SWELLのテーブル列固定設定

表の1列目を強調する

SWELLでは、表の1列目(1番左の列)のセルを強調した見た目で表示できます。

サイドバーの設定タブ内、「テーブル設定」パネルにある「縦1列目を強調する」をクリックするだけでOKです。

SWELLのテーブル縦1列目強調設定

ボタンをクリックすると「1列目の強調カラー」設定パネルも表示されるのでお好みの色に設定しましょう。

ヘッダーの背景色、テキスト中央寄せの設定

SWELLでは、テーブルのヘッダー(1番上の行)の背景色やテキストの配置を設定できます。

サイドバーの設定タブ内「設定」パネルで「ヘッダーセクション」をクリックします。

その後、同じ設定タブ内にある「テーブルヘッダー設定」の中で、ヘッダーテキストの中央寄せ指定やヘッダーカラーの設定ができます。

SWELLのテーブルヘッダー設定

セルの背景色を変更

SWELLではセルの背景色を個別に設定できます。

特定セルの背景色を変更する手順は、背景色を変更したいセルを選択した状態で、ツールバーの「セル背景」→「カラー」タブからお好みの色を選択すればOKです。

SWELLのテーブルセル背景設定

セルの背景に○×などアイコンを挿入

SWELLでは、セルの背景色を変更するだけでなく、記号アイコンを背景に挿入できます。

挿入できる記号アイコンは「◎」、「」、「」、「」、「」、「」、「」の7種類の記号を入力できます。

セルの背景に記号を入力する手順は、記号アイコンを挿入したいセルを選択した状態で、ツールバーの「セル背景」→「アイコン」タブからお好みの色を選択すればOKです

SWELLのテーブルセル背景アイコン設定

ちなみに、SWELLのVer.2.6.5アップデートで、テーブル内の〇や×など背景に設定できるアイコンのカラーが変更できるようになりました。

以下の方法で、背景アイコンのカラーを変更できます。

WordPress管理画面→「SWELL設定」→「エディター設定」→「カラーセット」→『テーブル設定』

SWELLのテーブル用背景アイコンのカラー設定方法

セル内のテキストにリスト風の装飾

表のセル内で「リストブロック」のような箇条書きの表現をすることもできます。

SWELLのテーブル内リスト風装飾

リスト風のコンテンツを挿入する手順は以下のとおりです。

STEP
リスト風にしたいテキストを選択し、ツールバーの「テーブル内書式」→「リスト風」をクリック
SWELLのテーブル内リスト風装飾-2
STEP
ツールバーの「表を編集」→「リスト風」を選択
SWELLのテーブル内リスト風装飾-3

セル内のテキスト配置を中央寄せ

個別のセル内テキストの配置を中央寄せにすることができます。

例えば、以下のようにインラインボタンを使った表を作る時に、インラインボタンのみを中央配置にしたいケースなどで使用すると便利です。

SWELLのテーブル内テキスト中央寄せ

設定方法は簡単で、中央寄せにしたいテキストを選択してツールバーの「テーブル内書式」→「テキスト中央揃え」をクリックするだけでOKです。

SWELLのテーブル内テキスト中央寄せ-2

テーブル全体のフォントサイズ設定と中央揃え

テーブル全体のフォントサイズを一括で設定したり、テーブル全体の中央揃え設定が可能です。

テーブル全体のフォントサイズは、サイドバーの設定タブ内「テーブル設定」の「テーブル全体のフォントサイズ」で設定できます。指定できる単位はpx、em、remです。

SWELLのテーブル内フォントサイズ設定

テーブル全体の中央揃えも同じく「テーブル設定」の「テーブル全体の中央揃え設定」から指定できます。

SWELLのテーブル全体の中央揃え設定

セルの結合

セルの結合は、WordPressのバージョンを6.2以上にする必要があります。

サイドバーの設定タブ内にある「セルの結合・変換」欄から簡単にセルの結合・分割が可能です。

SWELLのテーブルセル結合

操作方法もとても簡単で、以下のようなイメージです。

STEP
Shiftキーを押しながら編集したいセルを選択
SWELLのテーブルセル結合-2
STEP
範囲選択した状態で「セルの結合」か「セルを分割」をクリック
SWELLのテーブルセル結合-3

また、WordPress側(6.2時点)のバグで、セル結合をした際に表の一部が崩れることがあります。そのようなときには「崩れたセルを修復する」ボタンをクリックすることで修正できることがあります。

SWELLのテーブルセル結合-4

SWELLのテーブル機能を使いつつセルを結合する方法については、以下の記事にもまとめています。実はWordPress上ではなくスプレッドシードやExcelなどからコピペすることもできるので作りやすい方法で表を作成してみてください。

セルのタグ(td,th)を切り替える

テーブルにはth(table header)やtd(table date)と言うHTMLの要素があります。thはテーブルの見出し、tdは通常のデータを含むセルに使用します。

詳しく知りたい方は以下のページなどを参照してください。

WordPress標準のテーブルブロックでは、タグを自由に指定できず、1行目(1番上)のヘッダーのみをth要素に指定できる仕様です。

そのため、標準機能だけでは以下のような表で1列目(1番左)をth要素にはできないのですが、SWELLではそれが可能になりました。

1列目をthタグに指定したい場合は、サイドバーの設定タブ内にある「セルの結合・変換」から「tbody の1列目を th に変換する」をクリックすればOKです。

SWELLのテーブル機能でthタグとtdタグを切り替える-1

さらに、1行目や1列目以外のセルをthタグにすることも可能です。セルの結合と同じ要領で、Shiftキーを押しながら編集したいセルを選択して、「タグの切り替え」から『TH』をクリックすればOKです。

SWELLのテーブル機能でthタグとtdタグを切り替える-2

上記のように設定したthタグ部分の色を変えたい場合は、「テーブル設定」にある『BODY内のTH強調カラー』から変更できます。

SWELLのテーブル機能でthタグとtdタグを切り替える-3

SWELLのテーブル機能をもう一度見る方はこちら↓↓

SWELLのテーブルブロックは工夫次第でいろいろな表現ができる!

SWELLのテーブルブロックの機能や活用例を紹介してきました。

テーブルブロックはWordPress標準のブロックですが、SWELLではオリジナルの機能が追加されています。

  • 表のスタイル(デザイン)の追加
  • 最低限確保するセル幅の指定
  • 表の横スクロール
  • 表の1行目か1列目の固定表示
  • 表の1列目を強調する

※詳細は公式の「」で紹介されています。

  • ヘッダーの背景色、テキスト中央寄せの設定
  • セルの背景色を変更
  • セルの背景に○×などアイコンを挿入
  • テーブル全体の中央揃え
  • セル内のテキストにリスト風の装飾
  • セル内のテキスト配置を中央寄せ

※詳細は公式の「」で紹介されています。

  • セルの結合・分割が簡単にできる(WordPress6.2以降)
  • テーブル全体のフォントサイズが設定できる
  • セル1列目の横幅が設定できる

※詳細は公式の「」で紹介されています。

上記の機能をうまく活用するといろいろな表現ができるので、読者の方に見やすく伝わりやすい表が作れると思います。

みなさんもアレンジしながら素敵な表を作ってみてください。

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


はこちらからどうぞ…!

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

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

SWELL全般の関連記事

\次におすすめの記事/

SWELLのテーブルブロックで比較表を作る!独自機能で柔軟な表現ができる!

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

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