うさぎ日和

今より少しだけ新しいことに興味がわく雑記ブログです!

【はてなブログ】簡単にアフェリエイトリンクをボタン化する方法

ブログで何か商品を紹介したり、サービスをおすすめしたいと考えたら、ほとんどの人がアフェリエイトリンクを使用すると思います。

その時によく「登録はこちらから」「○○で今すぐ探してみる」などのおしゃれなボタンを目にしますよね?

 

こんなやつです↓

f:id:DwarfRabbit:20200221182900g:plain

自分もこんな感じにしたいと思ってもちょっとハードル高そうですよね…

 

しかし、実は超簡単に作成が可能なのを皆さんはご存じでしょうか?

 

今回はアフェリエイトリンクをもっとおしゃれに見やすくするボタン設定についてご紹介していこうとお思います!


アフェリエイトのCTRにも関係してくるので必見です。

f:id:DwarfRabbit:20200221210425j:plain

記述内容

CSSの記述内容

CSS

/*ボタンの設定*/
.af_button a{
display: inline-block;
padding: 0.5em 2em;
text-decoration: none;
color: #ff7f50;/*文字の色*/
border: solid 2px #ff7f50;/*枠の色*/
border-radius: 25px;
transition: .4s;
font-weight: bold;
}
/*ボタンに触れたときの色の設定*/
.af_button a:hover{
background:#ff7f50;
color: white;
}

/*テキストを中央に寄せる*/
.af_button{
text-align:center;
}

HTMLの記述

cssの記述が完了したら、実際に自分が記事を作成するときにHTML側で表示させたい広告のソースの初めと終わりに<div class="af_button"></div>で囲ってあげるだけで設定完了です。


アフェリエイトの広告ソースに一切触れることはないので注意してください。

f:id:DwarfRabbit:20200221183448j:plain

はてなブログで記述する場合

プレビュー

 

実際に動くと今表示されている様になります。

ボタン化するときの注意点

注意として、二つの確認ポイントがあります。

注意点
  • ボタン設定するときは広告種別はテキストで行う
  • ボタン設定時に任意の文言を使用したいのであればテキスト広告の自由テキストで行う

アフェリエイトで広告を使用するときに、基本的にテキスト広告は初めから文言が決められています。

そのため、ボタン設定時に任意の文言に内容を変更すると規約違反になるなってしまう可能性があります。

 

文言を変更したいときは、初めから広告側の自由テキストが可能な広告があるのでそちらを使用するようにすることをおすすめします。

使用するASPサイトによっては自由広告の取り扱いが少ない場所もあるので、様々なASPサイトに登録しておくと便利なのでおすすめす!

おすすめのASPサイト

もしもアフェリエイト

もしもアフェリエイトはサイトそのものも見やすく、アフェリエイト初心者にもやさしい「簡単リンク」というものがあります。

誰でも簡単にしたの画像のようなものを作成できるため、本当に便利です!

f:id:DwarfRabbit:20200221205735j:plain

実際に使用した時のプレビューです。

 

そして、定期的に自分のブログの記事に適した案件を教えてくれる「自動マッチング機能」があるため、自分のブログの新たな発見やネタ探しにもなるので とてもおすすめです!

バリューコマース

バリューコマースは案件そのものは、ほかのASPサイトと比べて多いとは言えないかもしれませんが、他には扱ってない企業のアフェリエイトを取り扱って いたりするので、とても重宝する登録必須なASPだと思います。

 

見つからなかった、広告が意外にもバリューコマースで見つかるなんてこともよくあるのでおすすめです。

 

是非参考にしてみてください!