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

2016/09/23

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

今回は楽天商品ページを好きにカスタマイズするときに必要な、「各要素の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名＋階層情報を加えています。ここ辺りの仕組みは今回スルーします、、)

「個数」タイトル
div#rakutenLimitedId_aroundCart.standard span.unit
「個数」入力欄
div#rakutenLimitedId_aroundCart .rItemUnits
買い物かごボタン
div#rakutenLimitedId_aroundCart input.rCartBtn, div#rakutenLimitedId_aroundCart input.rCartBtn[type=”submit”]

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　逆引き」とかで検索すれば情報は豊富に出ると思います。

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

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

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

気になる要素の上で右クリックして、「検証」メニューを押します。
「Developer Tools」なるウィンドウが開きます。左側に閲覧中ページのHTMLソースが表示され、右クリックした要素のHTMLがハイライトされています。その中に「class="*****"」という記述があれば、それがclass名です。