*

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

関連記事

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

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

記事を読む

no image

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

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

記事を読む

楽天RMSの納期を一括設定するには【2月29日まで】

楽天の週間サポートニュースなどでも告知されていますが、2015年1月13日から商品ごとの納期情報の設

記事を読む

no image

楽天ショップのショップ内サーチのカスタマイズ

楽天ショップで設置できる店舗内検索について 店舗内検索のフォームは実は裏側でいろいろなパラメータを

記事を読む

楽天RMSの項目選択肢別在庫に出る納期のデザインを変更

項目選択肢別在庫の納期情報の文字色・サイズなどの変更 1月13日から楽天では納期情報が必須になるた

記事を読む

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

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

記事を読む

楽々商品登録 関連商品イメージ

楽々商品登録君のカスタマイズ事例(1)

弊社で販売している多モール商品登録ソフト、楽々商品登録君のカスタマイズ事例です。 キッチンジャンル

記事を読む

no image

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

楽天Goldを使っている場合のSSL修正の手順 YahooショッピングのSSL対応に続いて、楽天市

記事を読む

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

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

記事を読む

楽天ディレクトリID(商品ジャンル)とタグIDの変更

楽天ディレクトリID(商品ジャンル)とタグIDの変更の影響について 2014/05/18に楽天の全

記事を読む

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 ↑