独自カートで差別化！Yahoo!ストアのカート周りをCSSでデザインする方法。

今回はヤフーストアのお買物カゴのデザインです。
デフォルトの商品ページでもスマートなデザインで、必要最低限な見栄えは備えていますが、
「このエリアもカスタマイズすることができるんだよ！」
という他店と差別化できる点としてご紹介できれば幸いです！

1. カートエリアの各要素を確認する。

まずは、ヤフーショッピングのデフォルトのカートを確認してみましょう。

そもそもシンプルに、ごてごてとしたデザインは一切施されていない仕様となっていますね。
ですが表示されている各要素のほとんどにクラスやIDが振られています。
それらをフックにCSSを適用することができるのです。

今回は以下の画像の要素にそれぞれデザインを施してみましょう。

2. CSSで要素にデザインを適用する。

ではでは先ほど画像で番号を振り分けた各要素のセレクタ名をご紹介してゆきます。

①商品画像表示エリア

p.elMainImage {}

②商品画像切り替え用エリア

ul.elThumbnail li a {}

③商品キャッチコピーエリア

p.lead strong {}

④商品名エリア

.mdItemInfoTitle h2 {}

⑤レビューを投稿するボタン

div#itmrvw .elNoReview a {}

⑥価格項目

p.ftPrice2:before {}

⑦購買時の付与ポイント説明

li.elPointWrap {}

⑧その他のポイントキャンペーン

li.elRegistration + li.elAppAd {}

⑨送料説明エリア

li.elShipWrap {}

⑩お買物カゴボタン

a.elCartButton {}

⑪お気に入り追加ボタン

div.mdItemInfoFavoriteButton a {}

⑫お問い合わせボタン

div.mdItemInfoInquiryButton a {}

というわけでビャビャッ！とご紹介しました。
これ以外にもクラスやIDの振られている要素もありますし、
さらに細かく分けられている要素もあります。

それぞれ運営する店舗で何を見せなければいけないのか、強調しなければいけないのかを考えながら、最適な答えを見つけてゆきたいですね！

3. 実際に商品ページに反映してみる。

ということで先ほどの各項目にCSSを適用し、デザインを反映してみましょう。
先ほどの要素すべてにデザインを施すので少しごちゃごちゃしていますが、
こんなこともできるんだよ、という程度にご覧ください（笑”

以下のCSSを適用しています。

/*お買物カゴ  商品画像*/
p.elMainImage, ul.elThumbnail li a {
 -webkit-transition:all 0.5s ease-out;
 -moz-transition:all 0.5s ease-out;
 -ms-transition:all 0.5s ease-out;
 transition:all 0.5s ease-out;
 overflow:hidden;
}

p.elMainImage:hover {border-radius:150px; width:280px; height:280px; border:10px solid #ccc;}
ul.elThumbnail li a:hover {border:2px solid #ccc; border-radius:22px;}

/*お買物カゴ  商品キャッチコピー*/
p.lead strong {
 background:linear-gradient(transparent 40%, #74cacf 60%);
}

/*お買物カゴ  商品名*/
.mdItemInfoTitle h2 {
 background:linear-gradient(transparent 40%, #74cacf 60%);
}

/*お買物カゴ  レビュー部分*/
div#itmrvw .elNoReview a {
 display:block;
 text-indent:-9999px;
 padding:0 !important;
 background:url(../img/btn_review.png) no-repeat !important;
 width:650px;
 height:140px;
 border:none !important;
}

/*お買物カゴ  価格表記*/
p.ftPrice2:before {
 content:"当店限定 " !important;
 font-size:10px;
}

/*お買物カゴ  ポイント説明*/
li.elPointWrap {
 padding-top:65px !important;
 background:url(../img/btn_point01.png) no-repeat !important;
 border:none !important;
}

/*お買物カゴ  ポイントキャンペーン*/
li.elRegistration + li.elAppAd {
 padding-top:65px !important;
 background:url(../img/btn_point02.png) no-repeat !important;
 border:none !important;
}

/*お買物カゴ  送料*/
li.elShipWrap {
 padding-top:65px !important;
 background:url(../img/btn_deli.png) no-repeat !important;
 border:none !important;
}

/*お買物カゴ  買い物かごボタン*/
a.elCartButton {
 width: 650px;
 height: 70px;
 text-indent: -9999px;
 background: url(../img/btn_cart.png) no-repeat !important;
 box-shadow: none !important;
}

/*お買物カゴ  お気に入り追加ボタン*/
div.mdItemInfoFavoriteButton a {
 width: 650px !important;
 height: 65px;
 padding:0 !important;
 text-indent: -9999px;
 background: url(../img/btn_fav.png) no-repeat !important;
 border:none !important;
}

/*お買物カゴ  お問い合わせボタン*/
div.mdItemInfoInquiryButton a {
 width: 650px !important;
 height: 45px;
 padding:0 !important;
 text-indent: -9999px;
 background: url(../img/btn_inq.png) no-repeat !important;
 border:none !important;
}

a.elCartButton:hover, div.mdItemInfoInquiryButton a:hover, div.mdItemInfoFavoriteButton a:hover {
 opacity:0.8;
}

するとこのような形のページになるという寸法です！
~~カートエリアにデザインを加えた商品ページ~~

最後に。

いかがでしたでしょうか。
今回はカートエリアの要素をCSSでデザインする方法をご紹介しました。
カート周りの要素については、ヤフーから自動的に出力されるもので、
ここにデザインを施そう！と思いいたる店舗はなかなか少ないのではないでしょうか？
簡単に差別化できる点で、店舗の独自性を高めてゆきたいですね！

拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。
ララバイ！！

デフォルト表示をデザイン！Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。

ショップ運営でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。

ショップ運営のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

ぜぇれさん外部デザイナーTwitter:@zeelesan: 兵庫在住WEBデザイナー。楽天／ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