楽天RMS：css等を有効にする方法

• 2017/12/17
• 楽天ショップ

ここ数年楽天RMSを使用する作業(楽天ショップでのデザイン作業)が増えて来たのですが、色々とトラブルが耐えず、その都度とっていたメモが溜まって来たので整理がてら色々書いていきます。

その第一弾。まず最初に楽天RMSで直面した問題が、『cssが普通に使えない！！』ということだったのですが、裏技でなんとかできるようになるので、まずは『楽天RMSでのcss等を有効にする方法』を。

楽天RMSで、css等を有効にする方法

PC(パソコン)、SP（スマートフォン）で方法が違うので、まずはPCから。

『PC』で外部css（楽天GOLD内）を読み込む方法

デザイン設定／■テンプレート設定→ヘッダー・フッター・レフトナビ／■テンプレートの編集・削除→任意の名前（自動選択）／■テンプレートの編集→HTMLタグの挿入→ヘッダーコンテンツ

に以下のcssを読み込む記述を書きます。

<link rel="stylesheet" href="https://www.rakuten.n.ne.jp/gold/●●/css/〇〇.css">（〇〇.cssは自分が読み込みたいcssに変更）

これでこの〇〇.cssは全体に効くようになるので、あとはidなりclassの記述を本文に付け足していけばOKです。ただ楽天RMSでは、楽天以外のURLヘの誘導ができないので、この方法は楽天GOLDに登録し、FTPで楽天GOLD内にcssをあげれる方のみ、有効な方法となりますので、そこは注意してくださいね。

ちなみにSPではこれは読み込まれないため、SPでは以下記述をしてください。

『SP（スマホ）』で外部cssを読み込む方法

SPでは制限が多すぎて、裏技を使わなければほぼなにもできません。ですので、制限された『article, H1等の禁止タグの使用』、『id, classの使用』、『使用できない外部css（楽天GOLD内）の読み込み』を可能にする方法を。

『article, H1等の禁止タグの使用』、『id, classの使用』を可能にする方法

『 =””（イコールチョンチョン!!）』を閉じタグの前に置く！

これでOKです。ちなみにこの前には『要半角スペース!!』です。例としては、

禁止タグを使う場合

<atricle =""></article ="">　<h1 =""></h1 ="">　<ul =""></ul ="">  etc.　

id, classを使う場合

<div id="" class=""  =""></div ="">

iframeを入れる場合

<iframe src="＃" scrolling="no" frameborder="0" =""></iframe ="" ="">

こんな感じになります。

ちなみに、『 =””』の代わりに、スペースを13個？だったかな？を置く方法もありますが、文字数制限が厳しい楽天RMSでは、この『 =””』の方が実用的ですので、こちらの一択ですね。スペースだと、いちいち数えたり確認したりするのも大変ですしね。

『使用できない外部css（楽天GOLD内）の読み込み』を可能にする方法

これはPCとは少し違って、cssを読み込む以下の記述を、

<link rel="stylesheet" href="https://www.rakuten.n.ne.jp/gold/●●/css/〇〇.css" ="">

『スマートフォン用商品説明文』の欄の最初に書けばOKです。パスは変更してくださいね。

注意点

楽天のiPhone専用のcssがたまに邪魔します。記述としては以下のものです。

article {
  display: none;
  overflow-x: hidden;
}
#itemDescription img {
  display: block !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

など。

なので、スマホの場合は、

<div id="sp">
　ここに商品内容等
</div>

のように、全体をdivでくくって、id=”sp” をつけて、

#sp article{display: block!important}

として対応します。imgの場合は、

<p class="mr15" ="">
  <img src="https://www.rakuten.n.ne.jp/gold/●●/00000.jpg" alt="" class="" ="">
</p ="">

のように＜p＞でくくって、それにclassをつけて対応しています。

仕様変更等があれば、また追記したいと思います。