WordPressテーマ「SWELL」のレビューはこちら

SWELLのテーブルブロック作成方法を解説【有料プラグイン不要で高機能】

SWELL

こんにちは、さいそん(@saison_program)です。

この記事では、SWELLのテーブルブロックの作成方法について解説をしています。(※2022/3/30アップデートで実装された新機能)

SWELLで高機能でカッコいいテーブル(表)を作りたいです。
作成方法を教えてください!

このような疑問や悩みに答えていきます!

本記事の内容
  • SWELLのテーブルブロックとは
  • SWELLのテーブルブロック新機能の使い方
  • 高機能な比較表を自作する方法

執筆者情報

Twitter(@saison_program)

WordPress標準のブロックエディタには「テーブルブロック」という機能が実装されています。

今回は、SWELLのアップデートによってさらに進化した機能が追加されたのでその使い方についてまとめました。

ぜひアフィリエイトや見やすいブログにするために参考にしてみてくださいね。

結論からお伝えすると、「有料プラグイン」でしか実現できなかった機能が実装されました。

ではさっそく内容に入っていきましょう!

\ 当ブログのWordPressテーマ /

目次

SWELLのテーブルブロックとは

SWELLのテーブルブロックで用意されている代表的な拡張機能は以下の通りです↓

SWELLのテーブルブロックの特徴
  • 表のスタイルの指定
  • 最低限確保するセル幅の指定
  • 表の横スクロール
  • 表のヘッダー/フッターを強調
  • インラインボタン機能
  • セル背景色の指定
  • セルの背景にアイコン挿入機能
  • ヘッダーの背景色、テキスト中央寄せの設定

SWELLを導入するだけで、テーブルの作成機能がここまで拡張されているのは非常に嬉しいですよね。

それぞれの機能の詳細は公式サイトでまとめられているのでそちらも参考にしてください。

SWELLのテーブルブロック作成方法とブロックパターン

SWELLのテーブルブロックの基本的な作成方法について画像付きで解説をしていきます。

基本的なテーブルブロックの使い方
STEP
記事作成画面左上の[+]をクリック
テーブルブロック作成1
STEP
テーブルを検索してクリック
テーブルブロック作成2
STEP
カラム数/行数を入力
テーブルブロック作成3
STEP
セルの中に項目を記入
テーブルブロック作成4

以上の作業だけで簡単にテーブルブロックを作成することができます。

ベースとなるテーブルブロックを作成したら、SWELLの独自の拡張機能を駆使して素敵な表を完成させていきましょう。

たくさんの機能がありすぎて使いこなす自信がないです…

このように心配している方もSWELLには以下の表のブロックパターン(テンプレート)がアップデートにより追加されたので初心者でも安心して使うことができますよ。

SWELLのブロックパターン
  • メリット・デメリット
  • 料金比較表
  • 商品比較表1
  • 商品比較表2
  • 商品比較表3

それぞれ内容を見ていきます!

1.メリット・デメリット

メリットデメリット

メリットとデメリットを見やすくまとめることができるブロックパターンです。

シンプルな表ですので、記事のデザインを崩すことなく使えるようになっています。

2.料金比較表

料金比較表

複数の料金プランがある商品を紹介するときに使えるブロックパターンです。

セルの中にボタンも最初からついているので特に細かい設定をする必要がなく充実した表を作ることができます。

3.商品比較表1

商品比較表1

商品比較表は、商品の画像もテーブルに挿入することができるブロックパターンです。

アイコンを使いながら視覚的にわかりやすい表となっています。

4.商品比較表2

商品比較表2

商品比較表2では、「○」「△」「×」のアイコンをセルの背景に設定することができるブロックパターンです。

このブロックパターンが僕的に一番のSWELLの強みだと思っています!

理由は、従来であればセルの背景にアイコンを追加するためには「有料プラグイン」を使用する必要があったからです。

「SIMPLE BLOG DESIGN」という9,800円のプラグインでカスタマイズしていた機能です。

この機能をSWELLは取り入れたことによって専用プラグインが不要になった点はブロガーにとって大きなメリットとなります。

5.商品比較表3

商品比較表3

商品比較表3は商品の画像に加え、商品の特徴や評価スターを表示させることができるブロックパターンです。

これを自分でカスタマイズするとなると結構大変なのですが、初心者でも簡単に実装できるようになっているのが特徴となっています。

以上がSWELLのテーブルブロックの紹介でした。

ブログ初心者でもアフィリエイトに効果抜群の高度な表を作ることができるので試してみてくださいね。

SWELLのブロックパターンの呼び出し方法

