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

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

SWELLのテーブルブロックで比較表を作る!独自機能で柔軟な表現ができる!
  • URLをコピーしました!

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

この記事の内容
  • SWELLのテーブルブロックについて
  • テーブル用ブロックパターンの使い方
  • 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」という無料プラグインの利用をおすすめします。

さとしん

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

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

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

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

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

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

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

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

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

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

さとしん

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

背景アイコンのカラーが変更できるようになりました!

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

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

WordPress管理画面→「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のテーブルブロックの機能や活用例を紹介してきました。

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

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

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

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

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

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

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

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


はこちらからどうぞ…!

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

SWELL全般の関連記事

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

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

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