どうもこんばんは！HYPのこうじです。

以前に一度楽天サイトのデザインをアレンジする記事をご紹介させて頂きました。

今回は、そんなスタイルシートでアレンジ可能な部分の中で、使えそうなデザイン指定をピックアップしてみました！
スタイルシートプロパティの簡単な知識は必要ですが、これを使って自分のサイトらしさを表現できるデザインに変更しましょう！

商品ページ

参考に使わせて頂いたサイトは、アメカジアイテムで有名なCulture Mart(カルチャーマート)さんのサイトです！
ありがとうございます！

Culture Mart(カルチャーマート) 楽天市場店

商品名

[css]
span.item_name
{
/* スタイルシート */
}
[/css]

キャッチコピー

[css]
span.catch_copy
{
/* スタイルシート */
}
[/css]

モバイル用商品画像

[css]
#pagebody .rakutenLimitedId_ImageMain1-3
{
/* スタイルシート */
}
[/css]

モバイル用商品画像の○枚目を指定

『nth-of-type(指定数)』の指定数に指定したい枚数目の数字を入れてください。
[css]
#pagebody .rakutenLimitedId_ImageMain1-3:nth-of-type(指定数)
{
/* スタイルシート */
}
[/css]

商品番号

[css]
.item_number
{
/* スタイルシート */
}
[/css]

表示価格

[css]
#rakutenLimitedId_cart td > .double_price
{
/* スタイルシート */
}
[/css]

表示価格名

[css]
#rakutenLimitedId_cart td > .double_price_title
{
/* スタイルシート */
}
[/css]

販売価格

[css]
#rakutenLimitedId_cart td > .price2
{
/* スタイルシート */
}
[/css]

価格

[css]
#rakutenLimitedId_cart td > .price1
{
/* スタイルシート */
}
[/css]

税込み＆送料別

[css]
#rakutenLimitedId_cart td > .tax_postage
{
/* スタイルシート */
}
[/css]

別々にしたい場合

[css]
/* 消費税 */
#rakutenLimitedId_cart td > .tax_postage:nth-of-type(1)
{
/* スタイルシート */
}

/* 送料 */
#rakutenLimitedId_cart td > .tax_postage:nth-of-type(2)
{
/* スタイルシート */
}
[/css]

ポイントゲット

[css]
#rakutenLimitedId_cart .pointGet
{
/* スタイルシート */
}
[/css]

ポイントゲットの手前になんか入れたい場合

[css]
#rakutenLimitedId_cart .pointGet:before
{
/* スタイルシート */
}
[/css]

項目選択肢のタイトル (セレクトボックス)

[css]
#rakutenLimitedId_aroundCart span.choice
{
/* スタイルシート */
}
[/css]

項目選択肢のセレクトボックス

[css]
#rakutenLimitedId_aroundCart select[name = "choice"]
{
/* スタイルシート */
}
[/css]

納期テキスト

フォントサイズとカラーの値はRMS基本設定の文言設定を同じにして下さい。
この例ではフォントサイズ=3、カラーが#FF0000で設定しています。

[css]
#rakutenLimitedId_aroundCart font[size="3"][color="#FF0000"]
{
/* スタイルシート */
}
[/css]

個数フォーム

!importantを付ける必要があります。

[css]
div#rakutenLimitedId_aroundCart #units.rItemUnits
{
/* スタイルシート */
}
[/css]

個数のテキスト

[css]
div#rakutenLimitedId_aroundCart.standard span.unit
{
/* スタイルシート */
}
[/css]

かごに入れるボタン

!importantを付ける必要があります。

[css]
body div#rakutenLimitedId_aroundCart input.rCartBtn, div#rakutenLimitedId_aroundCart input.rCartBtn[type="submit"]
{
/* スタイルシート */
}
[/css]

お気に入り商品に登録

!importantを付ける必要があります。

[css]
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm a.addBkm span.bkmStar
{
/* スタイルシート */
}
[/css]

お気に入りショップに登録

!importantを付ける必要があります。

[css]
#rakutenLimitedId_aroundCart div.shopBookmarkArea div.shopBkm a.addShopBkm span.shopBkmStar
{
/* スタイルシート */
}
[/css]

お問い合わせボタン

!importantを付ける必要があります。

[css]
#pagebody #rakutenLimitedId_aroundCart button.rAskBtn
{
/* スタイルシート */
}
[/css]

レビューを書くボタン

!importantを付ける必要があります。

[css]
#pagebody #rakutenLimitedId_aroundCart #serviceTableSml .review a.write
{
/* スタイルシート */
}
[/css]

友達にメールですすめるボタン

!importantを付ける必要があります。

[css]
#pagebody #serviceTableSml div.susumeruWidget div.susumeruParts ul.first li.iconMail
{
/* スタイルシート */
}
[/css]

アイコンのみの指定

[css]
#pagebody #serviceTableSml div.susumeruWidget div.susumeruParts ul.first li.iconMail > .susumeruServiceButton
{
/* スタイルシート */
}
[/css]

あす楽テキスト

!importantを付ける必要があります。

[css]
#pagebody #rakutenLimitedId_aroundCart div.riMb10
{
/* スタイルシート */
}
[/css]

『この商品を買った人は、こんな商品にも興味を持っています』のコンテナ

!importantを付ける必要があります。

[css]
#rakutenLimitedId_inshop_recommend
{
/* スタイルシート */
}
[/css]

タイトルの指定

[css]
#rakutenLimitedId_inshop_recommend .titleH2
{
/* スタイルシート */
}
[/css]

ヘッダーのあす楽対応テキストのコンテナ

内包されているすべてのボックスに適用しています。

[css]
[align="center"]>table[width="740"],
[align="center"]>table[width="740"] table,
[align="center"]>table[width="740"] tbody,
[align="center"]>table[width="740"] td,
[align="center"]>table[width="740"] tr
{
/* スタイルシート */
}
[/css]

カテゴリーページ

商品一覧のコンテナ

[css]
#pagebody table table table td[width = "630"]
{
/* スタイルシート */
}
[/css]

商品一覧の値段

[css]
#risFil span.category_itemprice
{
/* スタイルシート */
}
[/css]

送料、消費税

[css]
#risFil span.category_itemtaxpostage
{
/* スタイルシート */
}
[/css]

在庫無しテキスト

[css]
#risFil span.not
{
/* スタイルシート */
}
[/css]

終わり

なんかコレ…ピックアップしてたらキリがないですね(笑)
もし実際試して反映されなかった！なんて方は僕の入力間違いの可能性もあるのでご連絡いただければ記事を見直します。

とりあえず『なんか、使えそう！』や、実際に僕が使っているデザイン更新が可能な箇所をピックアップしてみました。
楽天は外部スタイルシートが許容されているので、デザインの設定は無限大です！

色々とカスタマイズできるところを探して、あなたのストアらしさを表現するのも楽しいかもしれませんね！

こちらの記事でも簡単なカスタマイズ設定例をピックアップしていますので、合わせて御覧になってみてくださいね。