WING(アフィンガー5)で自分好みのボタンにカスタマイズする方法

どうも。カエルブロガーのケロ蔵です。

ブログを運営しているのであればアフィリエイトをやっている人も多いと思いますが、ボタンを使ってアフィリエイトリンクを設置したいと思っている人もいるのではないでしょうか？

WINGではボタンの設置はプラグインや外部サイトを利用することなく、簡単に表示させることができるので便利なんですよね。

おまけにボタンは比較的クリックされやすいのでアフィリエイトで収益を増やすのであれば必須とも言えるくらい重要なパーツです。

アイナ

ボタンが全てではないけれど、無いよりはあった方が成約されやすいみたいですね。

WINGはボタンを簡単に設置できるだけでなく形や色、他にも光らせることも出来るので、目立たせることもできて、ブログのデザインに一役買っています。

そこで今回はWINGを使い始めた方に向けてWINGのボタンを簡単にカスタマイズする方法について紹介していこうと思います。

ピョン太

ただボタンを設置するだけでなく、自分好みのボタンにカスタマイズするのもいいかもな。

あまり凝りすぎて記事の中身が適当だと意味がないからね。

ケロ蔵

WINGのボタンはデザインだけでなく訪問者のクリックを誘う効果がある！？

まずブログにボタンを設置する意味ですが、ボタンはバナーやテキストよりもクリックがされやすいです。

今までテキストやバナーを使っていたけれど、ボタンリンクに切り替えてクリック数が増えたという話をよく聞きます。

そこにボタンがあればまずは押してみるという心理ですね。

ケロ蔵

文章だけではイメージが掴みづらいので実際に比べてみましょう。

片方はテキストリンクでもう片方はボタンリンクです。
両方を見比べてみてどちらをクリックしたくなりますか？

詳しくはコチラ

好みの問題もありますが、どちらかといえば右のボタンの方が押されやすいのではないでしょうか。

このようにデザインにこだわるのであればボタンを設置して商品紹介ページへと誘導するのが理想的な使い方です。

WINGでアフィリエイトリンクのボタンを簡単に作る方法とは？

凝ったボタンだとボタンメーカーなどのサイトで作る必要がありますが、シンプルなデザインのボタンであればアフィンガーでも簡単に作ることができるので、よそのサイトでボタン作成をする手間は必要ないんです。

ボタン1つ作るためだけに手間をかけたくないので、WINGで作っちゃいましょう。

本格的なデザインのボタンはWINGではできないから別のサイトで作っちゃったほうがラクかも？

ケロ蔵

WINGではこのようなボタンを1クリックで完成してしまうので、今までボタン1つ作るのに時間をかけることなく作成できますよ。

ボタンをさらにカスタマイズ

ボタン自体は先ほど紹介したように簡単に設置することができますが、ここからさらにカスタマイズしてみたくありませんか？

それでは実際にアフィリエイト用のボタンを作ってみましょう。

アイナ

アフィリエイト用のボタンはちょっと手を加えるだけで設置ができます。

今回はレッドのボタンを下地にしてカスタマイズしていきましょう。

詳しくはコチラ

ボタンのタイトルを変更して背景の色を緑にしてみます。

まずはじめに【タグ】→【カスタムボタン】→【ノーマル】→【詳しくはコチラ(レッド)】を選ぶと以下のショートコードが表示されます。

st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#c62828" ref="on"

初めて見る方はなんのことやらわからないですよね。大丈夫です。
僕も最初は全くわかりませんでしたから。

それぞれのタグの意味は以下の通りになっています。

st-mybutton url="リンク先のURL" title="表示させるボタンのタイトル" rel="" fontawesome="タイトルのアイコン" target="新しくタブを開く（_blank）" color="文字の色" bgcolor="背景色" bgcolor_top="#f44336" bordercolor="枠線の色" borderwidth="枠線の太さ" borderradius="角の丸み" fontsize="文字の大きさ" fontweight="bold" width="ボタンの横幅" fontawesome_after="文字後ろのフォントアイコン" shadow="#c62828" ref="ボタンを光らせる"

今回はボタンの色とテキストの文章を変更します。

商品紹介ページ

いじった箇所はtitleとbgcolorの2箇所だけです。
これだけで誰でも簡単にボタンを完成できるようになっています。

今回はボタンテキストと背景色を変えただけなのですが、他の部分も簡単に変えることだって出来んですよ。

とくに覚えておきたい箇所は赤太字で目立たせています。
他の箇所は徐々に使って覚えていきましょう。

タグの意味を知っておくとボタンのカスタマイズが100倍楽しくなりますので、最後まで見てくれるとうれしいです。

アイナ

ボタン以外にもボックス枠にも同様のカスタマイズが出来るから試してみてね！

自分だけのオリジナルボタンを作ってCTR率を上げてみよう

基本的なボタンを作るのであれば、ここまでで紹介した使い方を読んでおけば誰でもすぐに使いこなすことが出来るようになります。

あまりボタンの作成にこだわりすぎてもクリックされなければ意味がないので、このぐらいのデザインがちょうどいいと個人的には思っています。

あとは記事の中にうまく溶け込むように設置して収益を上げてみましょう。

ボタンに力を入れすぎて、肝心の記事をおろそかにしないよう気をつけましょう。

ケロ蔵