★楽天商品ページ「商品名・キャッチコピー」のCSS★

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

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

タイトルとURLをコピーしました