*

楽天ショップのカテゴリページの価格を赤文字にするには

公開日: : ネットショップ

商品の価格表記って何色なイメージですか?

実際のお店に陳列された商品の値札、折込広告、Amazon などのネットショップを想像してみてください。商品には価格は付き物です。お客様に買ってもらう為に価格を提示しなくてはいけませんが、価格の文字色は概ね赤色ではないでしょうか。(一部例外有り)

お客様に商品の価格を知ってもらう為にも、価格はすぐ目に入るように目立たせるようにしなくてはいけません。これいくらだろう?と価格を探すようでは購入機会を逃してしまうかもしれません。

ここで、ショッピングモール大手の楽天ショップの価格表記を見てみましょう。

楽天ショップカテゴリの価格表記

上の図は楽天ショップのカテゴリページですが、何も弄っていなければ価格が黒色です。これでは価格がすぐに見つけられないかもしれません。

次に、こちらも大手の 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" />

楽天商品ページカスタマイズ

  • Pocket

おすすめトピックス

関連記事

ガラケーとスマホ
楽天スマホ商品ページで制限なく画像説明を載せる方法

楽天に限らずネットショッピング界隈ではスマートフォンでのアクセスが PC を上回るなど年々スマートフォン比率が上昇してきています。今まではスマートフォンは後回し~にしてきた所もあるかと思いますが、パソコン版もスマートフォ […]

プチプチ
誰も教えてくれない梱包に使うプチプチの切り方

プチプチと言えばきっと誰もが見たことがあるでしょう。手元にあればついプチプチと潰したくなるあれです。通販で購入した物の中に緩衝材として入っている事が多々あると思います。 ネットショップを開いている方や、個人でオークション […]

eメール
楽天メルマガうざいと思う人朗報!メルマガ有料化で配信が減るかも

楽天ショップのメールマガジンがいつも大量に来て鬱陶しいと思う人も多いかと思います。 それもその筈、何も意識せず楽天ショップで買い物をしたら標準でメールマガジンが送信される設定になっています。楽天で買い物をする度にメールマ […]

楽天商品ページに背景
楽天の全商品ページに背景を付ける方法

楽天の商品ページに訪れると、画面の端に縦長の帯状画像が付いている事があります。そのショップのイベント告知であったり、○円以上お買上げで送料無料だとか、季節感を演出したり用途は様々です。 イメージとしては下図のようなもので […]

iphone
Yahooショッピングのトリプルページを手っ取り早くスマホ対応に

Yahoo!ショッピングにショップを出店している方で、jquery や CSS が自由に使えてデザインができる「トリプル」を契約していらっしゃる方も多いと思います。しかし、トリプルで普通に PC 用のトップページを作った […]

ランキング1位獲得
要注意!楽天商品ページへのランクイン実績表示についてルールを制定

楽天で買い物をしていると商品ページに「この商品は楽天ランキングで1位獲得!」というようなアピールをよく見かけると思います。売れてるアピールをする為に、楽天ランキングのランクイン実績を画像なりにまとめて商品ページにドンッと […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
梱包用ppバンドのストッパーのはさみを使わない外し方

ダンボールで荷物を梱包する時、より強固にする為に pp バンド

ローチョコレート
彦根市に生カカオが活きたローチョコレート専門店「ハレトケト」

滋賀県彦根市、彦根城周辺の古き町並みが残る地に滋賀県初のローチ

アサシンクリードオデッセイ
アサシンクリードオデッセイPC版をGeforce GTX 1070でプレイした感想

2018年10月5日に発売されたアサシンクリードオデッセイの

大垣市のお洒落なビストロ「洋食もくれん」でディナー

岐阜県大垣市の大垣駅近くに「洋食もくれん(洋食 MOQLEN)

Youtubeライブ(生放送)をタイムシフトのように後で見る事はできるか?

インターネット上で生放送ができるウェブサービスは色々ありますが

→もっと見る