フジブロっ!

HTML、CSSを独学で楽しく学ぶガテン系のブログ

【アフィリエイトリンクボタンの作り方】8個のボタンサンプル付き

どうも!フジグチです!

先日、ただのテキストリンクより目立つボタンタイプのリンクに出来ないか?と妻に頼まれリンクボタンを作成しました。

そのボタンを使用した記事がこちら▽

その時に「ボタンにリンクの貼り付け方が分からない」と言われ設定したのですが、他にもお困りの方が多そうなので、【今回はアフィリエイトのリンクボタンの作り方】を図解で解説していきたいと思います。

ただのテキストでのリンクより装飾がされたボタンのほうが押したくなりますよね?

簡単なボタンサンプルも用意してみたので、よければお使いください。

アフィリエイトリンクボタンの作り方

リンクボタンのCSS

まず下記のCSSをコピーしてデザインCSSに入れてください。

別のサイトのボタンCSSを使う場合はリンクボタンの作成の仕方にお進みください。

CSSを貼り付ける場所

【PC】
スパナマーク ⇒ デザインCSS ⇒ 枠内に貼り付け

【スマホ】
記事 ⇒ 記事上に<style>~</style>で囲んで入れる

.link-btn {
    text-decoration: none;
    color: #fff!important;
    font-weight: bold;
    display: inline-block;
    padding: 10px 15px;
    border-radius: 60px;
    box-shadow: 0px 8px 10px -6px rgba(0,0,0,.3);
    transition: .2s;
}
.link-btn:hover {
    box-shadow: none;
    transform: translateY(2px);
    opacity: .8;
}
/***ボタン中央寄せ用***/
.center {
    text-align: center;
    margin: 1.5em 0;
}
/***ボタン背景色***/
.ao {
    background: #6b6be2;
}
.midori {
    background: #6be292;
}
.pink {
    background: pink;
}
.kuro {
   background: #3c3c3c;
}
.g-ao {
    background: linear-gradient(45deg, #007adf, #00ecbc);
}
.g-midori {
    background: linear-gradient(45deg, #9ae25b, #00c1e3);
}
.g-pink {
    background-image: linear-gradient(45deg, #ff6e87, #fcc951);
}
.g-kuro {
    background: linear-gradient(0deg,#000, #b1b1b1);
}

※背景色の部分はお使いになりたい色を選んで、その部分のCSSだけをコピーしても構いません。

ボタンサンプル

class名 ao

class名 midori

class名 pink

class名 kuro

class名 g-ao

class名 g-midori

class名 g-pink

class名 g-kuro

CSSを入れたら次の工程に進みます。

今回はA8.netを使ってリンクの作成方法を解説していきます。

広告リンクの取得

まず、紹介したい商品を選択し「広告リンク」をクリックする。

リンクボタンの作成の仕方解説画像1

 

広告タイプを「テキスト」にし、「広告リンクを表示」をクリックする。

リンクボタンの作成の仕方解説画像2

 

素材をコピーする。

リンクボタンの作成の仕方解説画像3

リンクの取得は以上です。

広告リンクの貼り付け方

おすすめは新規で記事を作成するやり方です。

記事途中にリンクを貼り付けると、作業中にどの部分をいじっているか分からなくなるのを避けるためです。

新規で記事を作成しHTML編集に切り替えます。

そこに取得してきたリンクを貼り付けます。

リンクボタンの作成の仕方解説画像4

<img>タグはアフィリエイトには必要な可能性がありますので、むやみに消さないほうが良いかもしれません。

こちらの記事を参考にしてください▽

A8などアフィリエイトリンクに付いてくる1px画像はあなたの収益を守る大切なもの | みるめも

 

<a href="~のaとhrefの間にclass="link-btn 使いたいボタン色のclass名"を入れます。(ボタンサンプルclass名のグレーの部分です)

classの前には必ず半角スペースを入れてください。
link-btnと使いたいボタン色のclass名の間にも必ず半角スペースを入れてください。

コピペ用にこちらに記述しておくので、ボタンのclass名の部分だけ使いたいボタンサンプルのグレーのclass名に書き変えてお使いください。

class="link-btn ボタンのclass名"

リンクボタンの作成の仕方解説画像5

するとこのように表示されます。(アメコミ観ませんか?)

アメコミ映画を観るなら<U-NEXT>

 

また、link-btn pinkの部分をaomidoriなどと書き換えると、そのクラス名に対応した色に変更することが出来ます。(マーベル映画おもしろいですよ)

例:link-btn ao

アメコミ映画を観るなら<U-NEXT>

ボタンを中央寄せにしたい場合

ボタンを中央寄せにしたい場合は取得してきた広告リンクを<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名を入れれば、反映することが出来ると思います。

クリック率が上がれば成約率も上がると思うので、ぜひ実践してみてください。

最後までお読み頂きありがとうございました。

トップへ戻る