楽天商品ページの「買い物かごに入れる」ボタンを大きくする方法
こんにちは!トマトジュース飲むんだったらトマト食べたい中村です。
子供の頃、友達の家で友達ママから「これ飲む?」とトマトジュースを出して頂き、赤いパッケージから思いっきりりんごジュースと勘違いして口に含んだ時の絶望が、もう、トラウマです。
さて本日は、楽天商品ページの「お買い物かご」ボタンを大きくします。
これが・・・こんな感じに!
やり方は簡単です。
「買い物かごに入れる」ボタンの大きさを操作する方法
- 以下のソースを用意します。
<style type="text/css"> <!-- /* 個数入力欄の大きさ */ input#units { padding: 1px 0px; } /* お買い物かごボタンの大きさ */ td > input { font-size: 15px; padding:20px 50px; width: auto; } /* 「商品についての問い合わせ」ボタンの大きさ*/ font input { font-size: 12px; padding:2px; width: 150px; } --> </style>
※上記ソース内、font-sizeを弄るとボタン文字の大きさが変わり、paddingを弄る事で、ボタンのサイズが変更出来ます。
※2013年7月25日、個数入力欄の大きさをデフォルトサイズに指定するCSSを追記しました。
- 上記のソースを、以下の箇所へ貼付けます。
- 全商品へ適用させる場合
・・・ RMS > デザイン設定 > 共通説明文(大) - 特定の商品へのみて適用させる場合
・・・ RMS > 商品ページ設定 > 商品編集画面内、PC用販売説明文
- 全商品へ適用させる場合
以上で終了です!
ページ崩れについて
お買い物かごボタンを大きくした事により、店舗トップページ最上部にある楽天ヘッダーレイアウトが崩れる可能性があります。回避方法について別記事を書きましたので、ご参考くださいませ。
「買い物かごに入れる」ボタンを大きくすると崩れる、トップページの楽天ヘッダーを修正する方法
スマートフォンから楽天を利用するユーザ数は右肩上がりに上昇していますが、実際にユーザが楽天店舗ページを見る際は、PC用表示にして見ているユーザも少なくない様に思います。
実際にスマートフォンからPC用表示で楽天店舗を見た経験がある方は分かると思いますが、「買い物かごに入れる」ボタンが小さくて、どこにあるのか分からない事も。
お買い物かごボタンを大きくする事で、スマートフォン対策にもなるかもしれません。
ちなみに、PCブラウザからスマフォでの表示を確認する方法は、以下でご案内しています。
以上!オガリア中村でした。
コメントはまだありません。