SWELLボタンの使い方｜リンク設定・デザイン変更・クリック率計測まで解説

SWELLボタンの使い方で迷っていませんか。

SWELLボタンを使うと、記事内に目立つリンクボタンを簡単に設置できます。

リンク先の設定、ボタンの色やサイズ変更、アイコン追加、クリック率の計測まで、管理画面から設定できます。

アフィリエイトリンクや関連記事への誘導にも使えるので、ブログの収益導線を作るうえでも重要な機能です。

この記事では、

• SWELLボタンの基本的な使い方、
• デザインの変更方法、
• アフィリエイトリンクの設置方法、
• クリック率を確認する方法

まで順番に解説します。

わたし自身もSWELLボタンを使って、レビュー記事や関連記事への導線を管理しています。

まずは、SWELLボタンで何ができるのかを確認していきましょう。

SWELLを使うと、こういった装飾もかんたんに実装できます。

実際の使い心地やメリットは、こちらの記事で詳しく解説しています。

SWELLボタンとは？

SWELLボタンとは、記事内にリンクボタンを設置できるSWELL専用ブロックです。

公式サイトへの誘導、関連記事への内部リンク、アフィリエイトリンクなどに使えます。

WordPress標準のボタンよりも、デザイン調整やクリック率計測がしやすいのが特徴です。

ただし、ボタンは置けばクリックされるものではありません。

読者が次に進みたいと思った場所に、わかりやすい言葉で設置することが大切です。

この章では以下について解説します。

それぞれ詳しく解説していきます。

SWELLボタンでできること

SWELLボタンでは、記事内に目立つリンクボタンを簡単に設置できます。

たとえば、

• 公式サイトへのリンク、
• 関連記事への内部リンク、
• アフィリエイトリンク、
• 資料請求ページへのリンク

などに使えます。

ボタンのテキストも自由に変更できます。

「詳しくはこちら」だけでなく、

• 「SWELLの公式サイトを見る」
• 「レビュー記事を読む」
• 「無料で登録する」

のように、クリック後の行動がわかる言葉にすると、読者が迷いにくくなります。

また、SWELLボタンでは、

• ボタンの色やサイズ、
• 横幅、
• 丸み、
• アイコン

なども設定できます。

さらに、クリック率計測を使えば、ボタンが何回表示され、何回クリックされたのかも確認できます。

ボタンを設置して終わりではなく、数字を見ながら改善できるのがSWELLボタンの強みです。

通常のボタンブロックとの違い

WordPressにも標準のボタンブロックがあります。

ただ、SWELLボタンは、ブログ運営やアフィリエイトで使いやすいように機能が強化されています。

大きな違いは以下の通りです。

標準のボタンブロックは、シンプルなリンクボタンを置きたいときには十分です。

一方で、アフィリエイトリンクや収益記事の導線をしっかり管理したいなら、SWELLボタンを使うほうが向いています。

アフィリエイトリンクや関連記事への誘導に使える

SWELLボタンは、アフィリエイトリンクや関連記事への誘導に使いやすいです。

収益記事では、読者が商品やサービスに興味を持ったタイミングで、公式サイトへのボタンを置きます。

関連記事への内部リンクでは、「レビュー記事を読む」「比較記事を見る」「設定方法を確認する」のように、次に読むべき記事へ自然に案内できます。

たとえば、SWELLを紹介する記事なら、価格、使いやすさ、デメリット、他テーマとの違いを説明したあとに、「SWELLの公式サイトを見る」というボタンを置くと自然です。

ボタンは装飾ではなく、読者の行動を助けるための導線です。

この考え方で使うと、SWELLボタンはかなり強い武器になります。

SWELLボタンの基本的な使い方

SWELLボタンは、投稿画面から簡単に追加できます。

まずは、ボタンを追加してリンク先を設定する流れを確認しましょう。

SWELLボタンのサイト全体設定

サイト全体の設定として、ボタンの色や形をあらかじめ設定しておきましょう。

設定するため、SWELLボタンの設定画面を開きます。

WordPressのダッシュボードメニューから「SWELL設定」⇒「エディター設定」をクリックしましょう。

エディター設定画面になるので「ボタン」をクリックします。

ボタンカラーを設定する（初期設定）

SWELLボタンの設定では、3種類のカラーパターンを自由に設定できます。

