*

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

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

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

実際のお店に陳列された商品の値札、折込広告、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-bt
初心者でも簡単、Photoshopでバナーのボタンを簡単に作成できる作り方

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

アップロード
楽天R-Cabinetに画像を一括でアップロードする方法

楽天 R-Cabinet の画像を URL から一括でダウンロードする方法については以下の記事で紹介しました。 楽天R-Cabinetの画像をURLから一括でダウンロードする方法 もう一つわかりにくいのは、楽天 R-Ca […]

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

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

ポンパレ
ポンパレモールの商品ページにアクセスできない時の対処法

リクルート社が運営しているショッピングモールで「ポンパレモール」があります。多数のネットショップさんが集まって出店しているという所は楽天と同じです。 ポンパレモール:ネット通販/オンラインショッピングサイト トップページ […]

ダンボール
楽天の商品ページの納期情報の文字色やサイズを変更する方法

「楽天商品ページにある納期情報の文字色変えれる?」 突如放たれるその言葉。全く無茶を言ってくれますねと思いつつも、試行錯誤を始めます。試しに google で検索しても特に情報はありません。しかし、google の検索予 […]

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

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

上部広告

著者について

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

フォローはこちら

       

上部広告

       
カスタムサムネイル
Youtubeでカスタムサムネイル登録時にエラー「invalid json string…」

Youtube で動画をアップロードしたら動画のサムネイルが自

三島池
鴨が泳ぐ米原市の三島池はキャンプもできる紅葉スポット、美しい公園でした

滋賀県米原市にある三島池は、滋賀県の紅葉スポットの一つとして数

airport
空港の売店で見かけるTax Freeとは何か?

飛行機をよく利用する人ならご存知かと思いますが、空港の売店には

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。

sumaho-footer2
これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時

→もっと見る