楽天商品ページの「買い物かごに入れる」ボタンを大きくする方法

楽天商品ページのお買い物かごボタンを大きくする方法

こんにちは!トマトジュース飲むんだったらトマト食べたい中村です。

子供の頃、友達の家で友達ママから「これ飲む?」とトマトジュースを出して頂き、赤いパッケージから思いっきりりんごジュースと勘違いして口に含んだ時の絶望が、もう、トラウマです。

さて本日は、楽天商品ページの「お買い物かご」ボタンを大きくします。
これが・・・こんな感じに!

楽天商品ページお買い物かごビフォーアフター

やり方は簡単です。

「買い物かごに入れる」ボタンの大きさを操作する方法

  1. 以下のソースを用意します。
    <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を追記しました。

  2. 上記のソースを、以下の箇所へ貼付けます。
    • 全商品へ適用させる場合
      ・・・ RMS > デザイン設定 > 共通説明文(大)
    • 特定の商品へのみて適用させる場合
      ・・・ RMS > 商品ページ設定 > 商品編集画面内、PC用販売説明文

以上で終了です!

ページ崩れについて

お買い物かごボタンを大きくした事により、店舗トップページ最上部にある楽天ヘッダーレイアウトが崩れる可能性があります。回避方法について別記事を書きましたので、ご参考くださいませ。


「買い物かごに入れる」ボタンを大きくすると崩れる、トップページの楽天ヘッダーを修正する方法

 
 
 
スマートフォンから楽天を利用するユーザ数は右肩上がりに上昇していますが、実際にユーザが楽天店舗ページを見る際は、PC用表示にして見ているユーザも少なくない様に思います。

実際にスマートフォンからPC用表示で楽天店舗を見た経験がある方は分かると思いますが、「買い物かごに入れる」ボタンが小さくて、どこにあるのか分からない事も。
お買い物かごボタンを大きくする事で、スマートフォン対策にもなるかもしれません。

ちなみに、PCブラウザからスマフォでの表示を確認する方法は、以下でご案内しています。

以上!オガリア中村でした。

  1. コメントはまだありません。

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