*

2015年末版、楽天の商品ページのカートボタンを画像にしてクリックしやすくしよう

公開日: : 最終更新日:2015/10/27 ネットショップ

オフィス画像

楽天と言えば有名なショッピングモールの一つです。楽天で買い物をした事がある方もいらっしゃるでしょう。

ネットショップで買い物をする場合、商品ページを見て内容に納得してほしいと思ったら「カートに入れる」ボタンを押すのが普通の流れだと思います。しかし、楽天の場合「カートに入れる」ボタンが html のフォームのデフォルトのボタンで凄く地味です。しかも周りに似たようなボタンもあって分かりづらいです。しかし、楽天ショップの標準機能ではカートボタンを変える事ができません。

楽天の買い物カゴ

出店側も買う側もかなりの利用者がいる楽天なのに、カート回りのカスタマイズが貧弱なのが困りものです。

しかし、数ある楽天ショップの中ではカートを入れるボタンに画像を利用している所もしばしば見かけます。楽天の標準機能にない事をどうやって実現しているのか?

楽天の商品ページのカートボタンを画像にする

楽天の標準機能にないので、CSS で無理やりカートボタンを画像にしているのです。

カートボタンを画像にする事によって、カートボタンが人目でわかり多少はクリックされやすくなって販売促進にもつながるはずです。カートにどうやって入れたらいいかわからないという人もいなくなるでしょう。今回はその方法を紹介します。

いきなりですがまずは CSS を御覧ください。

input[value="買い物かごに入れる"]{
	background:url("画像URL");
	width:265px;
	height:55px;
	text-indent:-9999px;
	border:none;
	cursor:pointer;
	margin-top:8px;
}

input[value="買い物かごに入れる"]:hover{
	opacity:0.8;
}

各種解説

input に CSS を適用すると全部のボタンの画像が変わってしまいます。そこで識別するために[value=”買い物かごに入れる”]を追加しています。こんな指定方法見たことない人もいるかもしれません。

通常要素に CSS を適用するにはクラスか ID を指定します。しかし、楽天のカートボタン付近の html ソースを見るとわかりますが、カートに入れるボタンにはクラスも ID も指定されていません。代わりに value が指定されています。

input タグの中でも value に「買い物かごに入れる」が指定されている input ボタンに CSS を適用するという指定方法になります。

ノートPCを操作するビジネスマン

background でボタンの画像を指定、width と height で画像の幅と高さを確保します。「cursor:pointer;」ではマウスポインタを画像の上に載せた時にポインタを指にします。margin でボタン周りの余白を指定して見やすくしましょう。

hover の擬似クラスでは、マウスポインタをボタン上に載せた時、画像を薄くする指定をしています。よくありますね。

cssファイルを商品ページに読み込ませる方法

css を書いたはいいが、どうやって商品ページに css を読み込ませればいいのかという話になります。通常は、link タグで外部 css を読み込ませますね。

読み込ませる場所は、楽天 RMS のデザイン設定の「ヘッダー・フッター・レフトナビ」という項目のヘッター部分に css を読み込ませる link タグを読み込ませれば OK です。以下の様なものです。

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

CSS は GOLD スペースにアップロードして絶対パスで指定しましょう。

2015年10月、全店舗カートボタン画像共通化へ

楽天新カートボタン

2015年10月、楽天全店舗のショッピングカートボタンが楽天独自のものに共通化されました。上の画像の赤いボタンがそうです。個人的には今更かと思う程の遅い対応です。

しかし、ショッピングカートボタンが標準の店舗のみ画像になるのなら良いのですが、ご丁寧に既に店舗でショッピングカートボタンを独自カスタマイズしている店舗までまるっと上書きする対応です。

CSS を調べてみると以下のようになっています。

div#rakutenLimitedId_aroundCart input.rCartBtn, div#rakutenLimitedId_aroundCart input.rCartBtn[type="submit"]{
 background-image: url(http://image.rakuten.co.jp/com/img/rms/storefront/pc/page/btn01_212x68.png) !important;
 background-position: 0 0 !important;
 background-color: transparent !important;
 width: 212px !important;
 height: 34px !important;
 border-style: none !important;
 color: rgba(0,0,0,0) !important;
 text-indent: 200% !important;
 display: inline-block !important;
 white-space: nowrap !important;
 overflow: hidden !important;
 padding: 0 !important;
 margin: 10px 0 0 0 !important;
 border-radius: 3px !important;
 font-size: 100% !important;
 box-shadow: none !important;
 float: initial !important;
 filter: none !important;
 background-size: 100% !important;
 line-height: 1 !important;
 -webkit-transition: initial !important;
 transition: initial !important;
 vertical-align: initial!important;
}

