• 楽天
  • Yahoo!

楽天商品ページ、商品名とキャッチコピーにCSSを適用する方法

(※この記事は、2013年7月3日に投稿されたオガレポを再掲載しています。)
おっ!?
こんにちは、オガリア中村です。

新卒すずきに突然美尻クッションを持たされ、別の部屋に呼び出されたところ、いきなりシャッターを切られたオガリア中村です。

なんか嬉しそうだな・・・

将来、道端でフリーのカメラマンにいきなり写真を撮られてもこんな顔で雑誌に載る事になるんでしょうか?妄想しただけで不安です。

さて今日は、楽天商品ページ「商品名・キャッチコピー」のCSSを弄ります。

楽天さんのRMS内編集機能でも、文字の大きさや文字色等の設定機能はありますが、もっと文字間や行間までカスタマイズしたい!という店長様へ。

CSSの適用方法

商品名とキャッチコピーには、楽天さんがデフォルト設定している「class名」があります。以下のclass名に対して、CSSを適用させればOKです!

  • 商品名 ⇒ item_name
  • キャッチコピー ⇒ catch_copy

例えば・・・

<style type="text/css">
<!--

.item_name {
display:block;
margin-bottom:15px;
}

.catch_copy {
display:block;
margin-bottom:15px;
}

-->
</style>

上記のコードをRMS編集画面内、『共通説明文(大)』に入れれば、全ての商品ページ内、商品名とキャッチコピーの下に15pxの空白を空ける事が出来ます。

文字装飾の代表的なCSS

私もCSS素人で御座いますが・・・店長時代によく使っていたものだけご紹介できれば。

  • 文字色を指定する  ⇒ color  (例:color:#ff6600)
  • 背景色を指定する  ⇒ background-color  (例:background-color:#fff)
  • 行間を調整する   ⇒ line-height  (例:line-height:15px;)
  • 文字間を調整する  ⇒ letter-spacing  (例:letter-spacing:15px;)

以上です!
少しだけ気をつけたいのは、”楽天のお買い物かごっぽさ”を保つ事です。お客様はアクマで、楽天さんのお客様。初めて来たお客様への印象が「あれ?いつものお買い物かごと違う」という”違和感”となってしまわない様に、気をつけましょう。

以上!オガリア中村で御座いましたー!

関連レシピ

【楽天】「お買い物かご周り」を徹底カスタマイズするTipsまとめ
【楽天】「お買い物かご周り」を徹底カスタマイズするTipsまとめ

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメント

2 件のコメント

  • ASLEAD より:

    お世話になります。商品ページでポイントUPと価格の下に(※上記ポイント倍率には、スーパーポイントアッププログラム分は含まれておりません。)文字が出て来ます、その文字長すぎて二列する方法がありますか
    お忙しいところ恐れ入ります、よろしくお願いいたします。

    • 中村 茉実 中村 茉実 より:

      ASLEAD 様
      お世話になっております、ご質問ありがとうございます。
      表示状況について確認しました。ご指摘の通り解消できないか諸々思考錯誤してみたのですが、、、大変申し訳ありません、現状解決策について検討がつかない状況です(涙)
      良い方法が見つかり次第、またご返信させて頂きます!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。