『AFFINGER5でボタンをカスタマイズしたい』
『AFFINGER5でコンバージョンを高めるマイクロコピーを作りたい』
本記事でAFFINGER5(アフィンガー)で使えるボタンの種類やカスタマイズ方法。さらにクリック率を高めるマイクロコピーの作り方を紹介します。


AFFINGER5(アフィンガー)のボタンのデザインを把握しよう!
アフィンガーのボタンって実はたくさんの種類があり、それがメリットでもデメリットでもあります。
このテンプレートを3年くらい使っていますが未だにすべての機能は把握しきれていません。
アフィンガーでボタンの設置方法は簡単!
【タグ】>【カスタムボタン】のところから選択するだけでボタンを作ることができます。
でも上の画像のとおりボタンの種類ってたくさんあるのでまずはどんなボタンのデザインがあるのか把握していきましょう。
アフィンガーで使えるボタンの種類には大きく分けて
- ノーマル
- 丸角
- ミニ
- MCボタン
- ボックスメニュー
- ボタンA
- ボタンB
があります。
これをそれぞれカスタマイズできるのでボタンの種類という面ではNO1なのではないでしょうか?

ボタン『ノーマル』のデザイン
まずはボタンのノーマルのデザイン。
【カスタムボタン】>【ノーマル】>【基本】でこの超シンプルなボタンが設置できます。

この基本ボタンはあまり使われるのはみたことないのであまり使わないと思います。
【詳しくはコチラ(オレンジ)】などのすると以下のようなボタンになります。
【人気ランキング】の場合
このようにノーマルのボタンでもいろいろなデザインがあります。
アフィンガーのボタン『丸角』
次はアフィンガーのボタンの『丸角』というデザイン。
【カスタムボタン】>【丸角】>【基本】を選んだ場合のデザイン
【カスタムボタン】>【丸角】>【オレンジ】を選んだ場合のデザイン

ボタンのデザイン『ミニ』
次はカスタムボタンの『ミニ』のデザイン

『ミニ』ってボタンはこんな感じの表示になります。
ボタン自体のサイズが小さいので個別の『評判系』の記事に流す時に使うといいでしょう。
カスタムボタン『MC』
次に紹介するのは『MC』というボタンの種類です。
アフィリエイトで商品を売るときによく使われるのがMC(マイクロコピー)
これがMC(マイクロコピー)付のボタンです。
文字のところを今すぐクリックしたくなる文言に変更することでクリック率を高めることができます。
使いまくるとうざいですが『ここぞ』という時に使うと効果を発揮します。

ボタンAとBはシンプルなボタン
マイクロコピーなどを使わずただのボタンを設置したい場合はボタンAやボタンBを使うとこんなボタンができあがります。
【ボタンAの場合】
めちゃくちゃシンプルなだたのボタン
【ボタンBの場合】

ちょっと休憩したらボタンのカスタマイズ方法を解説しますよ!
AFFINGER5(アフィンガー)のリンクの挿入からカスタマイズ方法
ここまではざっくりとアフィンガーのボタンの種類について解説しました。ここからはアフィンガーのボタンへリンクの挿入方法から簡単なカスタマイズ方法を紹介していきます。

アフィンガーのボタンにリンクを挿入する方法
ボタンにアフィリンクなどのURLを挿入しないことにはボタンの意味がありません。最低限覚えて欲しいボタンへのリンクの挿入方法をお話していきます。
カスタムのノーマルのカラーオレンジを例に解説します。
【カスタムボタン】>【ノーマル】>【詳しくはコチラ(オレンジ)】を選択してみてください。
HTMLコードが上記のようになっているので
#の部分があるので#を削除してリンクをいれるとボタンから挿入したリンク先にとばすことが可能になります。
言葉では解説しにくいのでいろいろいじって欲しいのですが大体このへんに対応しています。
試しに文字色を黒くしてみます。
文字のカラーはデフォルトでは#fff(ホワイト)になっていますがここを#e53935(濃赤)に変えてみます。
ちなみにHTMLカラーの補助機能として【タグ】>【ショートコード補助】>【HTMLカラーコード】からいくつかのカラーコードを使うことができます。
ここでは例としてリンクテキストの色を変えてみます。
対応した場所、ここではテキストの色がカスタマイズできました。
こんなふうに色やフォントサイズをカスタマイズしたい時はちょっとめんどうですがコードを変更する必要があります。


基本的に最初からあるデザインで十分なので特にこだわりがなければ細かくカスタマイズする必要はないと思いますが必要なら参考にしてみてください。
また自分でカスタマイズしたボタンは『ステ子』に登録して呼び出すようにしておくとよいでしょう。