[楽天]買い物かごボタンのカスタマイズCSS

公開日:  最終更新日:2021/11/30

[楽天]買い物かごボタンのカスタマイズCSS
楽天の買い物カゴボタンて地味な感じのショップさんが多いですよね。

楽天買い物カゴボタン →→→楽天買い物カゴ画像ボタン

本日は上のように楽天で買い物カゴボタンの見た目を変更するCSSを紹介したいと思います。

楽天の買い物カゴを画像ボタンにするCSS

楽天市場の商品ページにある買い物カゴのボタンはデフォルトでは地味な感じになっていますが、ちょっとしたCSSを加えることで画像を使ったボタンに見た目を変更することが可能です。
CSS

<style>
/*買い物カゴボタン*/
input {
  font-weight:bold;
  letter-spacing:.1em;
  background:url("カート画像URL") #fcfcfc no-repeat 10px 8px;
  margin-top:5px;
  cursor:pointer;
  border-color:#cdcdcd;
  border-style:solid;
  border-width:1px 2px 2px 1px;
  padding:8px 7px 7px 40px;
}
/*IE対応*/
*html input {
  width:1pt;
  overflow:visible;
  padding-top:8px;
  padding-bottom:8px;
  padding-left:40px;
  background:url("カート画像URL") #fcfcfc no-repeat 9px 8px;
}
 
input:hover {
  background-color:#efefef;
} 
   
/*個数入力*/
input#units {
  border:solid #ccc 1px;
  background:#fff!important;
  width:30px;
  height:30px;
  cursor:auto;
  padding:7px 7px 7px 3px;
}
 
/*お問い合わせボタン*/
font input {
  background:#fcfcfc 10px 5px 10px 0;
  background-image:none;
  margin-bottom:5px;
  padding:7px;
}
 /*IE対応*/
*html font input {
  background:#fcfcfc no-repeat 9px 8px;
  margin-bottom:6px;
}  
</style>

上記のようなCSSを商品説明(大)等に記述もしくは、外部CSSファイルにして読み込みます。

今回のサンプルではカート画像を使っているので長くなってますが、inputに対してのみCSS記述をすると 個数入力、買い物カゴボタン、問い合わせボタンのすべてに同様の内容が反映されてしまいます。