!important が使われています。これは、CSS を優先的に適用する設定です。その為、店舗独自でカスタマイズしていても楽天の CSS が優先的に適用されてカスタマイズが無効になってしまうのです。

楽天ショップでカートボタンを変更するなと言いたいのかと思いきや、変更が規約違反などという表記も見当たらないので楽天独自のカートボタンを更に上書きする方法を模索してみました。

2015年末版、カートボタンを画像にする方法

div#rakutenLimitedId_aroundCart input.rCartBtn, div#rakutenLimitedId_aroundCart input.rCartBtn[type="submit"]{

1行めのこの記述を

body div#rakutenLimitedId_aroundCart input.rCartBtn, body div#rakutenLimitedId_aroundCart input.rCartBtn[type="submit"]{

このように変更して各店舗の Gold スペースにアップしている CSS に追記します。この中に店舗独自のショッピングカートボタンのカスタマイズを記入します。

違いは body が追加されている所です。CSS はより細かくセレクタを指定している方を優先するという特性を利用しています。body を付ける事によって楽天側の CSS より細かくセレクタを指定しています。

おわりに

楽天ショップに携われている方で、ボタンが標準のままであるのならやってみる価値はあると思います。

楽天商品ページカスタマイズ

  • Pocket

おすすめトピックス

関連記事

カートフォント
商用無料!様々なショッピングカートのデザインが揃っているフリーフォント

インターネットショッピングのサイトを作るなら必ず必要な「買い物カゴボタン」。お客様が商品を注文するために必要なボタンです。よく買い物かごに入れるという文字とともにショッピングカートのアイコンがあしらわれたボタンがよく使わ […]

Sold Out
あなたのショップは大丈夫?誤解を招く文言でお客様を逃しているかもしれません

日本語って難しいな。といつも切に思います。 例えば複数の必要条件があるキャンペーンをショップで打ち出す時、どのようにお客様にわかりやすくお伝えするか。本当に難しい事です。もちろん、長い文章で説明するのであれば簡単です。イ […]

ミニパソコン
売りたい商品のアピールは第一印象が重要である

ネットショップで商品を売りたいならまずは商品登録して各ショッピングモールへ出品します。今の時代、出品しただけでは売れません。 どこのショップでもいかに自分の商品を売るか考えられ実践されています。商品を売るために商品ページ […]

スマートフォン操作
楽天スマホ商品ページの画像制限が緩和!3枚から10枚までへ

楽天でインターネットショップを運営されている方に朗報です。かつては楽天のスマートフォン用商品ページには画像は3枚まで(高さは1200pxまで)という画像制限がありました。ようやく重い腰を上げてこの画像制限が2016年より […]

陳列された商品
【ネットショップ】商品が売れなくなってきた?それは当たり前です。

ネットショップで商品を出品していて、売上がだんだん伸び悩み落ちていく事に悩まれている方もいらっしゃると思います。もし何も施策を打っていないのであれば、それは当たり前です。 何もしなければ大概商品の売上は伸び悩んでいくもの […]

レスポンシブメールマガジンを遂に楽天がリリース、メルマガもスマホ対応を

2016年2月15日より楽天がレスポンシブメール機能をリリースしました。 レスポンシブメールとは一つのメールでパソコン、スマートフォンの両方に最適なメールマガジンを送る事ができる機能です。ただ両方に送るだけではなく、パソ […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
ラジオのAM/FMとはどういう意味か?

ラジオ放送には2種類ある事は多くの方がご存知かと思います。それ

美山鍾乳洞
大変珍しい立体迷路型鍾乳洞、岐阜県郡上市の「美山鍾乳洞」を探検

岐阜県郡上市にある美山鍾乳洞は日本最大級の立体迷路型鍾乳洞とい

スープカレー
こだわりのスープカレーが旨い岐阜県郡上市の老舗カフェ「アルピーヌ」でランチ

岐阜県の郡上八幡へ観光へ行った時に、郡上市でどこかランチができ

養老軒の大福
売切れ続出!独創的な絶品大福で有名な岐阜県川辺町の和菓子処「養老軒」

岐阜県加茂郡川辺町に存在する和菓子屋さん養老軒は独創的なフルー

モネの池の鯉
神秘的で青く美しい岐阜県関市の「モネの池」に行ってみた。最善の見頃は6月

Google マップで適当に色々な場所を見ていた所、偶然「Mo

→もっと見る