楽天商品ページの「商品をかごに追加」「ご購入手続きへ」ボタンを大きくする

この記事の内容は楽天の仕様変更により使えなくなりました！

こんにちは。
最近体が弱くなっているのにやたらとやりたいことが増えていく鷲尾です。

つい先日、風邪を引いたのか高熱を出し体調が優れなかったのに、週末には鼻水を垂らしながらフットサルの大会で走り回り、さらにその後フットサルの練習でも楽しく球蹴りをしてしまいました。

熱で頭がボーッとしてろくに仕事も出来ていないのに遊んでしまったので、このことは社長に内緒にしています。

さてさて。今回は楽天商品ページの「商品をかごに追加」ボタンと「ご購入手続きへ」ボタンを大きくしちゃいます。
最近、「お買い物かご」ボタンがこの2つの新しいボタンに変更されたのですが、これをさらに目立たせたいと思います。

個数入力欄やかごボタンを大きくする

以下のソースを、楽天RMS ＞ デザイン設定 ＞ 共通説明文（大） へ貼り付けます。

<style>
/* 「個数」の文字を大きくする */
#rakutenLimitedId_aroundCart span {
	font-size: 16px !important;	/* 文字サイズの調整 */
}

/* 個数入力枠を大きくして枠内の数字を中央寄せにする */
div#rakutenLimitedId_aroundCart .rItemUnits {
	width: 60px !important;	/* 枠の横幅を調整 */
	height: 38px !important;	/* 枠の縦幅を調整 */
	text-align: center;		/* 数字を中央寄せ */
}

/* ボタンを大きくする */
.floatingCartSplitButtons {
	display: block;
}
.cart-button-container {
	display: block;
}
div#rakutenLimitedId_aroundCart .new-cart-button {
	width: 400px !important;	/* ボタンの横幅を調整 */
	height: 50px !important;	/* ボタンの縦幅を調整 */
}
</style>

これだけで完了です。
ボタンのサイズや個数の枠のサイズはお好きに変更してみてください。

もし、特定の商品のみボタンサイズを変更したいという場合は、共通説明文ではなく次の箇所へスタイルを書き込んでください。
楽天RMS ＞ 商品ページ設定 ＞ PC用販売説明文

とても簡単なので、ボタンのサイズを変更したいな～と思っておられる方は是非参考にしてください！

鷲尾

オールラウンダーなスーパーマンを目指してます。社長と目でバトル（会話）するのが日課です。