*

楽天RMSのページをスタイルシートでカスタマイズ

公開日: : 楽天RMS, 楽天ショップのデザイン


簡単にスタイルシートで楽天RMSページをカスタマイズできる方法

前回、楽天RMSの項目選択肢別在庫に出る納期のデザインを変更する手順を記載しましたが、楽天のページは納期情報に限らず楽天ページはスタイルシートでカスタマイズすることが出来ます。

スタイルシートでカスタマイズする際に、HTMLのソースを見てどのようなタグ構造になっているか調査して設定する方法もありますが、その方法だと手間もかかりますしミスも増えます。
そこで、HTML構造が自動で解析できる手順と、簡単にスタイルシートを当てはめる方法をご案内します。

事前設定

まずHTMLを調査するため、Firefoxのアドオンを導入します。
※Firefoxをインストールしてない場合は、こちらからダウンロードしてインストールしてください。
Firefoxを起動した状態で、こちらのWeb Developerアドオン ページを開き、Add to Firefoxボタンを押します。

設定したい部分の調査

アドオンをインストールしたらFirefoxを再起動します。
Firefoxを起動してチェックしたいページを開いたら、メニューバーのCSS→CSS情報を表示をクリックします。
0116-1

調べたい場所をクリック

0116-2

祖先セレクタのパスをコピーをクリック

0116-4

メモ帳などに貼り付ける

0116-5
このように、どのようなHTML構造になっているか分かります。
このタグのHTMLの構造で、 一番最後のタグは fontになっています。
fontで設定すると他のfontタグで記載した部分にも影響が出てしまうので、 一つ上のClass名が入った欄から設定したら、ページがおかしくなりにくいです。
※.となっているのはClass要素、#となっているのはID要素です。
それぞれの意味はTagIndexのサイトでどうぞ。

>の部分は不要なので削除し、半角スペースでつなぐと、
<td> class=”inventory”><font>にスタイルシートを適用する、という意味になります。
従って、CSSに記載する内容は以下のようになります。

<style TYPE="text/css">
<!--
td.inventory font{CSS内容;}
-->
</style>

あとはこの内容を共通説明文(大)などに入力します。

通常在庫の納期情報をカスタマイズ

この手順で、通常在庫の納期情報を設定してみます。
HTML構造は、以下のようになっています。

 
html > body > div#pagebody > table > tbody > tr > td >
 table > tbody > tr > td > table > tbody > tr > td >
 table > tbody > tr > td > div#rakutenLimitedId_aroundCart.Firefox > 
table#normal_basket_10000723 > tbody > tr > td > font

一番最後がfontになっており、だいぶさかのぼると
table#normal_basket_10000723
というID指定の欄があります。
ただしこの欄は他のページでチェックしてみると、最後の_10000723の欄がページによって変わるので、一括指定には使えなさそうです。
そこで、tableのID指定の欄は使わないようにして、一階層上のdiv#rakutenLimitedId_aroundCart.Firefox欄を使ってみます。
なお.FirefoxというClass名はFirefox専用の可能性が高いので削除して、最終的にこのようになります。

<style TYPE="text/css">
<!--
div#rakutenLimitedId_aroundCart table tbody tr td font
{font-size:10px;color:#666666;}
-->
</style>

この内容を共通説明文(大)などに入れたら、一括変更が出来ます。

スタイルシートのチェック

最後の例でFirefox用の欄があったように、スタイルシートはブラウザによって見え方が変わることがよくあります。
新しくスタイルシートを設定したら、様々なブラウザでチェックしましょう。
特に、InternetExplorerは見え方が変わることが多いので注意してください。
IE8などの古いバージョンでもチェックすることをお勧めします。

関連記事

楽天Goldで作成したページのFacebook最適化(OGP設定)

楽天GoldページのFacebookへの対応の仕方-OGP 楽天Goldで作成したページも、Fac

記事を読む

no image

楽天ペイ(RMS)で効率的に受注管理するには?

楽天ペイは今までの受注管理、R-Backofficeと異なりステータス管理ができないなど使い勝手が異

記事を読む

no image

楽天Goldで自動ページ送りを実装

スマートフォン用サイトを楽天Goldで作るショップ様も増えてきましたが、スマホの回線速度が早くなった

記事を読む

ネットショップモール・ショッピングカートでしないといけない消費税対応(楽天・Yahoo・Amazonなど)

いよいよ4月1日より、消費税率が8%になります。 ネットショップでも消費税を変更しないといけま

記事を読む

スマホ用サイトへの転送を記憶させるJavaScript(楽天Gold用)

楽天Goldでページを作成している場合、レスポンシブデザインでないかぎり、 スマホでページを見てい

記事を読む

スマホ時代に合わせた楽天Goldページの最適化

楽天PCページのスマホ対策が大事だという事例。 スマートフォン対策を色々やった店舗様のGoogle

記事を読む

楽天、YahooなどのCSVをExcelで安全に開くには?

楽天やYahooショッピングなど、ネットショップの業務をやっていると「CSVデータ」がないと出来ない

記事を読む

楽天Goldで作ったページをモバイルフレンドリー対応にするには?

Googleが、2015年4月21日からスマートフォン対応していないサイトは検索での順位を落とすと発

記事を読む

楽天の買い物かごボタンをカスタマイズ

この記事の「買い物かごをカスタマイズする方法」は、2015年に楽天RMSのHTMLソースが変わったた

記事を読む

楽天R-Backofficeに受注CSVを戻すときの注意点

R-BackofficeにCSVアップロードで注文修正すると消費税が8%に! 楽天ネットショップで

記事を読む

Comment

  1. かっちん より:

    貴重な情報、有難うございます。
    大変助かりました!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

no image
楽天ペイ(RMS)で効率的に受注管理するには?

楽天ペイは今までの受注管理、R-Backofficeと異なりステータス

Yahooショッピング SEO(7)3月14日から低評価でペナルティ

Yahooショッピングで2017年10月に発表された、評価が悪いショッ

no image
楽天Goldのhttps:修正手順(SSL対応)

楽天Goldを使っている場合のSSL修正の手順 Yahooショッピン

no image
Amazonセラーセントラルの乗っ取り多発!二段階認証を

Amazonで詐欺出品者が急増中 Amazonセラーセントラルで、以

no image
Yahooショッピングの常時SSL(AOSSL)で厳密に置換したい場合

Yahooショッピングの常時SSL(AOSSL)、トリプルはどうするか

→もっと見る

PAGE TOP ↑