楽天ショップのお買物かご周りを少し良い感じにするCSS

オガレポ

こんにちは。炭酸水で薬飲むのってすごい難しいですね。オガリア中村です。
何度もタイミング失って、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種類を生育中。

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

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

オガリア中村でした。

    • BOS山本
    • 2015 8/27 10:42am

    質問です。
    「キャッチコピー上部にラベルがつく」ですが、これは全商品ページに出てませんか?指定の商品のみにラベルを出せますか?

      • ogaria
      • 2015 9/11 6:53pm

      山本様

      いつもチェックありがとうございます!また本件直接お電話頂いてしまい、失礼致しました。
      念の為こちらにもご回答致しますね^^

      > 全商品ページに出てませんか?

      はい、お貼付け先の「全ページ共通説明文(大)」が全商品ページに適用されている場合、ご指摘の通り全商品ページに出てきます。
       
      指定の商品のみにラベルを出す場合には、該当商品の「PC用販売説明文」内へCSSをお貼付けくださいませー!

      よろしくお願い致します。

    • hiroko
    • 2015 8/27 5:56pm

    中村様、

    いつも参考にさせて頂いております。
    こちらの内容をスマートフォンの商品ページでも実現できないでしょうか。

    悩みに悩んでいるのですが、スマホの商品ページを編集する場合、
    どこにcssを貼り付けたら良いのかわかりません。

    よろしければご教示くださいませ。

      • ogaria
      • 2015 9/11 6:56pm

      hiroko様

      お読み頂きありがとうございます!

      > スマートフォンの商品ページ

      スマートフォンについては楽天RMS側にてCSSの使用を制限しております為、現状当施策を適用させる事ができない状況に御座います、、、
       
      申し訳ありません!よろしくお願い致します。

    • てんてん
    • 2015 9/1 11:52am

    お買い物かごボタンの下にお気に入り登録のボタン(こちらで作ったボタン)を差し込むことは可能でしょうか?

      • ogaria
      • 2015 9/11 6:58pm

      てんてん様

      既にある「お気に入り商品に追加」リンクを、お好きな画像に差替える事は可能かと存じます。次回のオガレポでご紹介できるか検討させて頂きますね。

      よろしくお願い致します。

  1. 中村様

    いつも参考にさせていただいております。
    上記、ページ内に貼り付けましたが、
    価格の部分の枠が表示されません。
    http://item.rakuten.co.jp/angenehm/538184/#538184

    ご教授の程、
    よろしくお願い致しますm(_ _)m

      • ogaria
      • 2015 9/18 9:32am

      中村様

      お読み頂きありがとうございます!
      ご教示頂いた商品ページを拝見したところ、こちらでは枠線が見えている様です。
      https://gyazo.com/218b3d561337982fa0e15255b75f5987

      環境に依存する問題の様ですので、他PC・他ブラウザからも表示をご確認頂けますでしょうか!
      よろしくお願いいたします。

    • sato
    • 2016 2/3 5:45pm

    中村様

    先ほどはお電話でご対応いただきありがとうございます。

    テキストで「ベストセラー1位」を表示されているラベルを、

    テキストではなく、画像にする方法をアドバイスお願いいたします。

      • ogaria
      • 2016 2/3 5:49pm

      sato様

      平素は大変お世話になっております。
      こちらこそ、先ほどはありがとうございました!

      ご要望頂きました件ですが、「キャッチコピー上部にラベルがつく」部分のCSSを以下のようにお書き換え頂くことで実現可能です。

      /* キャッチコピー上部にラベルがつく */
      span.catch_copy:before {
          content: url("画像のURL"); /*ラベル画像URL*/
          display: block;
          padding: 1px 4px;
          margin-bottom: 4px;
      }

      ※「画像のURL」欄を、表示したい画像のURLへお差し替えくださいませ。

      うまくいかない場合は、またご連絡をいただけますでしょうか!よろしくお願い致します^^

    • sato
    • 2016 2/3 5:53pm

    中村様

    早々にアドバイスいただきありがとうございます!

    早速やってみます!!

  1. トラックバックはまだありません。