こんにちは。アカロア@akaroa789です!

SWELLボタンを設置してみたけど、目立ちすぎて逆に違和感があるな…。
この記事では、WordPressテーマ「SWELL」のオリジナルボタンを記事に馴染ませ、自然な感じで表示する方法を解説します!
- SWELLボタンだけでは物足りない
- SWELLボタンをアレンジしたい
結露からいうと、SWELLボタンを装飾するために多くの時間は必要ありません。
次の3ステップでかんたんに、おしゃれなSWELLボタンが作れるのです♪
- 土台となるブロックを挿入
- SWELLボタンを挿入
- 補足テキストを挿入
すると、次のようなSWELLボタンが表示されます。
\ シンプル&高機能のWPテーマ /
※クリックすると公式HPへ飛びます
それでは、詳しく見ていきましょう!
SWELLボタンをおしゃれにする方法
早速、おしゃれなSWELLボタンを作っていきます!
記事作成画面の左上にある「+」よりブロックエディタを開きます。
タブを「パターン」に切り替え、「薄い枠線と背景付きのリスト」を選択します。


すると、SWELLボタンの土台となる部分が挿入されます。
- リスト
- リスト
- リスト
リスト部分は使いませんので削除しておきます。



右上の設定(歯車)からボーダー設定で薄い枠線を選べますが、SWELLボタンを挿入すると枠外に改行されてしまうため、上のような方法をとっています。
ステップ2では、SWELLボタンを「パターン」から選んで挿入します。


STEP1で削除したリスト部分をタップすると「ブロックを追加」とコメントがでますので、もう一度タップします。


タブを「パターン」に切り替え、「マイクロコピーとアイコン付きのボタン」を選択します。
「すべて表示」をタップした後、タブを「パターン」に切り替え「マイクロコピーとアイコン付きのボタン」を挿入します。


続いて、SWELLボタンをタップしてから右上の設定(歯車)をタップします。


「広告タブを直接入力」エリアに、テキスト広告を設定しておいた広告タグを入力します。
ボタン上のマイクロコピーも編集しておきましょう。
SWELLボタンの下に段落を挿入します。
SWELLボタンの下に段落を入れる方法が分からない人のためにおさらいです。
- SWELLブロックの横でタップ
- 左上の「+」をタップ
- 「段落」を選択
SWELLボタン下の段落には任意のコメントを入れ、配置を「中央寄せ」にします。
これでおしゃれなSWELLボタンの完成です!
\ シンプル&高機能のWPテーマ /
※クリックすると公式HPへ飛びます
SWELLボタンの作り方は2通り


便利なSWELLボタンですが、作り方には次の2通りがあります。
広告タグを作っている場合
前述の通り、アフィリエイト用のテキスト広告を設定した広告タグを既に作っている場合は、SWELLボタンに挿入するだけで完了です。
ボタンスタイル・カラーを決め、広告タグを挿入します。
ボタンスタイル
- ノーマル
- 立体
- キラッと
- アウトライン
- MOREボタン
ボタンカラー
- 赤系
- 青系
- 緑系
なお、ボタンカラーはswell設定から変更可能です。
広告リンクを直接入力
SWELLボタンを作るもう一つの方法は、ASPから取得した広告リンクをボタンに直接入力する方法です。



SWELLボタンのクリック率をカウントしたい場合は、右上の設定(歯車)から「計測する」にチェックしておきましょう。
SWELLボタンのアレンジ例
SWELLボタンのアレンジ例をひとつご紹介します。
上に表示したSWELLボタン入りバナーを作る手順は次のとおりです。
- 土台となるブロック(スタイル:方眼)
- バナー広告
- リストスタイル:チェック
- SWELLボタンスタイル:MORE
- マイクロコピー
ポイント
マイクロコピーの「\」はバックスラッシュと入力すると変換候補に出てきます。「/」は同様にスラッシュと入力すると変換候補に出てきます。


まとめ
SWELLボタンをおしゃれにする方法をご紹介してきましたが、アレンジの幅は無限大です。
広告ボタンが目立ちすぎると、売り込む意識が見えすぎて敬遠されてしまいますよね。
記事に馴染む「おしゃれなボタン」でアフィリエイトの効率を高めましょう!


- ムダのないシンプルなテーマ
- 洗練されたお洒落なデザイン
- DEMOページへの着せ替えが便利
- オリジナルブロックが豊富
- パターンデザインが豊富
- 多機能が標準搭載されている
- フォーラムで質問できる
- ユーザー間で横のつながりが強い
- アップデートが多い
- 使っていて楽しい♪
- 導入コストがかかる
- カスタマイズ性は高くない(普通)
\ シンプル&高機能のWPテーマ /
※クリックすると公式HPへ飛びます
今回は以上です。
最後まで読んでいただき、ありがとうございました♪
こちらの記事もおすすめ





