便利なCocoonの商品リンクですが、スマホで見た時の全体のバランスを調整したいと感じていました。可能な限りサイトに馴染ませたいので、全体の雰囲気にとけ込む様なデザインに近づけていきたいと思っています。
カスタマイズした内容
- 商品画像を大きくしたい
- テキストを左寄せにしたい
- リンクボタンを横1列に並べたい
完成イメージ
商品リンクのカスタマイズ
スマホで見た際にもう少し商品画像を大きくしたいなと思っていたのですが、実際に大きくしてみると画像が粗くなりました。それが理由で今のサイズがデフォルトになっているのかなと思います。
でも殆どクリックされず購入にも至らないので、考え過ぎずにとりあえず自分のやりたい様にやってみます。
商品画像を大きくする
商品画像と説明文を左右ではなく上下に配置しました。配置というよりは画像サムネイルの幅を100%にしたから説明文が下に追いやられた感じです。
.product-item-thumb {
width: 100%;
}フォントサイズを小さく
商品画像をより際立たせる為に周囲のフォントサイズを小さくして、ついでに文字の配置を左寄せにしました。
.product-item-title {
text-align: left;
font-size: 85%;
}ボタンを横1列に並べる
どうしてもYahoo!ショッピングだけが下段にあって浮いてる感があったので、ボタンを横1列に配置しました。
.product-item-buttons>* {
width: 32%;
}
.product-item-buttons>*>a {
position: relative;
}Yahooショッピングのサイズを小さく
Yahooだけ名前が長いのでバランスが良くありません。色々試した結果フォントサイズを小さくしたら上手く収まりました。
.shoplinkyahoo a {
font-size: .7em;
}スマホのみ適用
以上の設定はスマホ閲覧時のみ適用しています。PCの場合はデフォルトの配置のままです。
CSSコードまとめ
@media screen and (max-width: 768px){
.product-item-thumb {
width: 100%;
}
.product-item-title {
text-align: left;
font-size: 85%;
}
.product-item-buttons>* {
width: 32%;
}
.product-item-buttons>*>a {
position: relative;
}
.shoplinkyahoo a {
font-size: .7em;
}
}その他のカスタマイズコード
その後、少しずつ微調整を加えたので追加したコード等も載せておきます。あくまでも参考用ですので、コピペはなさらぬ様ご注意ください。
/*商品リンク調整*/
.product-item-title-link{
text-decoration:none;
color:#123455;
}
.product-item-maker{
font-size:83%;
}
/*リンクボタンの色*/
.shoplinkamazon a {
background: #f6b340;
transition: .4s;
}
.shoplinkrakuten a {
background: #e85e5e;
transition: .4s;
}
.shoplinkyahoo a {
background: #62bedc;
transition: .4s;
}
/*アイコン追加*/
.product-item-buttons>*>a:before {
font-size: 20px;
position: absolute
opacity: .2;
}
.shoplinkamazon a:before {
content: "\f270";
font-family: "fontawesome";
left: 5%;
}
.shoplinkrakuten a:before {
content: "\f25d";
font-family: "fontawesome";
left: 5%;
}
.shoplinkyahoo a:before {
content: "\f07a";
font-family: "fontawesome";
left: 5%;
}
Comment