>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

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

簡単!CocoonでAPI利用のAmazonリンクをカスタマイズ Cocoon・カスタマイズ
この記事は約3分で読めます。

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

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

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

 

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

元のサンプル
Cocoon:Amazonリンク

※画像です

 

カスタマイズサンプル
Cocoon:Amazonリンク

※画像です

変更している部分

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

 

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

 

コメント

タイトルとURLをコピーしました