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

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

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

(例)こんなやつです↓

f:id:DwarfRabbit:20200221182900g:plain

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

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

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

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

f:id:DwarfRabbit:20200221210425j:plain

記述内容
- CSSの記述内容
- HTMLの記述
プレビュー
- ボタン化するときの注意点
おすすめのASPサイト
- もしもアフェリエイト
- バリューコマース

記述内容

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;
}

CSS(プレビューのやつ)

/*ボタンの設定*/
.af_button {
background-color: #13B2AA; /* ボタン背景色 */
color: #fff; /* ボタン文字色 */
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
font-weight: bold;
border-radius: 4px;
max-width: 80%;
margin: 0.5em auto;
padding: 0;
text-align: center;
line-height: 1.4;
transition: all .2s ease;
}

.af_button:hover {
opacity: 0.8;
}

.af_button a {
text-decoration: none !important;
color: #fff !important;
display: block;
margin: 0;
padding: 0.5em;
position: relative;
overflow: hidden;
}

.af_button a::before {
display: block;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: scale(0) translateY(-50%) translateX(-50%);
transform-origin: left top;
border-radius: 50%;
content: '';
width: 10em;
height: 10em;
background-color: rgba(255, 255, 255, 50%);
opacity: 0;
animation: plzTap 3s ease-out 0s infinite;
}

@keyframes plzTap {
from { transform: scale(0) translateY(-50%) translateX(-50%); opacity: 1; }
15%, 100% { transform: scale(1) translateY(-50%) translateX(-50%); opacity: 0; }
}

.af_button > img { float: left; }
.af_button ::after{ content: ''; clear: left; }

.af_button a::after{
content: '\f054'; /* 矢印の種類 */
font-family: FontAwesome;
font-weight: normal;
position: absolute;
right: 1em;
}