CSSだけで簡単デザイン！楽天カテゴリーの商品一覧をデザインする方法。

投稿日 2015年7月24日 byぜぇれさん 445 shares

カテゴリーページに表示される商品の一覧、普段何気なく見ているこのリストですが、
実はデザインを施せる領域がいろいろあるんです！
ここにデザインを入れてる店舗はなかなかすくない、そんな中で差別化を図っちゃいましょう！
楽天デフォルトの商品一覧

というわけで商品一覧を少しのCSSでちょっときれいに見せる方法をご紹介します。

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!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。

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

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

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

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

06-6271-7761

ABOUT ME

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