商品リンクのボタンをブランドカラーにしたアクセント強めのスマホ向けカスタマイズ【Cocoon】

以前もCocoonの商品リンクをカスタマイズしましたが、何度も微調整を加えてコードが乱雑になってきたので整理も兼ねてリニューアルしました。

スマホでの見え方しか考えていないので、スマホ用として参考にしてください。

完成イメージ

商品リンクはサイトに馴染ませるのがベストと思っていましたが、逆に「商品リンクです！」というデザインにしてみました。

【高級 ギフト 365日出荷！ 】海鮮お茶漬けセット 金目鯛、うなぎ、まぐろ、鮭、いわし、磯海苔 送料無料 誕生日プレゼント あす楽 お歳暮 御歳暮 2024 出産内祝い お返し 結婚 母 父 男性 女性 彼氏 彼女 お祝い お礼 グルメ ありがとう 早割 実用的 プチギフト 詰め合わせ

巣鴨のお茶屋さん 山年園

Amazonで探す

楽天で探す

Yahoo!(shop)

※スマホの画面サイズによってはYahoo!ショッピングのアイコンがショップ名に被る場合があります

カスタマイズコード

リンクボタンの色をAmazonや楽天のブランドカラーにしたり、背景色や枠線もカスタマイズしてみました。

商品画像とテキストの位置・サイズ

商品画像は中央に表示。商品説明文は左寄せにしてフォントカラーをブラックにしてサイズを小さくしました。

/*商品リンク*/
.product-item-thumb {
  width: 100%;
}
.product-item-title {
  text-align: left;
  font-size: 80%;
}
.product-item-title a {
  color: #000;
  text-decoration: none;
}

Amazon

.shoplinkamazon a {
  color: #ff9900;
  background: #333e48;
  position: relative;
  min-width: 185px;
  line-height:2em;
  font-size: 12px;
}
.shoplinkamazon a:before {
  content: "\f270";
  font-family: "fontawesome";
  left: 30px;
  position: absolute;
}

Amazonのシックなブランドカラーを適用。

Rakuten

.shoplinkrakuten a {
  color: #fff;
  background: #85010f;
  position: relative;
  min-width: 185px;
  line-height:2em;
  font-size: 12px;
}
.shoplinkrakuten a:before {
  content: "\f25d";
  font-family: "fontawesome";
  left: 30px;
  position: absolute;

野球関連サイトで楽天のカラー情報が載っていたので、その色コードを参考に適用しました。

Yahoo shopping

.shoplinkyahoo a {
  color: #fff;
  background: #fd7e00;
  position: relative;
  min-width:185px;
  line-height:2em;
  font-size: 12px;
}
.shoplinkyahoo a:before {
  content: "\f07a";
  font-family: "fontawesome";
  left: 30px;
  position: absolute;
  opacity:0.3;
}

背景色と枠線

.product-item-box {
  border: 2px double #ddd;
  box-shadow: 1px rgba(0,0,0,.29);
  margin: auto;
  background: #ffe;
}