簡単！CocoonでAPI利用のAmazonリンクをカスタマイズ

Cocoonではアフィリエイトのリンクが簡単に挿入できるよう標準装備されています。

リンクの使い方は以下をご覧ください。

簡単！CocoonでAPI利用のAmazonリンクを貼る方法

Cocoonではアフィリエイトのリンクが簡単に挿入できるよう標準装備されています。Amazonの場合は、Amazon.co.jp Product Advertising APIから商品情報を取得して、商品リンクを簡単に作成出来ます。Amaz...

ayaito.net

カスタマイズサンプルからコピペ

※画像です

※画像です

変更している部分

• 枠サイズ
• 枠の色
• 枠の角を丸める
• 右下ロゴの色
• 各ボタンの色
• ホバー時の色

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」に変更。