コピペで！アフィリエイト商品リンクをツールを使わずCSSのみでデザイン

はじめに
- ツールやプラグインのデメリット
デザインサンプル
- カラーの変更
もしもアフィリエイトについて

はじめに

アフィリエイトで商品を紹介する際のリンクカードデザインとして

ツールでは　カエレバ、プラグインでは　Rinker　など便利なものががあります。

カエレバサンプル

※これは画像です。

Rinkerサンプル

※これは画像です。

ツールやプラグインのデメリット

カエレバは、１商品ごとに（ブラウザで）ツールを使ってリンクを作成し、過去に利用したリンクの保存などが出来ない事で、商品紹介が増えてくると管理が難しい。

Rinkerは、商品リンクは簡単にWordPressの記事編集から挿入できますが、最初の設定が面倒だったり、その後の管理も大変になりがち。

更には、これらのツールの提供が終了してしまった場合は悲惨です。最悪、すべてのリンクをやり直す必要があったり、どんどん進化するWordPressに古くなったプラグインが対応できなくなる可能性もあります。

Amazonにもアフィリエイト用のプラグインがあったのですが、2020年2月に提供が終了してしまいました。

ちなみにRinkerの使い方は以下をご覧ください。

完全解説！商品リンクプラグインRinker(リンカー)が超便利！設定と使い方

-　2019/10　追記　- AmazonPA-APIの利用ポリシー変更（2019年1月23日）、PA-API v5への移行（2019/12～）については、以下にまとめています。商品リンクをCSSのみで利用する方法は以下をご覧ください。 ...

そこで、うちはこういったツールの利用をすべてやめました。

これらのツールを使わずにCSSのみで実現するデザインサンプルです。

デザインサンプル

スケーターステンレスタンブラー 300ml スヌーピー
製品サイズ：7.2 x 7.2 x 13.6 cm、160 g

Amazonで探す　楽天で探す　 Yahooで探す

HTML

コードを表示

<table class="table_amazon">
<tbody>
<tr>
<td style="width: 30%;">画像</td>
<td style="width: 70%;">説明文など
<div><span class="btn_amazon">Amazonで探す</span>　<span class="btn_rakuten">楽天で探す</span>　<span class="btn_yahoo">Yahooで探す</span></div></td>
</tr>
</tbody>
</table>

CSS

コードを表示

/************************/
/*商品リンクテーブル*/
/************************/
.table_amazon {
width:100%;
border-collapse: collapse;
text-align: left;
line-height: 1.8;
border: solid 1px #d9d9d9;
}
.table_amazon td {border: none;font-size: 14px;}
/*Amazon、楽天、Yahooボタン　サイズ固定*/
.btn_amazon,.btn_rakuten,.btn_yahoo,.btn_blue,.btn_blue2 {
display: inline-block;
margin-top:6px;
text-align: center;
font-size: 14px;
line-height: 2;
text-decoration: none;
background: #fff;
border-radius: 8px;
transition: .4s;
}
.btn_amazon,.btn_rakuten,.btn_yahoo {
width:110px;}
/*Amazon*/
.btn_amazon {
background: #ff9900;
color: #fff;
}
.btn_amazon:hover {
border: solid 1px #ff9900;
background: #fff;
color: #ff9900;
}
/*楽天*/
.btn_rakuten {
background: #bf0000;
color: #fff;
}
.btn_rakuten:hover {
border: solid 1px #bf0000;
background: #fff;
color: #bf0000;
}
/*Yahoo*/
.btn_yahoo {
background: #410093;
color: #fff;
}
.btn_yahoo:hover {
border: solid 1px #410093;
background: #fff;
color: #410093;
}

上記のコードをお好きなように改編してご利用下さい。

枠線に影をつける例