*

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

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

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

実際のお店に陳列された商品の値札、折込広告、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

おすすめトピックス

関連記事

商品ページの回遊率アップで売上向上を狙う為の施策について

どこのネットショップ、ショッピングモールでもそうですがマニュアル通りにただ商品を載せただけでは売上向上に繋がりません。ちょっとしたカスタマイズで商品ページの回遊率を高め、商品が売れる機会を増やすことができます。 カスタマ […]

初心者でも簡単、Photoshopでバナーのボタンを簡単に作成できる作り方

Photoshop で簡単にバナー画像などに付けるボタンの作成方法を紹介します。Web 制作や EC ショップ運営をされている方なら作成する機会も多い事でしょう。Photoshop でボタン作成は難しく感じますが、知って […]

ネットショップ実務士検定
ネットショップ検定に合格すれば就職に有利になるかも

調べ物をしている時、たまたま「ネットショップ実務士」という検定を見つけました。コンセプトとしてはネットショップ業界で働くための新資格。ネットショップで働くための能力の基準を示し、認定する資格試験のようです。 ネットショッ […]

Yahoo×CSS
Yahoo!ショッピングの商品ページで外部CSSを使用する方法

Yahoo!ショッピングで出店されているショップ運営者さんもたくさんいらっしゃると思います。 Yahoo!ショッピングといえば、商品ページで使えるタグが制限されていたり、文字数も制限され、外部スタイルシートも使えずデザイ […]

レスポンシブメールマガジンを遂に楽天がリリース、メルマガもスマホ対応を

2016年2月15日より楽天がレスポンシブメール機能をリリースしました。 レスポンシブメールとは一つのメールでパソコン、スマートフォンの両方に最適なメールマガジンを送る事ができる機能です。ただ両方に送るだけではなく、パソ […]

楽天商品ページに複数の買い物かごボタンを設置する方法

今日は楽天ショップの商品ページについてのお話です。 これからAという商品を商品ページに載せるとします。そのAという商品には多数のオプション品があり、合わせてオプション品もたくさん売りたいという場合結構頭を悩ます問題だった […]

著者について

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

フォローはこちら

       

       
Premiere Elementsで動画の一部を切り抜きトリミングする方法

せっかく動画を撮影したけど、肝心な部分は動画の中央部分だけでま

北海道チーズおかき
チーズの旨味が超濃厚!YOSHIMIの「北海道チーズおかき」

北海道に本社を置き、レストラン事業や製菓事業を行っている YO

無効なURLです。
エックスサーバーへ移転時にデータベースをインポートしたら「無効なURLです。」

高速で安定度の高いと評判のエックスサーバーへサイトの移転を行い

CSSの擬似クラスnth-childは3の倍数以外というような否定条件も可能

CSS において偶数の要素だけ、奇数の要素だけ、何番目の要素だ

北のちーずボー
北海道産チーズのスティックケーキ「北のちーずボー」

新千歳空港のお土産店で販売されていた「北のちーずボー」を買って

→もっと見る