はじめに
アフィリエイトで商品を紹介する際のリンクカードデザインとして
ツールでは カエレバ、プラグインでは 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 |
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;
}
上記のコードをお好きなように改編してご利用下さい。
枠線に影をつける例
| 画像 | 説明文など Amazonで探す 楽天で探す Yahooで探す |
上記コードの「.table_amazon」内に以下の１行を追記。
box-shadow: 0px 3px 5px 0px #333; /*枠線の影*/
カラーの変更
ボタンの色や、文字の色、枠線の色などを変更する場合は、以下も参考にして下さい。
マカロンビビッドパステル伝統色和色セーフ色名 赤桃青紫黄橙緑茶黒 配色パターンサンプル
もしもアフィリエイトについて
もしもアフィリエイトの「かんたんリンク」を利用した際の、デザインカスタマイズは以下をご覧ください。
※これは画像です。
コピペで！もしもアフィリエイトのかんたんリンクをカスタマイズ５パターン
はじめに もしもアフィリエイトの便利な機能「かんたんリンク」のボタンや枠線などのデザインをカスタマイズする方法です。 コピペのみで簡単に使っていただけるコードを置いています。 デフォルト表示 文字リンクホバー時（アンダーラインが出ます） 商...