SWELLボタンブロック｜クリック計測や広告タグの直接入力が便利！

2023年5月31日

さとしん

当ページのリンクには広告が含まれています。

URLをコピーしました！

SWELLのオリジナルブロック、SWELLボタンブロックを紹介します。

この記事の内容

SWELLボタンブロックの便利な機能
SWELLボタンブロックの使い方
SWELLボタンブロックの少し工夫した活用方法

SWELLボタンブロックの便利な機能

広告タグを改変せず入力できる
ボタンにアイコンを挿入できる
ボタンのクリック計測ができる

※詳しくは「SWELLボタンブロックの便利な機能」で解説

さとしん

SWELLボタンは、WordPress標準のボタンよりも便利で高機能なボタンブロックです…！

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

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

SWELLボタンブロックの便利な機能

SWELLボタンブロックは、名前のとおりボタンが設置できるSWELL専用のブロックです。

簡単に、便利で綺麗なボタンが設置できます。

WordPressでは標準でボタンブロックが用意されていますが、SWELLボタンブロックには以下のようなより便利な機能があるので紹介します。

広告タグを簡単に挿入できる
ボタンにアイコンを挿入できる
ボタンのデザインが豊富
ボタンのクリック計測ができる

それぞれ紹介します。

ASPの広告タグを簡単に入力できる

SWELLのボタンブロックでは、アフィリエイトタグなどを直接入力できます。

ASPなどの広告リンクを改変せずに入力できるので便利な機能です。

WordPress標準のボタンブロックは通常のURLしかリンクを挿入できません。

ボタンにアイコンを配置できる

SWELLボタンブロックでは、入力したテキストの前か後ろにアイコンを挿入できます。

選択できるアイコンの種類もかなり豊富です。アイコンの設定方法は「アイコンの設定方法」で紹介します。

みにしん

テキストの内容に合ったアイコンを挿入したいね…！

ボタンのデザインが豊富

SWELLボタンは、ボタンのデザインもたくさんの種類が用意されています。

広告の用途や内容、サイトの雰囲気などにお好みで合わせることができて便利です。

ボタンのクリック計測ができる

SWELLボタンには計測機能が用意されていて、以下の数値を計測できます。

ボタン設置後のPV数
ボタンの表示回数
ボタンのクリック数
このボタンまで読まれた割合
表示回数に対するクリック率

SWELLボタンブロックで計測した数値は、広告の貼り位置などを改善するときのデータとして活用できるのでとても便利です。

SWELLボタンブロックの使い方

SWELLボタンブロックの基本的な使い方は以下のイメージです。

STEP

メインコンテンツエリアで+ボタンをクリック

STEP

「SWELLボタン」を探してクリック

ちなみに…

ブロックエディターでは、段落ブロック内に「/ + ブロック名」を入力することでブロックを検索して呼び出すことができます。

SWELLボタンブロックの場合は、以下の名称でブロックを呼び出すことができます。

/button
/ボタン

さとしん

「/」の操作は覚えておくと便利ですよ…！

詳しくは「ブロックエディターの記事執筆を快適にするショートカットまとめ！」で紹介しています。

STEP

ボタンのテキストを入力

STEP

ボタンのURLを入力

STEP

サイドバーから細かい設定をする

SWELLボタンブロックの細かい設定は後述します。

設定項目が複数ありますが、以下の項目については公式のマニュアルで解説されているので確認しておいてください。

ボタンデザインの設定方法
クリック計測の設定方法
アフィリエイト用広告タグの設定方法

>>SWELL専用ボタンブロックの使い方

上記以外の2点について、この記事で設定方法を紹介しておきます。

通常リンクの設定、確認方法
アイコンの設定方法

リンクの設定方法

ボタンブロックと同様の方法も含めて2種類のリンク設定方法を紹介します。

それぞれ、以下の部分をクリックするとURLの入力欄が表示されます。

また、SWELLボタンブロックのありがたい点として、編集画面では設定されたリンクがボタンの下部に表示されるので、適切にリンクが設定できたか確認することができます。

