【楽天】カテゴリページの「商品リスト」を見やすくカスタマイズ！CSSテンプレート

この記事は過去に書かれた「ogaRia繁盛レシピ」を再掲載しています。予めご了承くださいませ。

こんにちは、左右のLとRの表記を確認する時は
ゲームのコントローラーを思い出すogaRiaチームSです。

今回は楽天のカテゴリページで商品リストをCSSでカスタマイズしよう！
という記事を書かせて頂きます。

通常の商品リストは何かちょっと味気ない感じがしますね。
セールの特集ページを作っても商品リストの部分がさびしいかも。。。
商品名が長すぎてごちゃごちゃしてしまう。。
そんなショップ様向けにシンプルで見やすい商品リストへカスタマイズしてみましょう！

カスタマイズ後のデザイン

早速ですが、カスタマイズ後のサンプルイメージを見てみましょう。

価格表記を赤字で大きく、商品名は小さめで2行のみ表示され、
超えた分は非表示になります。

CSSタグをRMSに貼り付け

下記CSSを共通部分(ヘッダー、フッター、レフトナビなど)に貼り付けましょう！
特定のカテゴリページだけ変更したい場合は該当カテゴリページの「説明文」部分に貼り付ければそのページだけ カスタマイズが反映されます。

▼専用CSS
<style type="text/css"> <!-- #risFil td{ font-family:ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,ＭＳ Ｐゴシック,sans-serif; } #risFil td br{ display:none; } #risFil td img, #risFil .categoryWindowImg { margin:30px auto 15px; } #risFil td img[width="14"]{ display:none; } #risFil .category_itemnamelink{ height:30px; color:#444; font-size:10px; letter-spacing:1px; overflow:hidden; display:block; margin:0 0 10px!important; width:230px; line-height:15px; } #risFil .category_itemprice{ font-weight:bold; color:#BF0000; font-size:22px; letter-spacing: -2px; font-style: oblique; } #risFil .category_itemtaxpostage{ font-size:9px; letter-spacing: -1px; color:#444; } #risFil .category_itemtaxpostage + .category_itemtaxpostage{ display:none; } #risFil .not{ font-size:10px; font-weight:normal; display:block; background:#FF6600; color:#FFF; padding:2px 0; text-align:center; width:100px; margin:0 auto; border-radius:3px; } #risFil .risfClfx{ font-size:10px; } #risFil .risfClfx img{ margin:0; } --> </style>

まとめ

いかかでしたか？今回はカテゴリページの商品リストカスタマイズについてご紹介させて頂きました。
少し手を加えるだけで綺麗に見せることができますね！
CSSをカスタマイズできる方は店舗独自の個性あるデザインにも挑戦してみてください！

以上、ogaRiaチームでした！