楽天商品ページ、商品名とキャッチコピーに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まとめ