アッフィーこんな悩みを解決できる記事をご用意しました！
私はブログを始めて3年。
これまでに100本以上の渾身の記事を書き上げてきました。
その結果、累計で6桁の収益を獲得することができました。
結論から言うと、SWELLボタンは「基本設定＋少しのCSS」だけで、初心者でも簡単におしゃれでクリックされやすいボタンを作ることができます。
SWELLは高機能なテーマですが、
「どこまでカスタマイズできるのか分からない」
「CSSは難しそう…」
と感じている方も多いはずです。
しかし、SWELLのボタン機能は非常に優秀で、
- 色や形の変更（基本設定）
- アイコンの追加
- アフィリエイトリンクの設置
- クリック率の計測
といったことが、専門知識なしで簡単に行えます。
さらに、CSSを少し使うだけで、
- 好きな色のボタンを作る
- ホバーで拡大するアニメーション
- ふわっと動くボタン
といった“クリックされやすい工夫”も実現できます。
この記事では、
まで、画像付きで分かりやすく解説します。
この記事を読めば、SWELLボタンを自由にカスタマイズできるだけでなく、クリック率アップにもつながるボタン設計ができるようになりますよ。
SWELLボタンとは？
SWELLボタンとは、記事内の好きな場所に設置できる、SWELL専用のボタンブロックです。
WordPress標準のボタンよりもカスタマイズ性が高く、初心者でも簡単におしゃれなボタンを作成できます。
さらに、アフィリエイトやクリック計測にも対応しているため、収益化にも直結する機能です。
SWELLボタンには、主に以下のような特徴があります。
それぞれ詳しく解説していきますね。
ボタンデザインが豊富
SWELLのボタンには、初心者でも簡単に使える5つの基本デザインが用意されています。
- ノーマル
- 立体
- キラッと
- アウトライン
- MOREボタン
また、色やサイズ、角の丸みなども簡単に調整できるので、
- 「ボタンを青にしたい」
- 「角を丸くして柔らかい印象にしたい」
といったカスタマイズも、専門知識なしで実現可能です。
👉 初心者でも“プロっぽいデザイン”をすぐに作れるのが大きな魅力です。
アイコンが設定できる
SWELLボタンでは、ボタンのテキストにアイコンを追加できます。
矢印やハート、SWELL専用アイコンなど、豊富な種類から選択可能です。
例えば、
- 「商品を見る」→ カートアイコン
- 「詳しく読む」→ 本のアイコン
といったように、ボタンの目的に合わせて直感的に使い分けられます。
また、アイコンはテキストの左右どちらにも配置できるため、デザインのバランスも自由に調整できます。
👉 視認性が上がることで、クリック率アップにもつながります。
アフィリエイトリンクが設置できる
SWELLボタンは、アフィリエイトとの相性が非常に良いのも特徴です。
ASP（A8.netやバリューコマースなど）で取得したリンクを、そのままボタンに貼り付けるだけで簡単に設置できます。
通常のWordPressではHTMLの知識が必要な場合もありますが、SWELLならその必要はありません。
また、長いURLやコードもおしゃれなボタンとして表示されるため、記事の見た目を崩さずに設置できます。
👉 初心者でも簡単に収益導線を作れるのが大きなメリットです。
クリック率が計測できる
SWELLボタンには、クリック数を計測できる機能も備わっています。
- ボタンが何回クリックされたか
- 記事を見た人のうち何人がクリックしたか
といったデータを確認できるため、効果的なボタン配置の改善に役立ちます。
例えば、
- 「この位置だとクリックされにくい」
- 「もっと上に置いた方が良いかも」
といった分析が可能になります。
設定も簡単で、「クリック数を計測する」をONにするだけです。
👉 データを見ながら改善できるので、アフィリエイト初心者にも最適です。
SWELLボタンの使い方【3ステップで簡単】
SWELLボタンは、初心者でも簡単に設置できます。
ここでは、最短3ステップでボタンを作る方法を解説します。
ボタンブロックを追加する
投稿画面右上の「+」マークをクリックします。
SWELLブロックの中の「SWELLボタン」をクリックしてください。
これだけでボタンブロックが追加されます。
テキストを入力しリンクを設定する
次にボタンにテキストを入力しリンク先を設定します。
今回は、SWELLの購入ページへジャンプするボタンを設置することとし、「SWELLを購入する」と入力しました。
次に、SWELL公式サイトのURLを入れていきましょう。
「リンク先：未設定」をクリックします。
URLの入力欄が表示されるので、①SWELLのホームページのURL「https://swell-theme.com/」を入力し、②右側の矢印マークをクリックします。
デザインを調整する
最後に、ボタンの見た目を整えましょう。
右側のサイドバーから、以下の設定が可能です。
- ボタンデザイン（ノーマル・立体など）
- サイズ（小・標準・大・カスタム）
- 色（事前に設定したカラー）
アッフィー「立体＋標準サイズ」がおすすめです。
SWELLボタンのデザイン設定（初期設定）
ボタンの色や形は、あらかじめ設定しておくと便利です。
設定するため、SWELLボタンの設定画面を開きます。
WordPressのダッシュボードメニューから「SWELL設定」⇒「エディター設定」をクリックしましょう。
エディター設定画面になるので「ボタン」をクリックします。
ボタンカラーを設定する
SWELLボタンの設定では、3種類のカラーパターンを自由に設定できます。
カラーピッカーで直感的に色を選んだり、お気に入りの色のカラーコードを入力したりできます。
グラデーション機能もあり、チェックを入れると2色使いのおしゃれなボタンが作れます。
👉 デフォルトカラーにこだわらず、サイトのテーマカラーに合わせておくのがおすすめです。
ボタンの丸みを調整する
ボタンの形は以下の3種類から選べます。
- 丸みなし
- 少し丸める
- 丸める
この設定は、ノーマル・立体・キラっと・アウトラインそれぞれに反映されます。
アッフィー柔らかい印象にしたい場合は「丸める」がおすすめです。
カラーパターンと丸みの調整が完了したら、「変更を保存」をクリックして設定を保存しましょう！
SWELLボタンのカスタマイズ方法
SWELLボタンは、色・サイズ・デザイン・アイコンなどを自由にカスタマイズできます。
ここでは、初心者でも簡単にできる基本的なカスタマイズ方法を解説します。
サイドバーを表示させるため、右上の設定ボタンをクリックします。
ボタンのデザインを選ぶ
まずは、ボタンのデザインを選びましょう。
SWELLでは、以下の5種類のデザインが用意されています。
- ノーマル
- 立体
- キラッと
- アウトライン
- MOREボタン
アッフィー迷った場合は「立体」がおすすめです。
クリック率が上がりやすい傾向がありますよ。
サイズと色を変更する
ボタンのサイズと色はサイドバーから簡単に変更できます。
「ボタンサイズ設定」で、小、標準、大、カスタムからサイズを選びます。
小、標準、大を選んだ場合の大きさは以下の通りです。
「カスタム」を選ぶとパーセンテージの入力欄が表示されるので、パーセンテージを入れて自分の好みの大きさに変更しましょう。
実際の大きさは以下の通りになります。参考にしてくださいね。
ボタンのサイズを決めたら、ボタンの色を決めましょう。
選択できるのは、事前に「ボタンカラーを設定する」（初期設定）で設定した色です。
ボタンのカラー設定の下には、「ボタンの計測設定」があります。
「クリック率を計測する」をONにすると、以下の数値を自動で計測してくれますよ！
- ボタン設置後のPV数
- ボタンの表示回数
- ボタンのクリック数
- のボタンまで読まれた割合
- 表示回数に対するクリック率
ボタンにアイコンを追加する
ボタンにはアイコンを追加することもできます。
■ 設定手順
- アイコンの位置をテキストの左右どちらに追加するか選択します
- 「検索」から好きなアイコンを選択します
「検索」をクリックすると、たくさんのアイコンが選べるようになります。
SWELLマークを左側に設置し、アイコンのサイズを1.5emにすると下図のようになりました。
ボタンのクリック率を計測する
SWELLボタンには、クリック率を計測する機能もあります。
「クリック率を計測する」をONにすると、以下のデータが確認できます。
- 表示回数
- クリック数
- クリック率
- 読了率
アッフィー改善ポイントが見えるので、必ずONにしておきましょう。
アフィリエイトリンクを設置する
アフィリエイトリンクの設置も驚くほど簡単です。
■ 設置する手順
- ASPでリンクコードを取得
- 「広告タグを直接入力」欄に貼り付け
これだけで、おしゃれなボタンとして表示されます。
通常のWordPressボタンでは難しいアフィリエイトリンクも、SWELLならデザインを崩さずに設置できます。
アッフィー収益化するなら必須の設定です。
SWELLボタンのカスタマイズ方法【CSS編】
CSSを使うと、SWELLボタンをさらに自由にカスタマイズできます。
「デフォルトの色だけでは物足りない…」
「もっと目立つボタンにしたい」
そんな方に向けて、初心者でも簡単にできるカスタマイズ方法を解説します。
👉本章でできること
色を自由に変更する（CSSカスタマイズ）
SWELLのボタンは、通常「設定した3色」から選びます。
ですがCSSを使えば、好きな色を自由に設定することが可能です。
ここでは、オレンジ色のボタンを作る方法を紹介します。
SWELLボタンを選択し、右側のサイドバーを開きます。
「高度な設定」→「追加CSSクラス」に以下を入力してください。
👉 btn-orange
追加CSSクラスの部分を拡大すると次の通りです。
アッフィークラスを追加したら保存することを忘れないようにしましょう！
WordPressのダッシュボードに戻り「外観」⇒「カスタマイズ」をクリックします。
表示された画面で「追加CSS」をクリックします。
すると、左側に「カスタマイズ中 追加CSS」欄が表示されるので以下のコードを貼り付けます。
.btn-orange{
--the-btn-color: orange;
}入力後、「公開」をクリックしましょう。
CSSは投稿画面には反映されません。
投稿画面に戻り、右上の「プレビュー」から新しいタブで確認しましょう。
プレビュー画面を確認するためには、右上のデスクトップマークをクリックして表示される「新しいタブでプレビュー」をクリックします。
プレビューで確認すると以下のようになります。
👉ワンポイント
カラーコード（#ff6600など）を使えば、さらに細かい色調整も可能ですよ。
ホバーアニメーションをつける（クリック率UP）
ボタンにホバー（マウスを乗せたとき）の動きをつけると、クリック率が上がりやすくなります。
ここでは、少しだけ拡大する自然なアニメーションを設定します。
対象のボタンを選択し、「高度な設定」を開きます。
「追加CSSクラス」に以下を入力してください。
👉 btn-hover
追加CSSクラスの部分を拡大すると次の通りです。
アッフィークラスを追加したら保存することを忘れないようにしましょう！
WordPressのダッシュボードに戻り「外観」⇒「カスタマイズ」をクリックします。
表示された画面で「追加CSS」をクリックします。
「追加CSS」の入力欄が開いたら、以下のコードをそのまま貼り付けてください。
.btn-hover{
transition: transform 0.3s ease;
}
.btn-hover:hover{
transform: scale(1.05);
}入力できたら、「公開」をクリックして保存しましょう。
CSSを追加したら、投稿画面に戻ってプレビューで確認しておきましょう。
実際にボタンにマウスを乗せると、ふわっと少し拡大する動きが確認できます。
■ このCSSでできること
今回のCSSでは、以下のような動きが設定されています。
transform: scale(1.05);
→ ボタンを1.05倍に少しだけ拡大するtransition: transform 0.3s ease;
→ 拡大するときの動きを0.3秒でなめらかにする
派手すぎない自然な動きなので、記事の雰囲気を壊さずに使いやすいのが特徴です。
👉 ワンポイント
強すぎない動きにすることで、「押せそうなボタン」に見せることができます。
ふわっと動くボタンを作る
ボタンに動きを付けると、さらに注目を集めることができます。
ここでは、上下にゆっくり動く「ふわふわアニメーション」を設定します。
まず、SWELLボタンのサイドバーの「高度な設定」を開き、「追加CSSクラス」に好きな名前（クラスといいます）を入力します。
今回は、btn-updownと入力します。
以下で、追加CSSクラスの部分を拡大しました。
アッフィークラスを追加したら保存することを忘れないようにしましょう！
WordPressのダッシュボードに戻り「外観」⇒「カスタマイズ」をクリックします。
すると、左側に「カスタマイズ中 追加CSS」欄が表示されます。
「カスタマイズ中 追加CSS」欄へ以下のCSSをコピペして、「公開」をクリックしてください。
/* ふわふわ動くボタン*/
.btn-updown {
animation-name:btn-updown; /* 動きの名前 */
animation-delay:0s; /* 動きの開始時間 */
animation-duration: 2.5s; /* 動きの動作時間 */
animation-timing-function: ease-in-out; /* 動き（徐々に早く）*/
animation-iteration-count: infinite;
}
@keyframes btn-updown {
0% { transform: translateY(0); }
50% { transform: translateY(10px); }
100% { transform: translateY(0); }/* 上下の動き */
}
}
👉 ワンポイント
CTAボタンなど「目立たせたい場所」に使うと効果的です。
ボタン（CSS） ✖️ ブログパーツのすすめ
CSSで作成したボタンは、「ブログパーツ」に登録しておくのがおすすめです。
👉 毎回設定しなくても、すぐに使い回せるからです。
アッフィークラス名を設定したSWELLボタンを「ブログパーツ」に登録すれば、いつでも呼び出せますよ！
SWELLボタンのクリック率を上げる5つの使い方
SWELLボタンは、設置するだけでなく「どこに・どう使うか」でクリック率が大きく変わります。
ここでは、初心者の方でもすぐに実践できる5つの「クリックされやすいボタンの使い方」を解説します。
記事の最後に設置する（最も効果が高い）
最もクリックされやすいのが、記事の最後に設置するボタンです。
記事を最後まで読んだ読者は、すでに内容に納得している状態のため、次の行動（クリック）に移りやすくなっています。
例えば👇
- 商品レビュー記事 → 購入ボタン
- 解説記事 → 関連記事へのリンク
👉 ポイント
「読み終わった直後」に行動を促すのがコツです。
記事の途中に自然に設置する
ボタンは記事の途中にも設置すると効果的です。
特に、読者が「気になる」と思ったタイミングでボタンを置くと、クリックされやすくなります。
■ 設置のコツ
- 商品を紹介した直後
- メリットを説明した後
- 比較した後
👉 ポイント
“納得した瞬間”にボタンを置くとクリック率が上がります。
ボタンの色を使い分ける
ボタンの色によって、読者に与える印象は大きく変わります。
■ おすすめの使い分け
- メインCTA → 目立つ色（オレンジ・赤）
- サブリンク → 落ち着いた色（青・グレー）
👉 ポイント
すべて同じ色にすると埋もれるので、役割ごとに色を変えるのがコツです。
動きをつけて視線を集める
CSSでボタンに動きをつけると、自然と視線を集めることができます。
例えば👇
- ホバーで少し拡大
- ふわっと上下に動く
👉 ポイント
目立たせたいボタンにだけ使うのがコツです。
テキストを具体的にする
ボタンの文言もクリック率に大きく影響します。
👉 ポイント
「クリック後に何が得られるか」を明確にすると効果的です。
■ まとめ：SWELLボタンは“使い方”で成果が変わる
SWELLボタンは、ただ設置するだけでなく使い方が重要です。
- 記事の最後に設置する
- 記事の途中に自然に入れる
- ボタンの色や動きを工夫する
- テキストを具体的にする
これらを意識するだけで、クリック率は大きく変わります。
まとめ：SWELLボタンを使ってサイトをおしゃれにしよう！
この記事では、SWELLボタンの基本的な使い方からカスタマイズまで、詳しく解説してきました。
SWELLボタンには、以下のような便利な機能があります。
- 5種類のボタンデザイン
- 自由に設定できるカラー
- 豊富なアイコン機能
- アフィリエイトリンクの簡単設置
- クリック率の計測機能
初心者の方でも、簡単な設定だけでおしゃれなボタンが作れます。
さらに、CSSを活用することで、
- 好きな色のボタンを作る
- ホバー時のアニメーションを追加する
- ふわっと動くボタンを作る
といった、より高度なカスタマイズも可能です。
また、ボタンは「どこに・どう設置するか」によってクリック率が大きく変わります。
- 記事の最後に設置する
- 記事の途中に自然に配置する
- 色や動きを使い分ける
といった工夫をすることで、読者の行動を促しやすくなります。
SWELLボタンを活用すれば、サイトの見た目が整うだけでなく、回遊率や収益にも大きく影響します。
本ブログでは、WordPressテーマ「SWELL」を使用しています。
高機能で使いやすいテーマを探している方は、ぜひチェックしてみてください。
▶ SWELLの導入方法はこちら👇
今回は以上です。
最後までお読みいただきありがとうございました。
コメント
コメント一覧 （1件）
[…] SWELLボタン タブ キャプションボックス ステップ ふきだし FAQ リスト […]