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

公開日： 2015/01/16 : 楽天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などの古いバージョンでもチェックすることをお勧めします。