従来デザインを一新！楽天市場のスタイルシート活用法

2016.02.05
2016.03.31

2016年1月の記事です。楽天の仕様変更により、適用出来ない場合があります。

楽天としては意外や意外、GOLDページだけではなく、商品ページにも外部スタイルシートを適用出来ます。
まぁ貼らせる為なのかどうなのか分かりませんが、楽天のページテンプレートは、ミルフィーユもびっくりするくらいtableの入れ子だったり、ラップタグにはクラスやidを振らないとか準備されてる感はあります。

と思えば、インターフェース部分は案外クラス振ってたりするので、簡単にスタイルを変更出来、店舗らしい見栄えに変更する事も可能です。

スタイルシートの貼り方

適用方法はめちゃくちゃ簡単。
ただlinkタグで外部スタイルシートファイルを貼るだけ。
ただ、ファイルはGOLDサーバーに置く必要があります。

[html]
<link href="http://www.rakuten.ne.jp/gold/店舗ID/" rel="stylesheet">
[/html]

貼る場所

貼れる場所は、色々ありますが、一番管理しやすい『デザイン設定＞ヘッダーフッターレフトナビ』が妥当じゃないでしょうか？

複数デザイン設定使ってるけど、統一して入れたい場合等は、『共通説明文（大）』を利用するのもアリだと思います。

楽天インターフェースを独自に変更

さて、長くなりましたが、楽天のインターフェース…。

ちょっと自分のサイトには合わないなぁ。
なんかここ分かりづらいし見栄え変えたいなぁ。
特に理由は無いけど、変えたいなぁ。

なんて事ありませんか？
ありますよね？あるはずです！きっとそう！

そんな時上記の外部スタイルシートファイルを貼って、店舗らしさを出しましょう！

基本的な考え

スタイルシートの適用には優先順位があります。
要は、楽天側が指定しているスタイルシートより優先順位が高いスタイルを貼ってしまえばそちら側で表示されます。

スタイルシートの優先順位に関しては、またの機会にご紹介します。

よく見かけるレイアウト変更

今回は、ジェニーズトレーディングさんにご協力頂きました。
ありがとうございます！

商品名とキャッチコピー

例えば良く見るのは『キャッチコピー＆商品名の装飾』でしょうか。

次の画像を見てみて下さい。
何もしない状態がコレですが、ちょっと強弱が無くて見づらいですよね。

変更後のデザイン

商品名の境目が分かるように、ボーダーを追加し、文字の濃淡を付けてみたいと思います。
結果がこちらです。

もうちょっとカスタマイズ

更に差別化する為に、ボーダーを付けて余白も意識してみましょう。
こんな感じ。

どうですか？最初に比べて同じ調子で表示されているよりかは、文字が見やすくなったと思います。
ちなみに、文字の大きさと色は使いづらいですが、RMSの設定から変更出来ます(笑)

では商品名とキャッチコピーに適用されているスタイルシートを見てみましょう。
調べた結果こんな感じです。

キャッチコピーには『catch_copy』。
そして、商品名には『item_name』が振られている様です。

クラスが振られていたらもうこっちのもんです。
外部スタイルシートでスタイルを適用してやりましょう。

[css]
/*
* キャッチコピー＆商品名。
*/
.catch_copy, .item_name
{
/* ブロック要素に変更 */
display: block;

/* 左側に黒の縦線を入れる */
border-left: 5px #000 solid;

/* 黒の縦線との間の余白 */
padding-left: .5em;
}
/*
* キャッチコピー。
*/
.catch_copy
{
/* 商品名との間に余白を入れる */
padding-bottom: 1em;

/* フォントの大きさを規定値に */
font-size: 1em;
}
/*
* 商品名。
*/
.item_name
{
/* 文字の色をグレーにする */
color: #777;

/* フォントの大きさを若干小さくする */
font-size: .875em;
}
.item_name > b
{
/* 太字を細字にする。 */
font-weight: normal;
}
[/css]

これで、違う装飾が出来ました！
スタイルシートが分かる方でしたら、もっと思い通りのデザインで表現する事が可能ですね。

お買い物カゴやお気に入りボタン。

こちらは商品名等と違い、楽天側がスタイルシートを設定しています。
なので、商品名やキャッチコピーと違い、スタイルシートの優先順位を意識して適用する必要があります。

まず次の画像を見てみて下さい。
上画像の通常デザインから、下画像のデザインにしてみましょう。

通常のデザイン

変更後のデザイン

ボタンを大きくし、フラットボタンにしてみました。
押しやすくて見やすいと思います！

スタイルを確認。

まずこの要素にかかっているスタイルシートを確認して見ましょう。
見方は色々とありますが、僕はGoogleChromeの『要素を検証』を使用しています。
リアルタイムにスタイルの変更も可能なので、デバッグツールとして非常に優秀です。

例としてお気に入り商品に登録の一部を見てみましょう。

[css]
/*
* bookmark-3.1.4_nrs.css
*/
div.bookmarkArea div.bkm a.addBkm span.bkmStar {
display: inline-block !important;
width: 125px !important;
height: 28px !important;
margin-right: 4px !important;
background: url(../img/btn_item_nrs.gif?20150427) no-repeat 0 0 !important;
cursor: pointer !important;
}
[/css]

他にも細かくありますが、主に見栄えの部分を装飾している部分のセレクタは『div.bookmarkArea div.bkm a.addBkm span.bkmStar』の部分の様です。

簡単にいってしまえば、これよりレベルの高いセレクタで適用してあげればスタイルを変更出来ます。

この場合、『!important』もついていますが、こちらの外部スタイルシートファイルの貼りつけ場所が、楽天指定のスタイルシートファイルよりも後ろになりますので、こちらも『!important』を付けてあげれば変更可能です。

変更スタイルの例がコチラです。

[css]
/*
* お気に入り商品に登録ボタン。
*/
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm a.addBkm span.bkmStar
{
/* 横幅を絶対指定 */
width: 255px !important;

/* 高さを絶対指定 */
height: 38px !important;

/* 下の余白以外を0に絶対指定 */
margin: 0 0 10px !important;

/* 背景画像を絶対指定 */
background: url(‘../images/cart-favorite_item.png’) #000 0 50% no-repeat !important;
}
/*
* マウスオーバー時。
*/
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm a.addBkm span.bkmStar:hover
{
/* カーソルのタイプ */
cursor: pointer;

/* 背景をダークグレーに */
background-color: #333 !important;
}
[/css]

従来の設定されている『div.bookmarkArea div.bkm a.addBkm span.bkmStar』のセレクタの上に『#rakutenLimitedId_aroundCart』を追加する事で、優先順位を上げています。
これでお気に入り商品に登録のボタンをフラットボタンに変更出来ました！

他にもお気に入りショップに登録や買い物カゴに入れるボタン等も、適切なスタイル適用で店舗に合わせてデザインに変更する事が可能ですよ。