カラーピッカーで直感的に色を選んだり、お気に入りの色のカラーコードを入力したりできます。

グラデーション機能もあり、チェックを入れると2色使いのおしゃれなボタンが作れます。

👉 デフォルトカラーにこだわらず、サイトのテーマカラーに合わせておくのがおすすめです。

ボタンの丸みを調整する（初期設定）

ボタンの形は以下の3種類から選べます。

• 丸みなし
• 少し丸める
• 丸める

この設定は、ノーマル・立体・キラっと・アウトラインそれぞれに反映されます。

カラーパターンと丸みの調整が完了したら、「変更を保存」をクリックして設定を保存しましょう！

SWELLボタンのカスタマイズ方法

SWELLボタンは、リンク先を設定するだけでなく、見た目も細かく調整できます。

ボタンの種類、サイズ、横幅、色、アイコンなどを記事ごとに変更できるので、記事の雰囲気や目的に合わせて使い分けましょう。

ただし、デザインを凝りすぎる必要はありません。

大切なのは、読者が「次に何をすればいいか」を迷わないことです。

目立たせたいボタンと、補足的に使うボタンの役割を分けながら設定していきましょう。

サイドバーを表示させるため、右上の設定ボタンをクリックしておきましょう。

ボタンの種類を選ぶ

まずは、ボタンの種類を選びましょう。

SWELLでは、以下の5種類のデザインが用意されています。

購入や登録など、強く行動してほしいボタンは、少し目立つデザインにするとわかりやすいです。

一方で、関連記事への内部リンクや補足ページへの誘導は、控えめなデザインでも問題ありません。

すべてのボタンを目立たせすぎると、記事全体がうるさく見えます。

メインで押してほしいボタンと、補助的に置くボタンを分けて考えましょう。

サイズと色を変更する

ボタンのサイズと色はサイドバーから簡単に変更できます。

ボタンにアイコンを追加する

SWELLボタンでは、ボタン内にアイコンを追加できます。

アイコンを使うと、ボタンの意味が直感的に伝わりやすくなります。

ただし、アイコンも使いすぎると見た目がごちゃつくので、最初は重要なボタンだけに使うようにします。

アイコンを入れたら、スマホでも文字が詰まって見えないか確認しましょう。

「検索」をクリックすると、たくさんのアイコンが選べるようになります。

SWELLマークを左側に設置し、アイコンのサイズを1.5emにすると下図のようになりました。

SWELLボタンにアフィリエイトリンクを設置する方法

SWELLボタンは、アフィリエイトリンクの設置にも使えます。

通常のURLを入れる方法と、ASPで取得した広告タグを直接入力する方法があります。

通常URLを入れる場合

公式サイトや関連記事へ誘導する場合は、リンク先URLをそのまま入力します。

SWELL公式サイト、レビュー記事、比較記事などへ誘導するときは、この方法で問題ありません。

URLを入力したら、プレビューでボタンをクリックして、正しいページに移動できるか確認しましょう。

特に、内部リンクを設定する場合は、古いURLや下書き状態の記事URLを入れていないか確認してください。

リンク先が間違っていると、読者の行動が止まり離脱につながるからです。

ボタンは、読者を次のページへ案内する導線です。

公開前に必ずクリック確認まで済ませましょう。

広告タグを直接入力する場合

ASPで取得したテキスト型の広告タグを使う場合は、「広告タグを直接入力」の欄に貼り付けます。

設置する手順は簡単です。

これだけで、アフィリエイトリンクをボタンとして表示できます

ただし、ここで注意したいのは、通常のURL入力欄に広告タグ全体を貼らないことです。

通常のURL欄には、基本的にURLだけを入れます。
一方で、「広告タグを直接入力」の欄には、ASPで取得した広告タグをそのまま貼ります。

この違いを間違えると、リンクが正しく動かなかったり、ボタン表示が崩れたりすることがあります。

広告タグを入れたあとは、必ずプレビューで確認しましょう。

広告タグを使用する場合、アイコン設定はできません。

広告タグを使うときの注意点

公開前の確認を徹底する

広告タグを使うときは、公開前の確認がかなり重要になります。

• ボタンの表示が崩れていないか。
• 正しい広告リンクに移動できるか。
• スマホでもボタンが押しやすいか。

ここまで確認してから公開するようにしましょう。

ASPの広告コードは改変しない

