楽天スマホページのカテゴリについて

Question

楽天ショップのスマホページにあるカテゴリボタンのそれぞれの項目の横に関連した画像をつける方法を教えてください。

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

最初に、下記内容をメモ帳に貼り付けて
ファイル名の末尾を「.css」にして、
外部CSSファイルとして保存し、
楽天GOLDにアップロードしてください。

= この下の行から ====================
[id="カテゴリページURL末尾の数字"]:before {
  content: '';
  display: inline-block;
  background: url(画像URL);
  width: 50px;/*画像の幅*/
  height: 50px;/*画像の高さ*/
  background-size: contain;
  vertical-align: middle;
  margin-right: 5px;
}
= この上の行まで ====================
※カテゴリページURL末尾の数字は、実際の数字に置き換えてご利用ください。例：0000000100
※画像URLは、実際のURLに置き換えてご利用ください。
※画像の幅・画像の高さは、数字を増減させて調整することができます。

次に、下記内容を
スマートフォン用のカテゴリページ共通説明文に挿入していただくことで
画像をつけることができます。

= この下の行から ====================

= この上の行まで ====================
※外部CSSファイルのURLは、実際のURLに置き換えてご利用ください。

全カテゴリに画像を設置する場合は、
外部CSSファイルの内容を下記のように調整することで、
画像サイズ他の設定を共通で設定することができます。
= この下の行から ====================
/* 共通部分 */
.ilistnon li a[id]:before {
  content: '';
  display: inline-block;
  width: 50px;/*画像の幅*/
  height: 50px;/*画像の高さ*/
  background-size: contain;
  vertical-align: middle;
  margin-right: 5px;
}

/* 個別部分 */
[id="カテゴリページURL末尾の数字"]:before { background: url(画像URL); }
[id="カテゴリページURL末尾の数字"]:before { background: url(画像URL); }
[id="カテゴリページURL末尾の数字"]:before { background: url(画像URL); }
（以下繰り返し）
= この上の行まで ====================

Answer

細かくお答えいただいてありがとうございます。
さっそく取り掛かります。