WordPressの商品リンクをブランドカラーにしてスマホ向けにカスタマイズ

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

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

スポンサーリンク

完成イメージ

スマホの画面サイズによっては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;
}

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

Comment

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