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

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

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

最終的には以下のように、カートエリアにデザインを加えた商品ページが実現できますよ!
カートエリアにデザインを加えた商品ページ

Sponsored Link

こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです

みなさん「ダークソウル」というゲームはご存知でしょうか?
ぜぇれさんそのひな型となる「デモンズソウル」からの大ファンなんですが、
その新作となる「ダークソウルⅢ」が、きたる2016年3月24日に発売となるのですよ!

どこが魅力かというと、その重厚なダークファンタジーの雰囲気。
心を折りに来るゲーム難易度。
ネットワークを介してフィールドに書き込まれる、
虚実を交えたメッセージによる連携
そしてプレイヤーに敵として侵入されることにより生まれる、
一期一会の緊迫感と通常プレイでは得られないゲームデザイン

もうすごい面白いんですよこれ。おすすめです。
ダークソウルの話はいつまでたっても終わらないので話を戻します!

以下三つの手順で、ヤフーのデフォルトお買物カゴをデザインする方法をご紹介していきますよ!

また今回サンプルとして作成している店舗のデザイン設定は以下のようになっています。

※一言
ヤフートリプル(月額3000円~)と契約している必要があります。

それではやってみましょう。

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でスッキリさせる方法。

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

BILLIONPLAN JAPAN Co, Ltd

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

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

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

または、お電話でも承ります。
 10:00 - 19:00(土日祝休み)

06-6271-7761

ABOUT ME

ぜぇれさんデザイナーTwitter:@zeelesan
加古川在住WEBデザイナー。楽天/ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事した後、ビリオンプラン立ち上げに参加。時計・雑貨のFLOAT運営担当。ご相談はこちらより。グランブルーファンタジーやりましょ!! →記事一覧
Sponsored Link

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね!」や「フォロー」をお願いします。

follow us in feedly

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です