さとしん

うまく活用して設定間違いが無いようにしましょう…！

アイコンの設定方法

ボタン内のテキスト前後にアイコンを設置する方法は以下のとおりです。

STEP

SWELLボタンブロックを選択

STEP

サイドバー→「アイコン設定」→「アイコン選択」でアイコンを選択

一部、選択肢に無いアイコンを自分で設定することもできます。別記事の「選択肢に無いSVGアイコンを使用する方法」で手順を紹介しています。

STEP

サイドバー→「アイコン設定」→「アイコンの位置」で左右どちらにするか選択

広告タグを直接入力している場合は、アイコンの設定はできない仕様になっています。

少しイレギュラーな方法でアイコンを表示することはできるので「広告タグ直接入力時にアイコンを挿入する」で紹介します。

ここからは少し工夫したSWELLボタンブロックの活用例を紹介していきます。

SWELLボタンブロックの活用例

SWELLボタンブロックとSWELLの便利な機能を組み合わせた活用例を紹介します。

マイクロコピー付きのボタンを設置
広告タグと組み合わせて使う
広告タグ入力時にアイコンを挿入

マイクロコピー付きのボタンを設置する

以下のような、ボタンの上に訴求分などテキスト(マイクロコピー)を表示させたボタンを設置できます。

＼マイクロコピー／

SWELLボタン

上記ボタンは、リンクを設定していないのでクリックしても飛びません。

このようなマイクロコピー付きボタンが、SWELLではブロックパターンとしてデフォルトで用意されています。

以下の手順でマイクロコピー付きボタンをエディター上に呼び出すことができます。

STEP

「ブロック挿入ツールを切り替え」ボタンをクリック

STEP

「パターン」→「[SWELL]汎用パターン」→『マイクロコピーとアイコン付きのボタン』を選択

自分で作りたい場合は、「ブロック下の余白量」機能を活用することで簡単に作れます。

例えば以下の手順でマイクロコピー付きのボタンを作ることができます。

STEP

SWELLボタンを配置

STEP

ボタンブロックの上に段落ブロックを追加しコピーを入力

入力した文字は中央寄せにしておきましょう。

STEP

ブロック下の余白量を「無し(0)」に設定

お好みでフォントサイズなども調整してみてください。

広告タグと組み合わせて使う

SWELLには、アフィリエイトリンクなど広告タグを一括で管理してくれる「広告タグ管理機能」があります。

広告タグについては以下の記事を参考にしてください。

広告タグ直接入力時にアイコンを挿入する

SWELLボタンブロックに広告タグを直接入力した場合は、アイコンの選択欄が表示されません。

広告タグを直接入力した場合でも、以下の方法でアイコンを挿入することができるので紹介します。

広告タグのテキスト部分の改変がOKかなど規約を確認し、自己責任で使用お願いします。

STEP

「広告タグ」→「広告タグを直接入力」欄に広告タグを入力

STEP

テキスト部分にアイコンのショートコードを入力

アイコンの入力…

SWELLではアイコンを設置できるショートコードが用意されています。使用できるアイコンについては、以下の公式マニュアルを参考にしてください。

>>SWELLで使えるアイコンの一覧

上記手順で設定すると、エディター上ではショートコードのまま表示されますが、実際の画面ではアイコンが表示されるはずです。

SWELLボタンブロックで便利でキレイなボタンを作ろう！

SWELLのカスタムブロック、「SWELLボタンブロック」について紹介しました。

ボタンのクリック率が計測できたり、ASPなどの広告タグを改変せず直接入力できる便利なブロックです。

ボタンのデザインやアイコンの設定も柔軟にできるので、見やすく目立つボタンを設置できると思います。

ブログ記事などでボタンリンクを設置したい場面は多いと思うので、SWELLボタンブロックをうまく活用していきましょう。

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

SWELL公式サイトはこちらからどうぞ…！

SWELL公式サイトへ

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

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