Cocoonではアフィリエイトのリンクが簡単に挿入できるよう標準装備されています。
リンクの使い方は以下をご覧ください。
簡単！CocoonでAPI利用のAmazonリンクを貼る方法
Cocoonではアフィリエイトのリンクが簡単に挿入できるよう標準装備されています。 Amazonの場合は、Amazon.co.jp Product Advertising APIから商品情報を取得して、商品リンクを簡単に作成出来ます。 Am...
カスタマイズサンプルからコピペ
元のサンプル
※画像です
カスタマイズサンプル
※画像です
変更している部分
- 枠サイズ
- 枠の色
- 枠の角を丸める
- 右下ロゴの色
- 各ボタンの色
- ホバー時の色
CSS
/*Amazonのボックス用コード*/.amazon-item-box {
width: 85%;
border: solid 2px #333333;
border-radius: 8px;
}
/*Amazonのアイコンの色*/.amazon-item-box::after {color: #f6b340;}
/*ボタン*/.shoplinkamazon,.shoplinkrakuten,.shoplinkyahoo {
transition: .4s;
}
/*Amazonボタン*/.shoplinkamazon a {background: #ff9900;}
.shoplinkamazon a:hover {
background: rgb(255, 153, 0, 0.7);
}
/*楽天ボタン*/.shoplinkrakuten a {background: #bf0000;}
.shoplinkrakuten a:hover {
background: rgb(191, 0, 0, 0.7);
}
/*Yahoo！ボタン*/.shoplinkyahoo a {background: #410093;}
.shoplinkyahoo a:hover {
background: rgb(65, 0, 147, 0.7);
}
その他の箇所とクラス名
アマゾンリンクのその他部分をカスタマイズする際のクラス名一覧です。
楽天、Yahoo！などのショートコードで作った場合は、以下の「amazon」となっている部分を変更する事で同様に利用可能。
同じように全体は「amazon」部分を「product」に変更。
| クラス名 | |
|---|---|
| ボックス全体 | .product-item-box |
| Amazonボックス | .amazon-item-box |
| 商品タイトル | .product-item-title |
| 商品画像部分 | .amazon-item-thumb-image |
| メーカー名 | .amazon-item-maker |
| 価格 | .product-item-price |
| 日付 | .acquired-date |
| 商品説明 | .product-item-description |
| レビュー・口コミ | .amazon-item-review |
| Amazonボタン | .shoplinkamazon |
| 楽天ボタン | .shoplinkrakuten |
| Yahoo！ボタン | .shoplinkyahoo |