スマホページの表示方法

Question

http://item.rakuten.co.jp/moteshitagi/c/0000000149/

こちらの店舗のスマホカテゴリページのように3商品づつ横に並ぶように
設定するにはどうすれよろしいのでしょうか？

また「カテゴリーをさらに絞る」を一覧で表示される設定はどうすれば
よろしいでしょうか？

よろしくお願いいたします。

Answer

ECマスターズの田中です。

今回ご案内する方法は、
楽天RMSの、禁止タグを入力できるバグを利用した方法ですので、
今後、RMSの改修により、使用できなくなる可能性があります。

カテゴリページ共通説明文を利用して、
外部スタイルシートを読みこませることで
各パーツのデザインを変更しております。

予め、楽天GOLDに外部スタイルシートファイルを設置していただき、
カテゴリページ共通説明文に
下記のHTMLタグを貼り付けて読み込ませる、という流れになります。
===== この下の行から ============

===== この上の行まで ============
※外部スタイルシートファイルのURLは、実際のURLにご変更ください。

外部スタイルシートファイルは、
中身はテキストファイルなので、
メモ帳で作成して、ファイル名末尾に「.css」をつけて
保存していただくことで作ることができます。

いただいたURLの店舗の場合は、
http://www.rakuten.ne.jp/gold/moteshitagi/sp/customhead/css/custom_cate.css
このような外部スタイルシート埋め込んで
見た目を変更しております。

＞こちらの店舗のスマホカテゴリページのように3商品づつ横に並ぶように
＞設定するにはどうすれよろしいのでしょうか？

先述の「custom_cate.css」ですと、
８７行目〜１８０行目、
「商品一覧カスタム」関連の規則で設定されております。

＞また「カテゴリーをさらに絞る」を一覧で表示される設定はどうすれば
＞よろしいでしょうか？

先述の「custom_cate.css」ですと、
３１行目〜７４行目、
「リストボタン化」関連の規則で設定されております。

初期状態のスタイルを崩して再設定する関係から、
最低限必要な指定がとても多いので、

まずは、「custom_cate.css」から
上記行のソースだけを
御自身の外部スタイルシートファイルにコピー＆貼り付けていただき、
ご希望の見た目になるよう修正を行ってください。

どの属性をどう修正するとどう見た目が変化するのかは、
下記URLのリファレンスをご参照ください。
http://www.htmq.com/style/