また、ASPによっては広告タグの改変を禁止している場合があります。

広告コードの一部を自己判断で削ったり、書き換えたりするのは避けましょう。

規約違反になる可能性があるからです。

不安な場合は、ASPで用意されているテキスト広告をそのまま使うようにしてください。

ボタンの前で読者の不安を解消する

広告タグを使う目的は、読者が商品やサービスに興味を持ったタイミングで、迷わず公式ページへ進めるようにすることです。

なので、ボタンの前には、読者の不安を解消する文章を置きましょう。

価格、使い方、デメリット、他サービスとの違いなどに答えたあとでボタンを置くと、自然な導線になります。

広告タグは便利ですが、貼るだけでは成果につながりません。

読者が納得したあとに、次の行動を示すために使いましょう。

SWELLボタンのクリック率を計測する方法

SWELLボタンでは、ボタンごとのクリック率を計測できます。

ここではクリック率を計測する設定方法についてみていきましょう。

クリック率を計測する設定をオンにする

クリック率を計測したい場合は、SWELLボタンの設定で計測機能をオンにしましょう。

まず、投稿編集画面で計測したいSWELLボタンをクリックします。

サイドバーにある設定パネルから、クリック率計測に関する項目を探します。

そこで「クリック率を計測する」をオンにします。

設定をオンにすると、そのボタンの表示回数やクリック数を記録できるようになります。

一方で、すべてのボタンを計測する必要はありません。

まずは、よく読まれている記事や、収益につながる記事のボタンから設定しましょう。

表示回数・クリック数・クリック率を見る

クリック率計測をオンにすると、表示回数、クリック数、クリック率を確認できます。

たとえば、表示回数が1,000回でクリック数が20回なら、クリック率は2％です。

この数字を見ることで、ボタンが読者の行動につながっているかを判断できます。

ただし、クリック率だけを見て一喜一憂しすぎないほうがいいです。

記事の種類、検索意図、リンク先、ボタンの位置によって、クリック率は大きく変わります。

大事なのは、数字を見ながら改善することです。

ボタンの色を変える前に、まずは文脈と文言を見直しましょう。

ボタンを複製したときは計測設定を確認する

以前のSWELLボタンでは、クリック率を計測する際にボタンIDを手動で設定する必要がありました。

現在は、ボタンIDが自動で設定される仕様になっているため、基本的には自分で入力する必要はありません。

ただし、ボタンを複製した場合や、古い記事を編集する場合は、クリック率の計測設定が正しくオンになっているか確認しておきましょう。

クリックされやすいSWELLボタンの置き方

SWELLボタンは、ただ目立つ場所に置けばクリックされるわけではありません。

読者が「次に進みたい」と思ったタイミングで置くことが大切です。

ボタンの色や大きさも大事ですが、それ以上に重要なのは、ボタンを置く前後の流れです。

読者の不安に答えたあとで、次の行動をわかりやすく示しましょう。

ここでは、クリックされやすいSWELLボタンの置き方を解説します。

読者の不安を解消した直後に置く

ボタンは、読者の不安を解消した直後に置きましょう。

読者は、納得していない状態ではボタンを押しません。

たとえば、SWELLを紹介する記事なら、読者は次のような不安を持っています。

• 初心者でも使えるのか
• 価格に見合う価値があるのか
• 無料テーマとの違いは何か
• 購入後の設定で迷わないか
• 他のテーマから乗り換えても大丈夫か

こうした不安に答えたあとで、SWELL公式サイトへのボタンを置くと自然です。

逆に、記事の冒頭でいきなり購入ボタンを置いても、まだ読者の気持ちは動いていません。

読者は「まだ判断材料が足りない」と感じている状態です。

なので、まずは悩みや疑問に答えます。

そのうえで、「さらに詳しく見たい人はこちら」という流れでボタンを置きましょう。

ボタンは、読者を急かすためのものではありません。

読者が次の一歩を踏み出しやすくするための案内です。

ボタン文言はクリック後の行動がわかる言葉にする

ボタン文言は、クリック後に何が起きるのかがわかる言葉にしましょう。

「詳しくはこちら」や「クリックはこちら」だけでは、少し弱いです。

読者が、クリック後の行動をイメージしにくいからです。

ボタン文言は、短く、具体的にしましょう。

