楽天 PC商品ページ キャッチコピーと商品名の間を<br>を追加せずに改行する

楽天

楽天のPC商品ページ・プレゼントページで、デフォルトではキャッチコピーと商品名がつながって表示されてしまうので、つながらないように表示させるためにキャッチコピーに<br>を追加しているかと思います。

 

cssをちょこっと追加するだけで、<br>を入れなくても改行させることや、キャッチコピーと商品名のフォントサイズにメリハリをつけることができます。

 

 

キャッチコピーの設定

span.catch_copy,
span.present_catch_copy{
font-size:14px;
display:block;
width:100%;
}  

 

 

商品名の設定

span.item_name,
span.present_item_name{
font-size:18px;
display:block;
width:100%;
}

 

 

RMSでヘッダー・フッター・レフトナビなどに貼り付ければ使えます。

フォントサイズだけでなく、文字色(color)や行間(line-height)、キャッチコピーと商品名の間を開ける(margin-bottom)ことなども設定できます。

 

ぜひお試しください♪

コメント