*

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

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

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

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

おすすめトピックス

関連記事

楽天ショップで売り切れ商品が入荷したら通知する機能があります

(また売り切れか…) 楽天ショップで買い物している時、凄く購買意欲をそそらせる良い商品に巡りあう事もあるでしょう。商品説明や画像を見ながらショッピングカートまで進むと目当ての商品が売り切れとなっていた時のショックは大きい […]

キーボードと紙
要注意、Amazonに出品する商品の商品名は一度決めたら変更できません

Amazon でネットショップを出店している方も多いかと思います。が、Amazon で商品を出品する際、注意点があります。 それは、Amazon に商品登録する際に一度決めた商品名は変更不可能という事です。以前は変更する […]

Sold Out
あなたのショップは大丈夫?誤解を招く文言でお客様を逃しているかもしれません

日本語って難しいな。といつも切に思います。 例えば複数の必要条件があるキャンペーンをショップで打ち出す時、どのようにお客様にわかりやすくお伝えするか。本当に難しい事です。もちろん、長い文章で説明するのであれば簡単です。イ […]

楽天のスマホ商品ページにPC版で見るボタンを追加するカスタマイズ

Freepikによるデザイン スマートフォンでウェブサイトを見ていたり、ネットショッピングをしている時に PC 版のサイトを見たいと思った事はありませんか? 大抵のウェブサイトやネットショッピングサイトでもスマートフォン […]

ボタン
Photoshop不要!ボタン素材を自動生成してくれるButton Makerの使い方

Web 上にはボタンというものが至る所に存在しています。検索ボタン、閉じるボタン、送信ボタン、クリアボタン、これらは Web 上でよく見られるボタンです。 このボタン画像は一見簡単に見えて地味に手間がかかるんですよね。C […]

メール
楽天メルマガR-Mailが週1回なら配信無料に!2015年9月から(※条件付)

楽天の各ショップから送る事ができるメールマガジン(R-Mail)が2015年4月から配信が有料になりました。お客様が求める最適なメールマガジンが届くような環境づくりの為の有料化でしたが、ここにきて手のひらを返したかのよう […]

上部広告

著者について

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

フォローはこちら

       

上部広告

       
FOR HONOR(フォーオナー)PC版をGeforce GTX960でプレイした感想

侍が登場するゲームが出ると聞いて大変興味が沸いたゲームがありま

チキンガンボ
札幌でアメリカン料理が楽しめるダイニングバー「BUDDY BUDDY(バディバディ)」でディナー

札幌には和食、イタリアン、パンケーキ、様々な飲食店がありますが

ピクルス
ピクルスとは何か?実はきゅうりを指す言葉ではなかった

ピクルスと聞いて何を思い浮かべるでしょうか?日本でも一般的な食

釜飯
新千歳空港で新鮮な海鮮釜飯が食べられる「北海道釧路ふく亭」は穴場

新千歳空港で特にあてもなく晩御飯を食べる所を探していたのですが

チキンカレー
札幌すすきのイタリアンバー「エゾバルバンバン」でサラダバー付き激安ランチ

札幌のすすきのへとある人気店へランチに出かけたのですが、とんで

→もっと見る