アフィンガー5のボタンのカスタマイズ!マイクロコピーで魅力的なリンクにする方法とは…?

『AFFINGER5でボタンをカスタマイズしたい』

『AFFINGER5でコンバージョンを高めるマイクロコピーを作りたい』

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

アフィンガーってカスタマイズ性は高すぎ出来すぎくんなんだけどさ!ちょっとデザイン多すぎ組んだよね
しばいぬくん
しばいぬくん
ごりたす
ごりたす
ほんそれ!とりまできるだけわかるように解説していくよ!

AFFINGER5(アフィンガー)のボタンのデザインを把握しよう!

アフィンガーのボタンって実はたくさんの種類があり、それがメリットでもデメリットでもあります。

このテンプレートを3年くらい使っていますが未だにすべての機能は把握しきれていません。

アフィンガーでボタンの設置方法は簡単!

AFFINGER5(アフィンガー)のボタン

【タグ】>【カスタムボタン】のところから選択するだけでボタンを作ることができます。

でも上の画像のとおりボタンの種類ってたくさんあるのでまずはどんなボタンのデザインがあるのか把握していきましょう。

アフィンガーで使えるボタンの種類には大きく分けて

  • ノーマル
  • 丸角
  • ミニ
  • MCボタン
  • ボックスメニュー
  • ボタンA
  • ボタンB

があります。

これをそれぞれカスタマイズできるのでボタンの種類という面ではNO1なのではないでしょうか?

ごりたす
ごりたす
たくさんありすぎて使いこなせんわ!

ボタン『ノーマル』のデザイン

まずはボタンのノーマルのデザイン。

ボタン

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

アフィンガーのボタンの基本

ごりたす
ごりたす
これは今までに一度も使ったことないな…

この基本ボタンはあまり使われるのはみたことないのであまり使わないと思います。

【詳しくはコチラ(オレンジ)】などのすると以下のようなボタンになります。

詳しくはコチラ

【人気ランキング】の場合

人気ランキング

このようにノーマルのボタンでもいろいろなデザインがあります。

アフィンガーのボタン『丸角』

次はアフィンガーのボタンの『丸角』というデザイン。

アフィンガーボタンの丸角

【カスタムボタン】>【丸角】>【基本】を選んだ場合のデザイン

角丸ボタン

【カスタムボタン】>【丸角】>【オレンジ】を選んだ場合のデザイン

角丸ボタン

ごりたす
ごりたす
ボタンの文字はもちろん自由にかえることができるよ!

ボタンを押しても何もないよ

ボタンのデザイン『ミニ』

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

ごりたす
ごりたす
そろそろめんどくさくなってきたからサクッといくよ

詳しくはコチラ

『ミニ』ってボタンはこんな感じの表示になります。

ボタン自体のサイズが小さいので個別の『評判系』の記事に流す時に使うといいでしょう。

カスタムボタン『MC』

次に紹介するのは『MC』というボタンの種類です。

アフィリエイトで商品を売るときによく使われるのがMC(マイクロコピー)

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

これがMC(マイクロコピー)付のボタンです。

文字のところを今すぐクリックしたくなる文言に変更することでクリック率を高めることができます。

使いまくるとうざいですが『ここぞ』という時に使うと効果を発揮します。

ごりたす
ごりたす
マイクろコピーの文字おを『今だけ無料』とか『無料登録はコチラ』などに変えてクリック率をみてみよう

ボタンAとBはシンプルなボタン

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

【ボタンAの場合】

めちゃくちゃシンプルなだたのボタン

【ボタンBの場合】

ごりたす
ごりたす
ボタンの種類はここまで!ちょっと休憩!

ちょっと休憩したらボタンのカスタマイズ方法を解説しますよ!

AFFINGER5(アフィンガー)のリンクの挿入からカスタマイズ方法

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

ごりたす
ごりたす
休憩も終わったし一気に片付けるよ!

アフィンガーのボタンにリンクを挿入する方法

ボタンにアフィリンクなどのURLを挿入しないことにはボタンの意味がありません。最低限覚えて欲しいボタンへのリンクの挿入方法をお話していきます。

カスタムのノーマルのカラーオレンジを例に解説します。

【カスタムボタン】>【ノーマル】>【詳しくはコチラ(オレンジ)】を選択してみてください。

HTMLコードが上記のようになっているので

#の部分があるので#を削除してリンクをいれるとボタンから挿入したリンク先にとばすことが可能になります。

 

言葉では解説しにくいのでいろいろいじって欲しいのですが大体このへんに対応しています。

 

試しに文字色を黒くしてみます。

文字のカラーはデフォルトでは#fff(ホワイト)になっていますがここを#e53935(濃赤)に変えてみます。

 

ちなみにHTMLカラーの補助機能として【タグ】>【ショートコード補助】>【HTMLカラーコード】からいくつかのカラーコードを使うことができます。

ここでは例としてリンクテキストの色を変えてみます。

詳しくはコチラ

対応した場所、ここではテキストの色がカスタマイズできました。

こんなふうに色やフォントサイズをカスタマイズしたい時はちょっとめんどうですがコードを変更する必要があります。

ボタンの細かいカスタムはむずかしいな!
しばいぬくん
しばいぬくん
ごりたす
ごりたす
デフォルトであるボタンを使うだけで十分だと思うよ

基本的に最初からあるデザインで十分なので特にこだわりがなければ細かくカスタマイズする必要はないと思いますが必要なら参考にしてみてください。

また自分でカスタマイズしたボタンは『ステ子』に登録して呼び出すようにしておくとよいでしょう。

 

Copyright© しんどいアフィリエイト , 2020 All Rights Reserved Powered by AFFINGER5.