
カテゴリーページに表示される商品の一覧、普段何気なく見ているこのリストですが、
実はデザインを施せる領域がいろいろあるんです!
ここにデザインを入れてる店舗はなかなかすくない、そんな中で差別化を図っちゃいましょう!
楽天デフォルトの商品一覧
というわけで商品一覧を少しのCSSでちょっときれいに見せる方法をご紹介します。
こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです。
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです。
手足口病にかかりました、こんなの大人はならないと思ってたのに。
両手足に水泡がめっちゃできて歩くだけで痛い。
さてさて今回もカテゴリーページ。味気ない商品一覧のリストを綺麗に見せましょう!
以下3パターンのデザインサンプルをもとにご説明してゆきます。
※一言
これから説明する内容は各カテゴリーページに直接記入する方法でも実装できますが、
全ページに共通して適用させる場合は楽天GOLD(無料)と契約している必要があります。
それではやってみましょう。
1. フォント指定と:before要素を使用したシンプルなデザイン
まずはサンプルをご覧ください!
楽天商品リストデザインサンプル1
簡単なCSSを適用するだけで対応できます。
以下のCSSを適用させましょう!
html,body { font-family: Century Gothic, Arial; /* フォント指定 */ } span.category_itemtaxpostage {font-size:10px;} /* 送料・税込の非表示 */ span.category_itemprice {color:#bf0000;font-size:24px;font-weight:bold; display:block;} /* 価格 */ table{z-index:0;} span.category_itemprice:before{content:"PRICE ";font-size:10px;}
すると先ほどお見せしたサンプルと同じデザインが実装できたのではないでしょうか?
簡単シンプルできれい!
2. 背景画像を用いた豊かな表現
サンプル、見て、どうぞ。
楽天商品リストデザインサンプル2
特にむつかしいことはありません、簡単なCSSと既存の技術の組み合わせだけです。
今回は使用する画像として二つ用意しております。
画像素材1画像素材2
そして以下のCSSを適用させませう。
html,body { font-family: Century Gothic, Arial; /* フォント指定 */ } /* 商品名部分 */ a.category_itemnamelink { display: block; background-image:url(http://www.rakuten.ne.jp/gold/float/img/base/item_list_bg_01.png); background-position:left top; padding: 30px 10px 10px; text-align: left; font-size: 10px !important; font-weight: bold; color: #fff !important; margin-top: -25px; } /* 価格部分 */ span.category_itemprice { display: block; background-image:url(http://www.rakuten.ne.jp/gold/float/img/base/item_list_bg_02.png); background-repeat:no-repeat; background-position:center top; padding: 40px 0 0; font-size: 22px; font-weight: bold; color: #c00; margin-top: -15px; } span.category_itemtaxpostage {font-size:10px;} /* 送料・税込の非表示 */ table{z-index:0;}
するとこうなります。
楽天商品リストデザインサンプル2
こういうデザインアプローチもありますよという意味で載せていますが、
背景画像を使用するとなかなかデザインセンスが問われますね、むつかしい。
3. アニメーションを適用した楽天っぽくないデザインサンプル
そーれサンプルサンプルゥ!!
楽天商品リストデザインサンプル3
素材として1枚画像を用意しています。
素材画像3
以下のCSSを適用させるのです。
html,body { font-family: Century Gothic, Arial; } /* アニメーション定義 */ * { -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; } /* 商品画像部分 */ a img:hover { opacity:0.4; } /* 商品名部分 */ a.category_itemnamelink { position:relative; z-index:9997 !important; display: block; background-image:url(http://www.rakuten.ne.jp/gold/float/img/base/item_list_bg_03.png); background-position:center top; background-repeat:no-repeat; padding: 38px 5px 5px; line-height: 16px; font-size: 10px !important; font-weight: bold; color: #fff !important; margin-top: -25px; } a.category_itemnamelink:hover { color:#666 !important; line-height: 19px; padding:5px; background-position: center -50px; } /* 価格部分 */ span.category_itemprice { position:relative; z-index:9998 !important; color:#bf0000; font-size:24px; font-weight:bold; display:block; margin-top:-70px; margin-bottom:6px; text-align:center; } a.category_itemnamelink:hover + br + span.category_itemprice { margin-top:-25px; } /* 送料・税込部分 */ span.category_itemtaxpostage { font-size:10px; }
するとこうなります。
楽天商品リストデザインサンプル3
なかなかこのページにアニメーションを駆使してデザインを施している店舗は少ないのではないでしょうか?
最後に
いかがでしたでしょうか。
楽天により自動的に生成される部分であっても、
アニメーションなどを駆使して店舗独自の形を作っていくのはとても楽しいですよ。
簡単ディテールアップ!CSSで楽天カテゴリページをデザインする方法。
ショップ運営でお悩みの方へ。
ネット通販やウェブ制作、ECサポート事業を行っている(株)ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。
ショップ運営のお悩み、ご相談ください。
ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。
または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00(土日祝休み)
06-6271-7761
ABOUT ME
- 外部デザイナーTwitter:@zeelesan
- 兵庫在住WEBデザイナー。楽天/ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧
Recent Posts
2016.04.18ECたったの1行!ヤフーでもお買物カゴを外部化!複数のカゴボタンを設置する方法。
2016.04.13EC楽天お買物カゴを外部化!複数のカゴボタンを設置する方法。
2016.02.04EC独自カートで差別化!Yahoo!ストアのカート周りをCSSでデザインする方法。
2016.01.14ECデフォルト表示をデザイン!Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。
新着記事を配信しています
FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね!」や「フォロー」をお願いします。
はじめまして。早速CSSを使用させていただいたのですが、どうも楽天のキャッチコピーと商品名の量が多くて、サンプルのようにスッキリと収まらないのです。ITEM NAMEボタンの下に本来出ているはずの文字数分の空白が出来てしまいます。この文字数をCSSで少なく表示させる方法は御座いますか?
kkenさん、こんにちは。
コメントありがとうございます。
どのパターンを実装してどのようなページになっているのかURLを教えていただけますでしょうか?
ご返答お待ちしてます!
はじめまして。とても参考になります。
わたくしもCSS(3. アニメーションを適用した楽天っぽくないデザインサンプル)を使用させていただいたところ、長い商品名のせいでITEM NAMEボタンと価格の間に大きな空白ができてしまいます。
なにか対策があればご教授いただければと思います。
なおきちさん、こんにちは。
コメントありがとうございます。
なるほどあのパターンは商品名が長いと表示が崩れてしまいますか。
どのような状態か確認できるURLをお見せいただけますか?
一度見てみないと何が悪さをしているのかが把握できませんのでお願いしたいです。
ぜぇれさん
ありがとうございます。
http://item.rakuten.co.jp/hanna-reform/c/0000000446/
このページになります。
よろしくお願いいたします。
透過した文字が重なっているのか、税込 送料込の部分が消えているところがあり、マウスオーバーすると解消されます。その点も検証いただけると助かります。
なおきちさん、どうもです!
CSSに以下の修正を加えてみてくれませんか?
数値の変更
a.category_itemnamelink {
margin-top: -20px;
line-height: 0px;
}
span.category_itemprice {
margin-top: -40px;
}
追記
span.category_itemtaxpostage {
margin-top: -5px;
display: block;
}
ぜえれさん
ありがとうございます!!!!!!!
すごいです!!きれいにおさまりました!!!
本当にありがとうございます!
今後も参考させていただきます!
よろしくお願いいたします。
なおきちさん。
お役に立てて光栄です。
店舗の運営頑張ってくださいねっ!
すごい恰好良いレイアウトばかりですね!!
まだまだ、PCサイトも集客あるので、フル装備したいです。
上記コメントも参考にさせていただきました。
早速、チャレンジしてみます。
こんにちは。
こちらのカテゴリページのCSSの適用についてお聞きしたいのですが、全ページに共通して適用させる場合はどこに記述すればよろしいでしょうか?GOLDを使ってどのようにカテゴリページにCSSを適用するか分かりません。
何卒よろしくお願い致します。
SAGAさん
コメントありがとうございます、ぜひチャレンジしてみてください!
YUMAさんこんにちは。
コメントありがとうございます。
GOLDで作成したCSSを、RMS上のデザイン設定のエリアに読み込むと全ページに適用可能ですよ。
試してみてください!
こんにちは、何度も楽しく読ませてもらっています。
カテゴリーページの一覧画像サイズも大きくしたいのですが
できますか??
たけっちさんこんにちは。
コメントありがとうございます!
多分できないんですよね…
楽天は以下のようなURLで、カテゴリーページの一覧画像を生成しています。
http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-1500-1/1225-1.jpg?_ex=128×128
ですので表示されている画像は128px×128pxにレンダリング済みなのです。
この画像をCSSで大きくすることは可能なのですが、
そうすると画像が荒れてしまうのです。
#risFil a img {}
↑
確認はしていませんが、
このCSSで幅と高さを指定すれば一応は大きくすることも出来ると思います。
興味がありましたら一度お試しください!
こんにちは、カテゴリーページと商品ページの見栄えを整えたくて参考にさせていただいてます。
カテゴリーページの商品の商品名の幅を整えたいのですが、どこのスタイルを修正しているのでしょうか。
http://item.rakuten.co.jp/msb-bann/c/0000000233/
なぜか、右の列だけ幅が大きくなってしいます。
しんごさんこんにちは。
お返事が遅くなりすみません!
今見させていただきましたが解消されていますか?
同じような状況が発生している店舗様は多く、
おそらく商品名の文字数によって発生している問題かと思います。
ありがとうございます。
商品名の文字数が問題だと現状仕方ありませんね。