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

楽天お買い物カゴを綺麗に!カート回りのCSSデザイン。

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

Sponsored Link

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

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

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

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

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

楽天お買い物カゴを綺麗に!カート回りのCSSデザイン。
今回もサクサク行きます。続いてレビュー記入ボタンとレビューを読むボタンです。

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

楽天お買い物カゴを綺麗に!カート回りのCSSデザイン。
問題がなければ、このような形に変更ができたかと思います。

反映後のイメージは、弊社の運営する楽天サイトで実装済みのサンプルからご確認いただけます。

最後に

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

ララバイ!!

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

ショップ運営でお悩みの方へ。

BILLIONPLAN JAPAN Co, Ltd

ネット通販やウェブ制作、ECサポート事業を行っている(株)ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。

ショップ運営のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

または、お電話でも承ります。
 10:00 - 19:00(土日祝休み)

06-6271-7761

ABOUT ME

ぜぇれさんデザイナーTwitter:@zeelesan
加古川在住WEBデザイナー。楽天/ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事した後、ビリオンプラン立ち上げに参加。時計・雑貨のFLOAT運営担当。ご相談はこちらより。グランブルーファンタジーやりましょ!! →記事一覧
Sponsored Link

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

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

follow us in feedly

6 Comments(Trackback)

kato

はじめまして。いつも素敵なデザインを参考にさせていただいております。
楽天ページに早速実装してみたんですが
http://item.rakuten.co.jp/selectshopms/015-017wake-/
一部のボタン画像が若干圧縮されたようなぼやけた感じになってしまいます。
あと、問い合わせとレビュー記入の空間を作りたいのですが方法は御座いますか?
テンプレートから画像サイズを変更して使用させていただいたのでどの部分を修正すればいいのか少しわからずで。
教えていただけると幸いです。

Reply
ぜぇれさん

katoさん、コメントありがとうございます。
初めまして、ぜぇれさんです。

ページを確認させていただきました。
アパレルバズさんの場合、問い合わせとレビューの間に隙間を入れるには

http://www.rakuten.ne.jp/gold/selectshopms/css/cart.css
こちらのCSSの46行目の指定に

margin-bottom:任意px !important;
を追記することで解決できるかと思いますよ!

また画像が若干圧縮…というところがどの部分かわかりませんでした。
文字が若干荒れている印象を受けましたがそのあたりのことを言っているんでしょうか?
詳しく教えていただけると助かります!

Reply
kato

ありがとう御座います。空間は早速追記することで解消いたしました!

画像の件ですが、かごに入れるボタンとレビューをみるボタン、問い合わせボタンの文字がぼやけてしまっている部分です。

Reply
ぜぇれさん

こんにちは。
クロームとファイアフォックスでは正常に表示されていますね。

おそらくIE側の問題だと思います。
ぼやけているのを解消したい場合は。
border-radius: 0 !important;
を記入することで、角丸は消えてしまいますが一旦は解決できますよ!

Reply
まつ

こんにちは。
参考にさせていただいております。
画像はきちんと表示されているのですが、
もともと表示されている「商品レビューを見る」などの文字が画像の上に重なってしまいます。
どうしたら良いのでしょうか?

Reply
ぜぇれさん

まつさん初めまして、こんにちは。

画像は背景画像を使用して表示していますので、
コンテンツ内のテキストがそのまま残ってしまっているのでしょうね。

そのテキストかぶりを解消するために
text-indent:-9999px !important;

このようにテキストをずらすCSSを指定してあげる必要があります。
問題が発生しているページを確認できていないので正確にお答えすることはできませんが、
対象の要素に上記のようなCSSを追記していただければ解消できると思いますよ!

店舗デザイン頑張って下しあ!

Reply

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です