• 楽天
  • Yahoo!

楽天商品ページの色んなところにCSSを適用させる方法

楽天商品ページの色んなところにCSSを適用させる方法

お湯の過剰注入でインスタントなめこ味噌汁がサラサラの仕上がりになったときのやるせなさよ、オガリア中村です。

今回は楽天商品ページを好きにカスタマイズするときに必要な、「各要素のclass名」をご案内していきますー!

そもそも、class名ってなんだ

class名とは、HTMLで書く画像やボタンにつけておく目印の「名前」です。画面上には様々な画像やボタンがある為、画像Aはこのサイズ、画像Bはこのサイズ…と指示を分けたい場合は「名前」がふられていないと指示ができません。その為、

<img src="***.jpg" class="image_1">
<img src="***.jpg" class="image_2">

の様に class=”class名(英数字)” という形で各要素に名前をつけておきます。CSSはこの「名前」に対して、文字のサイズや色などの「指示」を書いていくイメージです。

/*image_1は幅100pxにする*/
.image_1 {
  width: 100px; 
}

/*image_2は幅50pxにする*/
.image_2 {
  width: 50px;
}

そのため、楽天側がふっている各要素の「class名」さえ分かれば、自分で書いたCSSの指示を適用できる、という仕組みです。(厳密性より分かり易さ重視で書いてます、あしからず)

商品ページ各要素のclass名

(※正確には、class名+階層情報を加えています。ここ辺りの仕組みは今回スルーします、、)

商品名/キャッチコピー

楽天商品ページの商品名・キャッチコピー
  • 商品名
    span.catch_copy
  • キャッチコピー
    span.item_name

価格

楽天商品ページの価格欄
  • 「価格」というタイトル
    span.price1
  • 販売価格
    span.price2
  • 税表記
    span.tax_postage
  • 送料表記
    span.tax_postage shippingCost_free

買い物かごボタン

楽天商品ページの買い物かごボタン
  • 「個数」タイトル
    div#rakutenLimitedId_aroundCart.standard span.unit
  • 「個数」入力欄
    div#rakutenLimitedId_aroundCart .rItemUnits
  • 買い物かごボタン
    div#rakutenLimitedId_aroundCart input.rCartBtn, div#rakutenLimitedId_aroundCart input.rCartBtn[type=”submit”]

商品番号

楽天商品ページの商品番号欄
  • 「商品番号」タイトル
    span.item_number_title
  • 商品番号
    span.item_number

CSSの基本的な書き方

HTMLの途中にCSS書く場合(=つまりRMSの中でCSSを書く場合)は、必ず次の記述でCSSを囲います。

<style type="text/css">
<!--

(ここに内容を書く)

-->
</style>


その後、「(ここに内容を書く)」 欄にclass名とCSSを書いていきます。
先程ご案内したclass名をそのままコピペしましょう(先頭に「.(ドット)」はつけなくて構いません)。class名の後ろには「{}」を必ずつけます。

<style type="text/css">
<!--

さっきのclass名{
  (ここにCSS詳細を書く)
}

-->
</style>


あとは、上記の「(ここにCSS詳細を書く)」へCSSの詳細を書き込んでいきます。例えば文字サイズを18pxにするなら…

<pre>
<style type="text/css">
<!--

さっきのclass名{
  font-size: 18px;
}

-->
</style>

こんな感じですね。CSSの詳細な書き方はここでは追いきれないので割愛しますが、「CSS 逆引き」とかで検索すれば情報は豊富に出ると思います。

CSSを書く場所は?

全商品ページに適用させたい場合は、
 ・ヘッダー
 ・レフトナビ
 ・フッター
 ・全ページ共通説明文(大)
のどれかに貼ればOKです。

CSSは記入の「場所・位置」によって表示のされ方に差異が出ることはありません。そのページに必ず読み込まれる場所に記入されていれば問題なく適用されます。

自分でclass名を調べる方法

google chrome」ブラウザを使えば簡単に調査できます。

  1. 気になる要素の上で右クリックして、「検証」メニューを押します。
    l_lbn_half
  2. 「Developer Tools」なるウィンドウが開きます。左側に閲覧中ページのHTMLソースが表示され、右クリックした要素のHTMLがハイライトされています。その中に「class="*****"」という記述があれば、それがclass名です。
    %e5%90%8d%e7%a7%b0%e6%9c%aa%e8%a8%ad%e5%ae%9a-2

「お買い物かご周り」を徹底カスタマイズするTipsまとめ

【楽天】「お買い物かご周り」を徹底カスタマイズするTipsまとめ
【楽天】「お買い物かご周り」を徹底カスタマイズするTipsまとめ

上記記事にて、商品ページ「お買い物かごに入れる」ボタン周りのカスタマイズTipsもご紹介しておりますー!記述の参考にもなりますので宜しければー!

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。