• 楽天
  • Yahoo!

【楽天】CSS Tips┃カテゴリページの「商品リスト」を見やすくカスタマイズ!(コピペで完了)

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

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

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

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

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

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

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

CSSタグをRMSに貼り付け

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

▼専用CSS

まとめ

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

以上、ogaRiaチームでした!

この記事を書いた人

佐藤

佐藤ディレクター

CSSやjavascriptなどを使ってワンランク上のショップ作りをサポートできるようなノウハウを中心にお伝えできればと思います!業務の簡略化、効率化に情熱を注いでいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。