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

http://repo.oga-ria.com/%E6%A5%BD%E5%A4%A9%E5%95%86%E5%93%81%E5%90%8D%E3%81%A8%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E3%82%B3%E3%83%94%E3%83%BC%E3%81%ABcss%E3%82%92%E9%81%A9%E7%94%A8-197.html

楽天さんの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;)

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

This entry was posted in 楽天.

About

You may also like...

Your email will not be published. Name and Email fields are required