【楽天RMS裏技】禁止タグを使ってCSSやiframe、jsファイルを読み込む方法
楽天市場はGOLD部分では自由に作りこむことができる反面、RMS上のデザイン部分には禁止タグが多く自由度が低い。
PC版はまだヘッダー、フッター、レフトナビでGOLDで造ったパーツを読み込めますが、特にスマホデザインはそうもいきません。
しかし、実は楽天RMSの制限を回避して楽天市場上で禁止タグを使う方法があるのです。
楽天RMSの禁止タグ制限を突破する方法
タグの<>内に 「 ="" 」や全角スペースを11個入れることでRMS上で禁止されているタグを利用することができます。
全角スペースの数は13個とか18個とか諸説ありましたが、11個で動作確認済みなので11個でいいかと。無駄に増えるとミスが増えますし。
例えばiframeタグやCSSの読み込みにくわえ、class=""タグも使うことも可能。これによってかなりアグレッシブにページを作りこむことが可能です。
禁止タグ突破裏技の実装コード例
// CSS <link rel="stylesheet" ="" href="https://www.rakuten.ne.jp/gold/○○○/css/○○○.css"> // iframe <iframe frameborder="0" scrolling="no" src="https://www.rakuten.ne.jp/gold/○○○/iframe/○○○.html" width="適宜" height="適宜" =""></iframe =""> // Javascript <script src="jsファイルURL" type="text/javascript" =""></script > // 画像にクラスをつける <img src="画像URL" class="クラス名" >
裏技の使い道
これ、楽天RMSデザイン項目の中でも特に自由度の低いスマホ用のページなんかでかなり役に立つ裏技です。
スマートフォン デザイン設定内の
- 商品ページ 共通パーツ設定
- カテゴリページ 共通パーツ設定
にCSSファイルやiframe要素を置くことでかなり自由度高くカスタマイズができます。
スマホサイトでも独自のヘッダーやフッター、固定バナーなどを表示させているお店は大抵この裏技を使って複雑なコーディングを実現しています。
Javascript自体は入れずとも、iframeの中でJavaScriptを動かすのもあり。
ですが、iframe用のhtmlファイルを置くGOLDとそのhtmlを読み込む商品ページやカテゴリーページなどとではドメインが違うんです。
クロスドメインになってしまうため、iframeの中で読み込んだJavaScriptやjQueryでiframeの外側にある要素をいじるのは無理っぽい。
（反対にiframe外からiframe内の要素を動かすのも難しい）
素直に、必要であればHTMLの内とRMS側とでそれぞれにjsファイルを置きましょう。
「 許可されていないURLの記載があります 」と出る場合。
2017年より、楽天市場は常時SSL化され楽天市場上のほぼ全てのURLがhttp://からhttps://に変更になりました。
一時は経過措置で問題ありませんでしたが、2017年10月頃よりチラホラとhttp://と入力した画面で「 許可されていないURLの記載があります。 」とエラーが出て弾かれるとの報告が上がっています。
上記裏技タグで突破できない場合、楽天市場上のファイルを読み込んだりアンカーリンクを張る際にURLが http:// のままになっていないかチェックしてみてください。
楽天RMSのタグ規制の突破方法 まとめ
- スマホの商品ページ、カテゴリーページなどのデザイン部分では一部タグが使用制限されている。
- しかし、禁止タグの<>内に「 ="" 」や全角スペース11個を入れることで制限をすり抜けることができる。
先にも書きましたが、この禁止タグ突破裏技は特にタグ制限の厳しいスマホの商品ページやカテゴリーページにて複雑なコーディングを実現するためによく使われています。他にはPC版の商品ページやカテゴリーページの各要素（パンくずや商品名、商品価格部分など）にCSSを効かせてデザインしたり。
また、CSSを噛ますことで楽天市場の共通パーツを強制的に非表示とすることも可能です。一応規約違反なのでしょうが、よほどアウトなヤツ（楽天共通のパーツを隠すとか）でもない限りそうそう怒られません。大抵は怒られても元に戻せばオッケーだけですし。
デザインの自由度がかなり増しますので、楽天さんの逆鱗に触れない程度でぜひいろいろ試してみてください。