そこで、個数、問い合わせボタンに対しても見た目を調整しています。
input#units { ・・・が 個数
font input { ・・・ が 問い合わせボタン
をそれぞれ指定しています。

個数、買い物カゴ、問い合わせボタン共通で文字サイズ、文字色を変えたいということであればinputに対する記述だけでもOKです。

CSS(色、文字サイズ、太字だけを指定)

<style type="text/css">
input{
  font-weight:bold;
  font-size:25px;
  color:#000;
}
</style>

実際に商品ページをカスタマイズしているショップ

楽天商品ページカスタマイズ事例ページ
こちらのショップ:サムライ家具の商品ページを見てもらうとわかりやすいかなと思います。買い物カゴ以外の部分、商品番号、価格の見た目をカスタマイズしていたり、お問い合わせ電話番号を目立つ部分に表示するようにしてありますね。

追記:買い物カゴボタンのみを変えたい場合

H27.1.7追記しました
上で紹介しているCSSについてですが、ショップの設定によっては、買い物カゴボタン以外にも影響が出てしまいレイアウトが崩れて調整が必要になってしまうことがあるかもしれません。

というのも買い物カゴボタンの部分のタグは、idやclassの指定が何もない状態、もしくはid指定はあるが、ページごとに異なるため、CSSで買い物カゴボタンのみを指定することが出来ません。と思っていたのですが良く考えたら指定出来そうな気がしたので追記してみます。

楽天買い物カゴボタン

<style type="text/css">
input[value="買い物かごに入れる"]{
  font-weight:bold;
  letter-spacing:.1em;
  background:url("カート画像URL") #fcfcfc no-repeat 10px 8px;
  margin-top:5px;
  cursor:pointer;
  border-color:#cdcdcd;
  border-style:solid;
  border-width:1px 2px 2px 1px;
  padding:8px 7px 7px 40px;
  text-indent: -999px;
}
</style>

といった記述をすれば、買い物カゴボタンのみを指定出来ます。
ポイントとしては、idやclassが使えない変わりに、input[value=”買い物かごに入れる”]と記述しているところです。ボタン上に表示している文字を指定して買い物カゴボタンを特定しています。
ボタンの文字表記を変えている場合には、それに合わせる必要があります。


今回紹介したCSSは買い物カゴなどのボタン関連のカスタマイズですが、楽天の商品ページ内で見た目を変更出来なそうな部分についても同様にCSSで変更をすることは可能です。また、機会があれば紹介します。

商品ページの納期情報

ボタン素材をお探しの方はこちら

ネットショップ向けの無料素材をお探しなら




Comment

  1. yam より:

    初めまして。
    とても参考になり、ありがたく拝見しています。
    ご存知であれば教えて頂きたいのですが、
    上記を適用した場合、自前で設置している商品検索入力欄にも適用されます。
    個数入力 → input#units
    お問い合わせボタン → font input
    上記を参考に 手探りで検索入力欄をコントロールしたく
    勝手に検索は「sitem」かなと思い、
    input#sitem がダメだったので
    sitem などやりましたがダメでした。
    自前で設置している商品検索入力欄をコントロールする(適用させたくない)場合 どうすれば良いでしょうか。
     

  2. peacepopo より:

    コメントありがとうございます
    自前で設置している商品検索入力欄とのことですので
    input タグに id=○○ もしくは class=■■ といった属性が指定してありますでしょうか?
    指定あるようでしたら
    idなら input#○○
    classなら input.■■
    といった感じで個別にcssを指定することが出来ると思います。
    また、id、class等の指定がないようでしたらinputタグに
    追加すれば個別の指定が出来るようになるかと思うので試してみてください

  3. yam より:

    早々のご連絡ありがとうございます。
    無事に制御出来ました!
    本当に助かりました。ありがとうございます。

  4. 匿名 より:

    すいません、質問に答えてくれますか?

  5. peacepopo より:

    質問等についてはわかる範囲で対応しますがコメント欄だと
    長くなりますのでメール等でやりとりいたします。
    ・サイドバーのお問合せフォーム
    もしくは
    ・コメント欄にてメールアドレス有りでコメント+「管理者にだけ表示を許可する」
    からお願い致します。

  6. 武田 女功美 より:

    何度もトライしているのですが、どうしても画像が表示されません。
    ゴールドではないので、ゴールドでなくても出来る方法をどうか教えていただけないでしょうかか!
    買い物かごボタンのみの変更で大丈夫です★
    サイズは、360px×59pxです!
    よろしくお願い致しますm(_ _)m

    • peacepopo より:

      武田さん

      コメントありがとうございます。

      画像が表示されないとのことですが、思いつくこととしては
      ・画像URLに指定しているURLの画像がそもそも存在しているか
       (ブラウザのアドレス欄に画像URLを貼り付けて表示されるか確認)
      ・画像URLを指定する部分の前後 ” ” ダブルクォーテーションで囲っているか
      ・画像以外のCSSは反映されるか、文字サイズなど

      もっと簡単に買い物カゴボタンのみを指定出来る方法について記事に追記してみました。
      そちらも参考にしてみてください。

  7. 佐藤 より:

    とても参考になりました

    試に1商品ページだけでやってみたのですが
    画像の上に「買い物かごに入れる」という文字がどうしても出てしまいます

    fontを消すにはどうしたら良いか、アドバイスをいただけませんでしょうか

    よろしくお願いします

    • peacepopo より:

      佐藤 様

      コメントありがとうございます。
      CSSで下記を指定してみたらいかがでしょう。

      text-indent: -999px;

      テキストの位置をずらして見えなくしています。

      • 佐藤 より:

        ご返信ありがとうございます

        記述しましたがfontはズレませんでした

        input[value=”買い物かごに入れる”]{
        font-weight:0;
         text-indent: -9999px;
        letter-spacing:.1em;
        background:url(“http://www.rakuten.ne.jp/gold/******/image/button12_cart_02.jpg”) #ffffff no-repeat 0px 0px;
        margin-top:5px;
        cursor:pointer;
        border-color:#ffffff;
        border-style:solid;
        border-width:0px 0px 0px 0px;
        padding:1px 1px 90px 200px;
        }

        間違ってますでしょうか?
        よろしくお願いします

      • 佐藤 より:

        すみませんでした

        padding:1px 1px 90px 200px; を
        padding:1px 1px 90px 350px; にしたらfontがズレてくれました

        ありがとうございました

        • peacepopo より:

          佐藤 様
          こちらも説明不足だったようですが、
          無事解決できたようで良かったです。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク
PAGE TOP ↑