- 楽天
- Yahoo!
楽天商品ページの色んなところに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」ブラウザを使えば簡単に調査できます。
- 気になる要素の上で右クリックして、「検証」メニューを押します。
- 「Developer Tools」なるウィンドウが開きます。左側に閲覧中ページのHTMLソースが表示され、右クリックした要素のHTMLがハイライトされています。その中に「class="*****"」という記述があれば、それがclass名です。
「お買い物かご周り」を徹底カスタマイズするTipsまとめ
【楽天】「お買い物かご周り」を徹底カスタマイズするTipsまとめ
上記記事にて、商品ページ「お買い物かごに入れる」ボタン周りのカスタマイズTipsもご紹介しておりますー!記述の参考にもなりますので宜しければー!
■お役立ち情報■ 素早く簡単に、ショップの「スマホ用ページ」を作成するには?
ドラッグ&ドロップの操作だけでスマホページを簡単作成!
ogaRia「スマホページくみたて君」を使えば、数分でスマホページが作れます!
HTMLを編集したり、楽天GOLDにファイルをアップロードしたり。。。ちょっと敷居が高いかも。。
という方は「スマホページくみたて君」をぜひご利用下さい!
ドラッグ・アンド・ドロップの操作だけで、さまざまなパーツを配置できます。
スマホページのテンプレートも複数ご用意しています。

<二ヶ月無料で利用できる!>
最大二ヶ月の無料トライアルで、「スマホページくみたて君」や、その他便利ツールもお試しできます。
