「SWELLボタンでどう使ったらいいの？」「使ったほうがいい理由とかある？」
SWELLでブログ運営している方で、そう思われている方はいませんか？
SWELLのボタンブロックを使いこなせば、おしゃれなボタンの作成やアフィリエイトリンクの設置、さらにクリック率の計測まで可能になります。
この記事では、SWELLボタンの基本的な設定方法から、応用テクニックまで、初心者の方でも分かりやすく解説。
実際にSWELLを使ってブログ運営している私が、効果的なボタン活用法をお伝えしますので、ぜひ参考にしてください。
SWELLボタンはSWELL専用のブロックです。インストールがまだの方はこちらからどうぞSWELLの購入はこちら
SWELLのボタンブロックとは
ReinaSWELLのボタンブロックって何ですか？
SWELLのボタンブロックは、記事内にクリック可能なボタンを簡単に設置できるSWELL専用機能です。
ボタンブロックは、通常のテキストリンクと比べると視認性が高く、読者の行動を促しやすい点が特徴です。
Reina確かにただの文字のリンクより、ボタンが設置されている方が見た目もおしゃれですよね。
ボタンブロックはWordPressにも標準機能として搭載されていますが、SWELLのボタンブロックは設定項目が豊富です。
例えば色や形、サイズを自由に変更することができ、目立たせたい場所への配置が可能です。
WordPress標準ボタン
SWELL専用ボタン
ReinaWordPresの標準ボタンはほとんどカスタマイズできないですが、SWELLは豊富に設定が可能です！
では、次よりSWELLボタンを使用したほうが良い理由をお伝えしていきます。
SWELL ボタンがもたらす効果3つ
ReinaそもそもSWELLボタンを使った方がいい理由って何だろう？
SWELLのボタン機能を活用することで、ブログ運営におけるさまざまなメリットが得られます。
- おしゃれなボタンの作成が可能
- アフィリエイトリンクが簡単に設置可能
- ボタンのクリック計測もできる
これらのメリットについて、次で詳しく説明します。
おしゃれなボタンの作成が可能
SWELLのボタンは豊富なデザインオプションを備えており、専門知識がなくてもおしゃれなボタンを作成できます。
例えばSWELLボタンは、ただクリックするだけのボタンではなく、以下のようなスタイルに作成できます。
Reina5種類もあってどれもおしゃれですね！
もちろんこのSWELLボタンは、色も自由に設定可能なので、自身のサイトのブランドカラーに統一することができます。
さらに角丸の調整も管理画面から設定することができるため、細部までこだわったデザインも可能です。
設定したSWELLボタンは、WordPress投稿ページのブロックからいつでも呼び出すことができます。
Reina設定方法や呼び出し方法については、後ほど説明しますね！
アフィリエイトリンクが簡単に設置可能
SWELLのボタンブロックでは、広告タグを直接貼り付けることができ、アフィリエイトリンクの設置が非常に簡単です。
ASPから取得した広告コードをそのままボタンに埋め込めるため、HTMLの知識がなくても安心です。
通常のテキストリンクよりも視覚的に目立つため、クリック率の向上が期待できます。
アフィリエイトボタンの使い方：
Reinaアフィリエイトブログを書いている人は必要になってきますね！
また、複数のアフィリエイトボタンを並べて比較表示することも可能です。
ボタンのデザインを統一することで、サイト全体の見栄えを保ちながら収益化を図ることもできるでしょう。
ボタンのクリック計測もできる
SWELLボタンはクリック計測機能が搭載されており、各ボタンのパフォーマンスを数値で確認可能です。
計測を有効にすると、クリック数やクリック率をチェックできるようになります。
どのボタンが効果的で、どのボタンが改善の余地があるかを客観的に判断できるため、記事の最適化に役立つでしょう。
以下は計測を有効することで確認できる項目です。
| 計測項目 | 内容 |
|---|---|
| クリック数 | ボタンがクリックされた総回数 |
| 表示回数 | ボタンが表示された回数 |
| クリック率 | 表示回数に対するクリック数の割合 |
Reinaアフィリエイトするなら、どのボタンが効果的か、分析することが大切ですね！
SWELLボタンの設定から使い方【6つのステップ】
Reinaでは、SWELLのボタンの設定から使い方まで説明していきますね！
ここからは、SWELLボタンの基本的な使い方を順番に解説します。
- SWELL ボタンのカラーや形を設定する
- 記事内にSWELLボタンを呼び出す
- 設定したカラーでスタイルやサイズを変更する
- アイコンを挿入する
- リンクを設置する
- クリック計測をオンにする
初めての方でもスムーズに設定できるよう、これら各ステップを次から詳しく説明します。
SWELL ボタンのカラーや形を設定する
まずは、ボタンの基本となるカラーや形状を設定します。
WordPress管理画面から「SWELL設定」→「エディター設定」と進みます。
すると、エディター設定画面に移るので、「ボタン」タブをクリックしましょう。
ボタンタブを押すと、このような画面が出てきます。
ここではカラー設定や、ボタンの形の設定を行うことが可能です。
カラーは3種類設定でき、また下の「ボタンのグラデーションをオンにする」をクリックすると、グラデーションカラーに変更します。
ボタンの種類は4種類、角の形状は3種類設定することができます。
丸みなしを選択すると、このようなボタンの形状になります。
次は、少し丸めてみましょう。
丸めるを選ぶと、このような形になります。
好きなカラー、ボタンの形を決めることができたら、「変更を保存」にチェックします。
Reinaでは次から、設定したボタンを投稿ページで呼び出してみましょう！
記事内にSWELLボタンを呼び出す
では、SWELL設定で設定したSWELLボタンを呼び出してみましょう。
SWELLボタンをクリックするとSWELLボタンがノーマルがデフォルトで表示されます。
では、次よりブロックで設定したSWELLボタンについて、色々変更してみましょう。
設定したカラーでスタイルやサイズを変更する
挿入したボタンのスタイルとサイズを調整します、右側の「ブロック」をクリックしてください。
一番上にスタイルが表示されますので、好みの形を選択できます。
ボタンサイズを設定することができ、詳細に決めたい場合はフォントサイズを指定することも可能です。
SWELL設定で決定したカラーを選択することができます。選択カラーを変更したい場合は、SWELL設定に戻って変更しましょう。
アイコンを挿入する
SWELLボタンはアイコンを挿入することが可能です。
ここでアイコンの位置や種類、サイズを変更できます。アイコンの種類は多数あるため、自分好みのアイコンを選ぶことができます。
リンクを設置する
SWELLボタンを使って、リンク先URLを設定します。
リンク先をクリックするとURLを入力することができます。遷移したいURL先を入力してみましょう。
そして、SWELLボタンは直接広告タグを挿入することが可能です。
この「広告タグを直接入力」にASPの広告を貼り付けるだけでOKです。
アフィリエイトブログをしている方は規約をしっかり読んで、ぜひ活用してみてください。
クリック計測をオンにする
SWELLボタンはクリック数を計測することが可能です。ブロックの下の方をスクロールしてみてください。
この「クリック率を計測する」をオンにするだけで、自動的に計測が開始されます。
これにより、設定したSWELLボタンがユーザーによってどれくらいクリックされたのか視覚的に確認することが可能です。
このようなクリック計測は、以下のようなことに活用できます。
- クリック率の低いボタンの文言やを改善できる
- 最もクリックされているボタンの配置を参考にする
- 需要の高い記事内容なのか把握できる
アフィリエイトブログをしている方はオンにしておきましょう。
Reina以上がSWELLボタンの設定から使い方の紹介でした！自分好みのSWELLボタンを作ってみてくださいね！
SWELLはシンプルなのに高機能なブロック搭載の、WordPress有料テーマです。
初心者でもわかりやすく、綺麗なデザインのサイト作成が可能！
もっとオシャレなブログを作りたい、でも難しいのは嫌…そんな方におすすめのテーマです。
SWELLボタンを使うときの注意点
Reinaもちろん便利なSWELLボタンですが、注意点もあります。
SWELLボタンを効果的に活用するために、いくつか注意すべきポイントがあります。
- 広告タグ使用時はアイコンが使えない
- 広告タグを使用するときはASP規約に沿う
- 長すぎる文言は控える
これらの注意点を、次で詳しく説明します。
広告タグ使用時はアイコンが使えない
アフィリエイトリンクの広告タグを直接使用する場合、アイコンを挿入できません。
Reinaタグを入力すると、アイコン選択が消えてしまいました…
SWELLのボタンブロックで「広告タグを直接入力」すると、ASPから取得したコードをそのまま貼り付けが可能です。
しかし、この方法ではアイコン設定が無効化されます。
アイコンを使いたい場合は、通常のURLリンク方式でボタンを作成する必要があるでしょう。
ただし、後述する応用テクニックを使えば、広告タグにもアイコンを追加することは可能です。
広告タグを使用するときはASP規約に沿う
アフィリエイト広告を扱う際は、必ず各ASPの規約を確認しましょう。
多くのASPでは、提供された広告コードの改変を禁止しています。
ボタンのデザインをカスタマイズする際も、広告コードそのものを変更することは避けるべきです。
SWELLのボタン機能を使う場合は、広告タグを囲む形で実装するため基本的には問題ありませんが、念のため規約を確認してください。
ReinaASPの規約に否認条件や禁止事項が書かれているので、隈なくチェックしておくことが重要です。
規約違反が発覚すると、報酬の没収やアカウント停止につながる可能性があるため注意が必要です。
長すぎる文言は控える
ボタンのテキストは簡潔にまとめての記載が適しているでしょう。
長い文言を入れるとボタンが大きくなりすぎて、デザインのバランスが崩れてしまいます。
また、スマートフォンでは画面幅が狭いため、長いテキストが複数行になって見づらくなる可能性もあります。
長すぎるSWELLボタン
簡潔に書いたボタン
Reina右の方がスッキリしていて見やすいですね！
ユーザーの行動を促す明確な言葉を選びましょう。
長い説明が必要な場合は、後述するマイクロコピー機能を活用するのがおすすめです。
SWELL ボタンのカスタマイズ【応用編】
Reina最後にSWELLボタンの応用活用をお伝えします！
基本的な使い方をマスターしたら、さらに高度なカスタマイズにチャレンジしましょう。
- マイクロコピーで誘導文を書く
- アフィリエイトリンクタグにアイコンを挿入する
- ボタンに影を付ける
次で詳しく説明します。
マイクロコピーで誘導文を書く
マイクロコピーとは、ボタンの上に表示される補足テキストのことです。
マイクロコピー誘導文の挿入は、SWELLボタンを挿入したのち、クリックして一番左のSWELLボタンの「パターン」をクリックすることで挿入可能です。
これにより、ボタンをクリックするメリットや行動を後押しする情報を追加できます。
効果的なマイクロコピーの例は以下の通りです。
マイクロコピーの活用例
- 「今なら初回限定○○%オフ！」
- 「無料で資料請求できます！」
- 「会員登録は不要！」 など
クリック率を向上させたい場合は、期限や特典を明示するとよいでしょう。
不安を取り除く情報を添えることも効果的です。
アフィリエイトリンクタグにアイコンを挿入する
Reinaアフィリエイトリンクを入れたらアイコンは挿入できないんじゃなかったでしたっけ？
原則としてアフィリエイトの広告タグには標準機能でアイコンを挿入できませんが、工夫次第で実装可能です。
広告コード内に直接アイコンのショートコードを追加することで、アイコン付きボタンとして表示できます。
ただし、この方法を使用する際は、必ず各ASPの規約を確認してください。
広告コードの改変に該当する可能性があるため、規約に違反しない範囲で実施する必要があります。
実装手順は以下の通りです。
- SWELLのアイコンショートコードを確認
- 広告タグ内の適切な位置にショートコードを挿入
- ASP規約に抵触しないか最終チェック
これにより、アフィリエイトリンクでもアイコンの挿入が可能です。
こちらがSWELLで使えるアイコンのショートコード一覧になっていますので、ぜひチェックしてみてください。
ボタンに影を付ける
Reina今のボタンに影を付けたいなぁ…でもSWELL設定では出来ないし、どうしよう。
ボタンに影を追加することで、立体感を演出し、クリック可能であることを視覚的に強調できます。
SWELLの追加CSSを使用して設定します。影の濃さや距離を調整することで、浮き上がったような効果を生み出せます。
影を設定する追加CSSは、以下の通りになります。
.is-style-btn_shiny a{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}私は主にSWELLのスタイル「キラッと」を使用しているため、指定CSSは「is-style-btn-shiny」となっています。
このCSSを使うと、このような影のついたSWELLボタンが出来上がります。
Reina影を付けることで、より立体的になりましたね！
しかし影を付けすぎると逆に見づらくなるため、サイト全体のデザインとのバランスを考えながら調整しましょう。
まとめ：SWELLボタンを活用しよう！
今回はSWELLボタンの設定や使い方から、カスタマイズ方法まで紹介しました。
SWELLのボタンブロックは、クリック可能なボタンを簡単に設置できる専用機能です。
WordPress標準ボタンと比べて設定項目が豊富で、色や形、サイズを自由にカスタマイズが可能。
アフィリエイトリンクの設置が簡単で、クリック計測機能も搭載されており、効果測定も可能です。
マイクロコピーや影の追加などの応用テクニックを活用すれば、さらに魅力的なボタンが作成できるでしょう。
ぜひSWELLでブログ運営している方は、活用してみてくださいね。
