*

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

関連記事

楽天RMSでの消費税の変更方法

4月1日から消費税率が8%に変更になりますが、 1月27日現在の発表では楽天市場では消費税は自動で

記事を読む

楽天スマホページでヒートマップを導入して改善

ヒートマップとは、ユーザーがどのように行動したか、可視化してくれるツールです。 以下のように、どこ

記事を読む

no image

楽天RMSでも出来るGoogle,YahooのSEO対策【1】

楽天ショップの場合、楽天サーチなど楽天サービスからの集客を意識しがちですが、rakuten.co.j

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

お荷物伝票番号付きURLの発送メールへの入れ方 楽天RMS対応

配送状況に関する問い合わせを減らすには? ネットショップでよくあるお問い合わせの一つが、配送状況の

記事を読む

no image

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

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

記事を読む

Comment

  1. かっちん より:

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

Message

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

RPP(楽天 検索連動型広告)で商品を除外する方法

楽天RPP(キーワード広告)でパフォーマンスレポートの見方はこちらのR

RPP最初の画面
RPPパフォーマンスレポートの新規、既存などの意味は?

楽天RPP(キーワード広告)を運用していく上で大事なのは、成果を見て改

no image
RPP(楽天キーワード広告)の平均ROASは?

楽天では、RPP(楽天プロモーションプラットフォーム)という検索画面に

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

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

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

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

→もっと見る

PAGE TOP ↑