読者が「このボタンを押すと何ができるのか」を迷わないことが大事です。

また、ボタンの前に短い補足文を入れるのも効果的です。

• 「購入前に機能を確認したい方は、公式サイトを見ておきましょう」
• 「初期設定で迷いたくない方は、こちらの記事も参考にしてください」

このように一言添えると、ボタンを押す理由が伝わりやすくなります。

メインボタンとサブボタンの役割を分ける

記事内に複数のボタンを置く場合は、メインボタンとサブボタンの役割を分けましょう。

すべてのボタンを同じように目立たせると、読者はどれを押せばいいのか迷います。

メインボタンは、記事内で統一した色にしましょう。

サブボタンは、少し控えめな色やデザインにすると、役割が分かりやすくなります。

読者にいちばん進んでほしい行動を決めて、その行動をメインボタンで示しましょう。

SWELLボタンは、目立たせるための装飾ではありません。

読者の迷いを減らし、次の行動を取りやすくするための導線です。

CSSでSWELLボタンをカスタマイズする方法

SWELLボタンは、標準機能だけでも十分に見やすく作れます。

そのため、初心者のうちはSWELLの標準設定でボタンを作れるようになれば大丈夫です。

ただ、「サイトのブランドカラーに合わせて細かく色を変えたい」「カーソルを乗せたときに少し動きをつけたい」という場合は、追加CSSで調整できます。

ここでは、必要な人向けに、CSSで調整する方法を紹介します。

ただし、追加CSSを使う場合は、変更前に必ず現在の設定をメモしておきましょう。

また、CSSを追加したあとは、パソコンとスマホの両方で表示を確認してから公開してください。

色を自由に変更する

SWELLの標準設定でも、ボタンの色は変更できます。

ただ、サイトのブランドカラーに合わせて細かく色を指定したい場合は、追加CSSで調整できます。

この手順は、必要な人だけ確認してください。

色を変えるときは、記事内で使う色を増やしすぎないようにしましょう。

ボタンごとに色がバラバラだと、読者がどれを押せばいいのか迷います。

メインボタンの色は1色に決めて、記事内で統一するのがおすすめです。

カーソルを乗せたときに少し大きくする

ボタンにカーソルを乗せたときの動きも、CSSで調整できます。

少しだけ大きくなる動きなら、クリックできる場所だと伝わりやすくなります。

ただし、大きく動かしすぎると記事全体が安っぽく見えることがあるので、動きは控えめにしましょう。

CSSカスタマイズは、ボタンを押しやすくするための補助です。

動きや色を変える前に、まずはボタンの文言と設置場所を見直しましょう。

読者が納得したタイミングで、次の行動がわかるボタンを置く。

ここがいちばん大事です。

まとめ：SWELLボタンは「行動を促す導線」として使いましょう

SWELLボタンを使うと、記事内にわかりやすいリンクボタンを設置できます。

ボタンの色、サイズ、アイコン、リンク先、クリック率計測まで、管理画面から設定できます。

最初は、SWELLボタンを追加して、テキストを入れ、リンク先URLを設定する基本操作を覚えれば大丈夫です。

慣れてきたら、クリック率を計測しながら、ボタンの位置や文言を改善していきましょう。

ボタンをおしゃれにすることが目的ではありません。

大切なのは、読者が次に進みたいと思ったタイミングで、迷わず押せるボタンを置くことです。

まずは、よく読まれている記事にあるボタンを1つ選び、文言と設置場所を見直してみましょう。

---

SWELLボタンを設置したら、収益導線も見直しましょう

SWELLボタンを使えば、アフィリエイトリンクや関連記事への誘導をかんたんに設置できます。

クリック率を計測できるので、どのボタンが読まれているか、どこでクリックされているかも確認しやすいです。

ただ、ボタンを設置しただけで収益が伸びるわけではありません。

大事なのは、

• 「どの記事から」
• 「どこへ誘導して」
• 「最終的にどの商品につなげるのか」

を設計することです。

ブログを書いているのに収益につながらない。

レビュー記事を書いたのに、クリックも成約もあまり発生しない。

そんな場合は、ボタンのデザインではなく、「読者が商品を買うまでの導線」が弱いのかもしれません。

無料チェックシートでは、あなたのブログが、

を40項目で確認できます。

ボタンを整えたら、次はブログ全体の収益導線も見直してみてください。