Cocoonの商品リンクをスマホ向けにカスタマイズ②【シンプルVer】

かなり前に Cocoon の商品リンクをカスタマイズしましたが、何度も微調整を加えてきたのでコードがぐちゃぐちゃになってきました。『もう全部消して一から作り直すか!』そう思って勢いでコードを削除して(でもバックアップはとっている)見た目もコードもシンプルな商品リンクを作成。

完成イメージ【スマホで見てください】
スポンサーリンク

今回のポイント

スマホでの見え方に特化したコードなのでコピペの際はご注意ください。今回意識したのは以下の3点です。Amazonと楽天はそれぞれのテーマカラーに近い色を使いました。

ポイント

  • 商品画像を中央に表示
  • テキストは小さく
  • ボタンはシンプルに

※追記:スマホの画面サイズによって各ショップのアイコン(Font Awesome)がズレてしまったので、それぞれの「a」のコードに[position: relative;]を追加しました

カスタマイズCSSコード

コードを見直してみると、重複していたり散らばっていたり・・ほとんど整理ができていませんでした。やはり定期的な見直しは大事ですね。

商品画像とテキスト

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

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

Amazon

.shoplinkamazon a {
  color: #faa123;
  background: #fff;
  border: 1px solid #faa123;
  border-radius: 7px;
  position: relative;
}
.shoplinkamazon a:before {
  content: "\f270";
  font-family: "fontawesome";
  left: 10%;
  position: absolute;
}

Rakuten

.shoplinkrakuten a {
  color: #bf0000;
  background: #fff;
  border: 1px solid #bf0000;
  border-radius: 7px;
  position: relative;
}
.shoplinkrakuten a:before {
  content: "\f25d";
  font-family: "fontawesome";
  left: 10%;
  position: absolute;
}

Yahoo shopping

.shoplinkyahoo a {
  color: #00c300;
  background: #fff;
  border: 1px solid #00c300;
  border-radius: 7px;
  position: relative;
}
.shoplinkyahoo a:before {
  content: "\f07a";
  font-family: "fontawesome";
  left:6.5%;
  position: absolute;
}

Comment

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