こんにちは。炭酸水で薬飲むのってすごい難しいですね。オガリア中村です。
何度もタイミング失って、3分ほど口内で薬を転がしました。

楽天ショップのお買物かご周りデザイン。
自分好みにできないかと色々弄ってみたら、ちょっと良い感じのが出来ました!!
ので、テンション上がって久々のオガレポ投稿です。

“良い感じ”なポイントは3つ！

• キャッチコピー上部にラベルがつけられる (ベストセラー1位！の部分)
• 商品名下に境界線が入る
• 価格に枠線がつく

ちょっと見やすくなりませんか？？

実装方法

以下のCSSを上から下までコピーして、「全ページ共通説明文(大)」等、全商品ページに反映される箇所に貼り付けます。ラベル内の文言などは適宜お書き換えくださいませ。

<style type="text/css">
<!--

span.catch_copy,
span.item_name {
  line-height: 180%;
}

/* キャッチコピー上部にラベルがつく */
span.catch_copy:before {
    content: "ベストセラー1位！"; /*ラベル内の文言*/
    width: 100px; /*ラベルのサイズ*/
    background-color: #bf0000; /*ラベルの色*/
    font-size: 11px;
    color: #fff;
    text-align: center;
    display: block;
    padding: 1px 4px;
    margin-bottom: 4px;
    border-radius: 2px;
    clear: both;
}

/* 商品名下に境界線が入る */
span.item_name {
    display: block;
    border-bottom: 2px dotted #ddd;
    padding-bottom: 8px;
}

/* 価格に枠線がつく */
table#rakutenLimitedId_cart {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: 8px;
    margin: 16px 0;
}

span.price1 {
    color: #333 !important;
    font-weight: bold;
    font-size: 80% !important;
    line-height: 30px;
    display: inline-block;
    margin-right: 16px;
}

-->
</style>

これで完了！反映されましたか？？
(※主要ブラウザの最新バージョンでは正常表示を確認できました。)

特にキャッチコピー上のラベル等は、【半額セール中！】【ポイント10%UP！】等場合によって使い分けられますので、是非ご活用を！

観葉植物へのお熱が高まっています。
現在12種類を生育中。

一人ひとり、水の量・日当たり・風通しの好みが異なりまして。
毎朝せっせとお世話するために早起きまでするように。

休日は、窓際からぼ～っと、
ただただ彼等が風にそよぐ姿を眺めています。

オガリア中村でした。

関連記事

楽天商品ページ、商品名とキャッチコピーにCSSを適用する方法 【コピペで完了】楽天GOLDで作るスマフォページに「検索窓」を設置する方法 【ネットショップ出店ビギナー必見！】お買物かご付近のスペック表テンプレート３デザイン 楽天ショップの縦帯バナーを、「リアルタイムde切替くん」を使って自動切替する方法