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

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

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

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

Sponsored Link

こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです
手足口病にかかりました、こんなの大人はならないと思ってたのに。
両手足に水泡がめっちゃできて歩くだけで痛い

さてさて今回もカテゴリーページ。味気ない商品一覧のリストを綺麗に見せましょう!
以下3パターンのデザインサンプルをもとにご説明してゆきます。

※一言
これから説明する内容は各カテゴリーページに直接記入する方法でも実装できますが、
全ページに共通して適用させる場合は楽天GOLD(無料)と契約している必要があります。

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

1. フォント指定と:before要素を使用したシンプルなデザイン

CSSだけで簡単デザイン!楽天カテゴリーの商品一覧をデザインする方法。
まずはサンプルをご覧ください!
楽天商品リストデザインサンプル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. 背景画像を用いた豊かな表現

CSSだけで簡単デザイン!楽天カテゴリーの商品一覧をデザインする方法。
サンプル、見て、どうぞ。
楽天商品リストデザインサンプル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. アニメーションを適用した楽天っぽくないデザインサンプル

CSSだけで簡単デザイン!楽天カテゴリーの商品一覧をデザインする方法。
そーれサンプルサンプルゥ!!
楽天商品リストデザインサンプル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で楽天カテゴリページをデザインする方法。

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

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

18 Comments(Trackback)

kken

はじめまして。早速CSSを使用させていただいたのですが、どうも楽天のキャッチコピーと商品名の量が多くて、サンプルのようにスッキリと収まらないのです。ITEM NAMEボタンの下に本来出ているはずの文字数分の空白が出来てしまいます。この文字数をCSSで少なく表示させる方法は御座いますか?

Reply
ぜぇれさん

kkenさん、こんにちは。
コメントありがとうございます。

どのパターンを実装してどのようなページになっているのかURLを教えていただけますでしょうか?
ご返答お待ちしてます!

Reply
なおきち

はじめまして。とても参考になります。
わたくしもCSS(3. アニメーションを適用した楽天っぽくないデザインサンプル)を使用させていただいたところ、長い商品名のせいでITEM NAMEボタンと価格の間に大きな空白ができてしまいます。
なにか対策があればご教授いただければと思います。

Reply
ぜぇれさん

なおきちさん、こんにちは。
コメントありがとうございます。

なるほどあのパターンは商品名が長いと表示が崩れてしまいますか。
どのような状態か確認できるURLをお見せいただけますか?

一度見てみないと何が悪さをしているのかが把握できませんのでお願いしたいです。

Reply
なおきち

透過した文字が重なっているのか、税込 送料込の部分が消えているところがあり、マウスオーバーすると解消されます。その点も検証いただけると助かります。

Reply
ぜぇれさん

なおきちさん、どうもです!

CSSに以下の修正を加えてみてくれませんか?

数値の変更

a.category_itemnamelink {
margin-top: -20px;
line-height: 0px;
}

span.category_itemprice {
margin-top: -40px;
}

追記
span.category_itemtaxpostage {
margin-top: -5px;
display: block;
}

Reply
なおきち

ぜえれさん

ありがとうございます!!!!!!!
すごいです!!きれいにおさまりました!!!
本当にありがとうございます!
今後も参考させていただきます!
よろしくお願いいたします。

Reply
SAGA

すごい恰好良いレイアウトばかりですね!!
まだまだ、PCサイトも集客あるので、フル装備したいです。
上記コメントも参考にさせていただきました。
早速、チャレンジしてみます。

Reply
YUMA

こんにちは。
こちらのカテゴリページのCSSの適用についてお聞きしたいのですが、全ページに共通して適用させる場合はどこに記述すればよろしいでしょうか?GOLDを使ってどのようにカテゴリページにCSSを適用するか分かりません。
何卒よろしくお願い致します。

Reply
ぜぇれさん

SAGAさん
コメントありがとうございます、ぜひチャレンジしてみてください!

Reply
ぜぇれさん

YUMAさんこんにちは。
コメントありがとうございます。

GOLDで作成したCSSを、RMS上のデザイン設定のエリアに読み込むと全ページに適用可能ですよ。
試してみてください!

Reply
たけっち

こんにちは、何度も楽しく読ませてもらっています。
カテゴリーページの一覧画像サイズも大きくしたいのですが
できますか??

Reply
ぜぇれさん

たけっちさんこんにちは。
コメントありがとうございます!

多分できないんですよね…
楽天は以下のような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で幅と高さを指定すれば一応は大きくすることも出来ると思います。

興味がありましたら一度お試しください!

Reply
しんご

こんにちは、カテゴリーページと商品ページの見栄えを整えたくて参考にさせていただいてます。

カテゴリーページの商品の商品名の幅を整えたいのですが、どこのスタイルを修正しているのでしょうか。
http://item.rakuten.co.jp/msb-bann/c/0000000233/
なぜか、右の列だけ幅が大きくなってしいます。

Reply
ぜぇれさん

しんごさんこんにちは。
お返事が遅くなりすみません!

今見させていただきましたが解消されていますか?
同じような状況が発生している店舗様は多く、
おそらく商品名の文字数によって発生している問題かと思います。

Reply
しんご

ありがとうございます。
商品名の文字数が問題だと現状仕方ありませんね。

Reply

コメントを残す

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