商品の価格表記って何色なイメージですか？
実際のお店に陳列された商品の値札、折込広告、Amazon などのネットショップを想像してみてください。商品には価格は付き物です。お客様に買ってもらう為に価格を提示しなくてはいけませんが、価格の文字色は概ね赤色ではないでしょうか。（一部例外有り）
お客様に商品の価格を知ってもらう為にも、価格はすぐ目に入るように目立たせるようにしなくてはいけません。これいくらだろう？と価格を探すようでは購入機会を逃してしまうかもしれません。
ここで、ショッピングモール大手の楽天ショップの価格表記を見てみましょう。
上の図は楽天ショップのカテゴリページですが、何も弄っていなければ価格が黒色です。これでは価格がすぐに見つけられないかもしれません。
次に、こちらも大手の Amazon の価格表記を見てみましょう。
Amazon では価格は赤色表記です。もしこれが黒色だったら本当に目立ちません。やはり、価格が「赤」というのはウェブサイトにおけるリンクが「青」というように認知しやすい色だと思います。
楽天ショップのカテゴリページの価格を赤色に
前置きが長くなりましたが、楽天ショップのカテゴリページの価格表記も赤色にする事ができます。楽天 RMS の標準機能にはないので CSS を使ってカスタマイズします。
まず、カテゴリページの価格部分の html ソースを見てみると以下のようになっています。
<span class="category_itemprice">****円</span>
ここを足がかりにカスタマイズします。価格の部分に「category_itemprice」というクラスが指定されているので、ここにスタイルシートを適用しちゃいましょう。
span.category_itemprice{
color:#f00;
}
上の例では色だけ変更しましたが、太字にするなど CSS を追加すれば独自にカスタマイズができます。
CSSを書く場所
CSS ファイルは外部で作って GOLD スペースにアップするのがおすすめです。楽天 RMS のデザイン設定の「ヘッダー・フッター・レフトナビ」でヘッダー部分に CSS を読み込ませましょう。GOLD スペースがない場合は、「ヘッダー・フッター・レフトナビ」に直書きでOKです。
<link rel="stylesheet" href="アップした場所のURL" type="text/css" media="screen" />