どうも!フジグチです!
先日、ただのテキストリンクより目立つボタンタイプのリンクに出来ないか?と妻に頼まれリンクボタンを作成しました。
そのボタンを使用した記事がこちら▽
その時に「ボタンにリンクの貼り付け方が分からない」と言われ設定したのですが、他にもお困りの方が多そうなので、【今回はアフィリエイトのリンクボタンの作り方】を図解で解説していきたいと思います。
ただのテキストでのリンクより装飾がされたボタンのほうが押したくなりますよね?
簡単なボタンサンプルも用意してみたので、よければお使いください。
リンクボタンのCSS
まず下記のCSSをコピーしてデザインCSSに入れてください。
別のサイトのボタンCSSを使う場合はリンクボタンの作成の仕方にお進みください。
【PC】
スパナマーク ⇒ デザインCSS ⇒ 枠内に貼り付け
【スマホ】
記事 ⇒ 記事上に<style>~</style>で囲んで入れる
※背景色の部分はお使いになりたい色を選んで、その部分のCSSだけをコピーしても構いません。
ボタンサンプル
class名 ao
ボタンサンプル
class名 midori
ボタンサンプル
class名 pink
ボタンサンプル
class名 kuro
ボタンサンプル
class名 g-ao
ボタンサンプル
class名 g-midori
ボタンサンプル
class名 g-pink
ボタンサンプル
class名 g-kuro
ボタンサンプル
CSSを入れたら次の工程に進みます。
リンクボタンの作成の仕方
今回はA8.netを使ってリンクの作成方法を解説していきます。
広告リンクの取得
まず、紹介したい商品を選択し「広告リンク」をクリックする。
広告タイプを「テキスト」にし、「広告リンクを表示」をクリックする。
素材をコピーする。
リンクの取得は以上です。
広告リンクの貼り付け方
おすすめは新規で記事を作成するやり方です。
記事途中にリンクを貼り付けると、作業中にどの部分をいじっているか分からなくなるのを避けるためです。
新規で記事を作成しHTML編集に切り替えます。
そこに取得してきたリンクを貼り付けます。
<img>タグはアフィリエイトには必要な可能性がありますので、むやみに消さないほうが良いかもしれません。
こちらの記事を参考にしてください▽
A8などアフィリエイトリンクに付いてくる1px画像はあなたの収益を守る大切なもの | みるめも
<a href="~のaとhrefの間にclass="link-btn 使いたいボタン色のclass名"を入れます。(ボタンサンプルclass名のグレーの部分です)
classの前には必ず半角スペースを入れてください。
link-btnと使いたいボタン色のclass名の間にも必ず半角スペースを入れてください。
コピペ用にこちらに記述しておくので、ボタンのclass名の部分だけ使いたいボタンサンプルのグレーのclass名に書き変えてお使いください。
class="link-btn ボタンのclass名"
するとこのように表示されます。(アメコミ観ませんか?)
また、link-btn pink
の部分をao
やmidori
などと書き換えると、そのクラス名に対応した色に変更することが出来ます。(マーベル映画おもしろいですよ)
例:link-btn ao
ボタンを中央寄せにしたい場合
ボタンを中央寄せにしたい場合は取得してきた広告リンクを<div class="center"></div>
で囲うと中央に寄せることが出来ます。(一度観たらやめられない!)
※一度作成したリンクは見たまま編集上でもコピーして移動することが可能になりますが、<img>タグが消えることがあるのでご注意ください。
手順おさらい
一連をおさらいすると
1.新規記事を作成し<div>タグを書く。(中央寄せにしない場合省略可)
<div class="center"></div>
2.その間に広告リンクを貼り付ける。
<div class="center"><a href="~"></div>
3.a hrefの間に使いたいclass名を入れる。
<div class="center"><a class="使いたいclass名" href="~"></div>
以上となります。
まとめ
ちなみにボタンはボックス内にも設置することが可能なので、こちらの記事もご覧下さい▽
また、別サイトのボタンサンプルを使う場合も基本は<a>タグの中のa hrefの間にclass名を入れれば、反映することが出来ると思います。
クリック率が上がれば成約率も上がると思うので、ぜひ実践してみてください。
最後までお読み頂きありがとうございました。