SWELLのテーブルブロックのブロックパターンを呼び出す方法は以下の通りです↓

ブロックパターンの呼び出し方
STEP
記事作成画面左上の[+]をクリック
テーブルブロック作成1
STEP
パターンの「SWELLテーブル」を選択
ブロックパターン1
STEP
設置したいテーブルをクリック
ブロックパターン 2

この機能を使うことによって高度な表を簡単に作成することができます。

圧倒的にブログ執筆作業を効率化することができるので試してみてくださいね。

SWELLのテーブルブロックを自分でカスタマイズする方法

SWELLであらかじめ用意されているブロックパターンではなく、最初から自分で比較表を作成する方法を解説します。

今回は以下のような表を作っていきますので参考にしてみてくださいね。

完成形
表の特徴
  • 背景にアイコンを付けてわかりやすい
  • ボタンのクリック率等を計測できる

では具体的に作成方法を画像付きで解説をしていきます。

1.表のベースを作成

最初にテーブルブロックのベースとなる表を作成していきましょう。

テーブル用意

SWELL独自のカスタマイズ機能を使ってお好みのデザインにしてみてください。(今回は説明用として簡単なものとしています。)

2.インライン画像の挿入

表の一番上には画像を挿入していきます。

インライン画像挿入方法
STEP
セルを選択する
STEP
[ブロックツールを表示]→[インライン画像]をクリック
インライン画像1
STEP
画像を選択して挿入
インライン画像2

画像を挿入する時のコツとしては、全ての画像のサイズを同じものにすると綺麗な表に仕上げることができます。

Canvaなどの画像編集ツールでサイズを揃えておきましょう!

※サンプルに使用している画像は600px×300pxとしています。

3.計測用リンクの挿入

ボタンのクリック率などを計測することができるリンクを挿入していきます。

このリンクを導入することによってどのくらいの反応があったのかを計測できるのでアフィリエイトをする時の貴重なデータを集めることができます。

事前に「広告タグ」をテキスト型で登録してある必要があります。

計測用リンクの挿入
STEP
広告タグの[呼び出しコード]をコピー
ボタン設置1
STEP
該当のセルに[呼び出しコード]をペースト
ボタン設置2

今回のサンプルでは2箇所に呼び出しコードを入力していきます。

4.インラインボタン装飾

SWELLのアップデートでテーブル内にボタンを設置できるようになりました。

先ほど入力した広告タグをボタンにしていく手順を紹介します。

インラインボタン装飾
STEP
ボタン装飾するテキストを選択
インラインボタン1
STEP
[SWELL装飾]→[インラインボタン]をクリック
インラインボタン2
STEP
お好みのボタン装飾を選択
インラインボタン3
STEP
ボタンのリンクを削除
インラインボタン4

計測用リンク(テキスト型の広告タグ)を使用するときはリンクを解除しておきましょう。

また、エディタ上ではボタン装飾が解除されますが、プレビューではボタン装飾がされていますので確認をしておきましょう。

5.背景にアイコンを設定

セルの背景にアイコンを設定してパッと読者が比較をしやすいようにしていきましょう。

以下の手順で簡単に設定することができます。

背景にアイコン設定
STEP
背景を設定したいセルを選択
STEP
[セル背景]をクリックしてアイコンを設定
背景アイコン

お疲れさまでした。これで自作のテーブルブロックの完成です!

完成形
サンプル完成形

基本的な機能は理解できたと思うので、あとはどんどん自分で試行錯誤しながら最高の表を作っていきましょう。

まとめ:SWELLでは高機能な比較表が作成できる

今回は、SWELLの「テーブルブロック」の使い方について詳しく説明をしました。

従来であれば有料プラグインを使用しなければいけなかった装飾も全てSWELLで完結できるようになったので非常に便利になりました。

SWELLのテーブルブロックについておさらいをしておきましょう。

SWELLのテーブルブロックの特徴
  • 表のスタイルの指定
  • 最低限確保するセル幅の指定
  • 表の横スクロール
  • 表のヘッダー/フッターを強調
  • インラインボタン機能
  • セル背景色の指定
  • セルの背景にアイコン挿入機能
  • ヘッダーの背景色、テキスト中央寄せの設定

定期的なアップデートにより、どんどんSWELLには機能が追加されています。

それに伴って、アフィリエイトのしやすさも格段に上がっているのでまさに「稼げるWordPressテーマ」と言えますのでぜひ気になった方はSWELLを使ってみてくださいね。

\ 当ブログのWordPressテーマ /

こちらの記事では、SWELLを実際に使ってみたレビューを紹介していますので参考にしてみてください。

SWELL

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

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