楽天商品ページ、商品名とキャッチコピーにCSSを適用する方法
こちらの記事は、2016年4月から内容を修正の上「繁盛レシピ」に再掲載しました！こちらからご確認できます。
こんにちは、オガリア中村です。
新卒すずきに突然美尻クッションを持たされ、別の部屋に呼び出されたところ、いきなりシャッターを切られたオガリア中村です。
将来、道端でフリーのカメラマンにいきなり写真を撮られてもこんな顔で雑誌に載る事になるんでしょうか？妄想しただけで不安です。
┗ 新卒すずき。 お茶目な笑顔を見せられては許すしかありませんね。
さて今日は、楽天商品ページ「商品名・キャッチコピー」の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;)
以上です！
少しだけ気をつけたいのは、”楽天のお買い物かごっぽさ”を保つ事です。
お客様はアクマで、楽天さんのお客様。
初めて来たお客様への印象が「あれ？いつものお買い物かごと違う」という”違和感”となってしまわない様に、気をつけましょう。
以上！オガリア中村で御座いましたー！
コメントはまだありません。