[4/5]お買い物カゴを綺麗に！楽天カート周りのCSSデザイン【レビューボタン編】

今回はレビュー記入＆レビューを読むボタンのデザイン方法をご紹介します！
第1回記事、第2回記事、第3回記事にて楽天カート周辺のボタンにデザインを加える方法をご紹介しました。
その続きとなる内容になっています。

こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです。
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです。

記事がなかなか長くなりますので、5つの記事に分けて要素別にご紹介しておりまーす！

• 1. 買い物カゴに入れるボタンをディテールアップ(第1回記事)
• 2. 商品問い合わせボタンをディテールアップ(第2回記事)
• 3. お気に入り登録ボタン＆お気に入り店舗登録ボタンのディテールアップ(第3回記事)
• 4. レビュー記入ボタン＆レビューを読むボタンのディテールアップ
• 5. 各種SNS投稿ボタンのディテールアップ(第5回記事)

※一言
楽天GOLD(無料)と契約していると便利。

それではやってみましょう。

4. レビュー記入＆レビューを読むボタンのディテールアップ

今回もサクサク行きます。続いてレビュー記入ボタンとレビューを読むボタンです。

<button type="submit" class="seeReview">商品レビューを見る（1件）</button>

対象となる要素はこちら！

<a href="http://review.rakuten.co.jp/wd/2_311213_10001601_0/?l2-id=item_review_write_A" class="write">レビューを書く</a>

とこちら！

いつもどおりボタン画像を用意します。
サンプル画像は自由にご利用ください。
レビューを書く（背景）とレビューを書くとレビューを見る

そして以下のCSSを適用します。

/* レビュー記入ボタン */
#rakutenLimitedId_aroundCart #serviceTableSml .review {
	width: 490px !important;
	height: 135px !important;
	padding:15px 0 0 20px !important;
	background: url(../../img/base/cart_review_bg.png) no-repeat !important;
	color:#610b8a !important;
}

body #rakutenLimitedId_aroundCart .seeReview {
	display:inline-block !important;
	background: url(../../img/base/btn_review_see.png) no-repeat !important;
	text-indent:-9999px !important;
	width:490px !important;
	height:50px !important;
	padding:0 !important;
	margin-right:3px;
}

body #rakutenLimitedId_aroundCart #serviceTableSml .review .write {
	display:inline-block !important;
	background: url(../../img/base/btn_review_write_mini.png) no-repeat !important;
	text-indent:-9999px !important;
	width:220px !important;
	height:50px !important;
	padding:0 !important;
}

body #rakutenLimitedId_aroundCart #serviceTableSml .review .see:last-child {
	display:inline-block !important;
	background: url(../../img/base/btn_review_write_mini.png) no-repeat !important;
	text-indent:-9999px !important;
	width:220px !important;
	height:50px !important;
	padding:0 !important;
	margin-right:3px;
}

body #rakutenLimitedId_aroundCart #serviceTableSml .review .see {
	display:inline-block !important;
	background: url(../../img/base/btn_review_see_mini.png) no-repeat !important;
	text-indent:-9999px !important;
	width:220px !important;
	height:50px !important;
	padding:0 !important;
	margin-right:3px;
}

/*Firefoxだけに適用されるCSSハック*/
@-moz-document url-prefix() {

body #rakutenLimitedId_aroundCart #serviceTableSml .review .write {
	display:inline-block !important;
	background: url(../../img/base/btn_review_write_mini.png) no-repeat !important;
	text-indent:-9999px !important;
	width:220px !important;
	height:50px !important;
	padding:0 !important;
	margin-right:3px;
}

}

/*IE10以降に適用されるCSSハック（暫定）*/
@media all and (-ms-high-contrast:none){

body #rakutenLimitedId_aroundCart #serviceTableSml .review .write {
	display:inline-block !important;
	background: url(../../img/base/btn_review_write_mini.png) no-repeat !important;
	text-indent:-9999px !important;
	width:220px !important;
	height:50px !important;
	padding:0 !important;
	margin-right:3px;
}

}

※7/2に追記
このレビューを見る、レビューを書くのボタンについて、
ここ最近ちょくちょくリニューアルが図られているようです。
ブラウザごとにクラスの振り方が違ったり、ソースコードが違ったり、
突然変更が行われたりということを確認しています。
実装する際には注意が必要です。

問題がなければ、このような形に変更ができたかと思います。

最後に

さてカート周辺のデザインTIPSも残すところあと1回となりました。
こういう細かいデザインって気づかない人も多いかもしれませんが、
細部がきれいになっていくさまは気持ちいいし嬉しいよね！
拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。

ララバイ！！

• 1. 買い物カゴに入れるボタンをディテールアップ(第1回記事)
• 2. 商品問い合わせボタンをディテールアップ(第2回記事)
• 3. お気に入り登録ボタン＆お気に入り店舗登録ボタンのディテールアップ(第3回記事)
• 4. レビュー記入ボタン＆レビューを読むボタンのディテールアップ
• 5. 各種SNS投稿ボタンのディテールアップ(第5回記事)

楽天サイトでフルスクリーン商品ページをつくる！背景画像を使ったデザインの方法。

こちらの記事もどうぞ

ABOUT ME

ぜぇれさん外部デザイナーTwitter:@zeelesan

兵庫在住WEBデザイナー。楽天／ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧

Recent Posts

• 2016.04.18ECたったの1行！ヤフーでもお買物カゴを外部化！複数のカゴボタンを設置する方法。
• 2016.04.13EC楽天お買物カゴを外部化！複数のカゴボタンを設置する方法。
• 2016.02.04EC独自カートで差別化！Yahoo!ストアのカート周りをCSSでデザインする方法。
• 2016.01.14ECデフォルト表示をデザイン！Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。

Tweet

[3/5]お買い物カゴを綺麗に！楽天カート周りのCSSデザイン【ブックマークボタン編】

[5/5]お買い物カゴを綺麗に！楽天カート周りのCSSデザイン【SNS投稿ボタン編】

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね！」や「フォロー」をお願いします。

Follow @BILLIONPLAN_JP

ビリオンプラン・ジャパン