楽天市場の「買い物かご」ボタンをカスタマイズする手引き

Pocket

パソコンで楽天を見てると買い物カゴの存在が。。。

最近ようやくそれに気付き始めた楽天は、赤い買い物カゴを設置し始めました。 ただこの買い物カゴが、店のデザインやターゲットとしてる層に合うかどうかというと、すべての店舗さんに合うわけでもなく。

  • 楽天の買い物カゴは分かりづらい。
  • 見栄えが悪い。
  • 個性的なデザインに変更したい。

という欲求不満を満たせる“楽天市場の買い物かごをカスタマイズ”できるSCC(スタイルシート)をご紹介しようと思います。

楽天市場の「買い物かご」ボタンをカスタマイズする手引き

買い物かごの変更方法は色々ありますが、ある理由でこの方法にたどり着きました。

ある理由とは、買い物かごの上部に注目してもらいたい事項を画像として挿入しても問題が起こらない方法。

注目度が格段にいい立地条件に今一番見てもらいたい旬のネタを掲載する 注意事項や旬のネタ、特に期間限定のポイントアップ企画や送料無料企画の宣...

今回はそれをベースとして組み立てたCSSを紹介したいと思います。

様々な方法で

買い物カゴのデザインを変える上で、システム上どうしても同時に変更しなければならない箇所が出てきます。

それが

  • 買い物カゴ 買い物かごは画像としてデザインを変更します。
  • 個数入力窓 これを何も変更しないと、買い物カゴが個数入力窓にも適応されて買い物カゴがリピートされます。
  • お問い合わせボタン こちらも個数入力欄と同じようにデザインを適応させないと、買い物かごがリピートされてしまいます。
  • チェックボックス 項目選択肢をチェックボックスで使用するときに使用されています。 買い物かごへのスタイルシート適応により肥大化するので、それを抑える制御を入れます。
  • ラジオボタン 項目選択肢別在庫設定を使用する際に使用されています。 買い物かごへのスタイルシート適応により肥大化するので、それを抑える制御を入れます。

買い物かごのカスタマイズ、個数入力欄の変更、お問い合わせボタンやチェックボックスの変更と、色々と説明する部分があり ややこしくなりますので、個々のページに分けで解説したいと思います。

楽天市場の買い物カゴを別の買い物かご画像に差し替えて、見栄えを良くするセッティングを行いたいと思います。 このカスタマイズは、お問い合わせ...
楽天市場の買い物かごやお問い合わせボタンをアレンジしていると、不意に個数入力欄が乱れることがあります。 それを標準値に戻す方法が、完成例で紹...
楽天市場の商品問い合わせボタンを別に用意した画像に差し替えて、見栄えを良くする設定を行いたいと思います。 このカスタマイズは、買い物かごボ...
楽天市場の買い物かごなどをカスタマイズして変更をすると、項目選択肢で使われているチェックボックスや、項目選択肢別在庫設定で使用するラジオボタ...
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク