【RMSの裏技】禁止タグを使ってCSSやiframe、jsファイルを読み込む方法

   2017/10/15

楽天RMSの禁止タグ制限を突破する方法

楽天RMSにHTMLタグやCSS、JSなどを読み込む方法

楽天市場はGOLD部分では自由に作りこむことができる反面、RMS上のデザイン部分には禁止タグが多く自由度が低い。

PC版はまだヘッダー、フッター、レフトナビでGOLDで造ったパーツを読み込めますが、スマホデザインはそうもいきません。

が、実はタグの<>内に 『 =”” 』や全角スペースを11個入れることでRMS上で禁止されているタグを利用することができます。

全角スペースの数については諸説あり、とりあえず13個とか18とかでも大丈夫でした。

管理人は11個にしています。

例えばiframeタグやCSSの読み込みにくわえ、class=””タグも使うことも可能。

これによってかなりアグレッシブにページを作りこむことが可能です。

禁止タグ突破裏技の実装コード例

// CSS
<link rel="stylesheet" ="" href="https://www.rakuten.ne.jp/gold/○○○/css/○○○.css">

// iframe
<iframe id="適宜ID" frameborder="0" scrolling="no" src="https://www.rakuten.ne.jp/gold/○○○/iframe/○○○.html " width="適宜" height="適宜" frameborder="0" =""></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://に変更になりました。

過渡期の措置として一時的にhttp://でもhttps://でもオッケーでした。

(リダイレクトかけてくれていたらしい。)

が、2017年10月頃よりチラホラとhttp://と入力した画面で『 許可されていないURLの記載があります。 』とエラーで弾かれ始めたとの報告が上がっています。

上記裏技タグで突破できない場合、楽天市場上のファイルを読み込んだりアンカーリンクを張る際にURLが http:// のままになっていないかチェックしてみてください。

楽天RMSのタグ規制の突破方法 まとめ

  • スマホの商品ページ、カテゴリーページなどのデザイン部分では一部タグが使用制限されている。
  • しかし、禁止タグの<>内に『 =”” 』や全角スペース11個を入れることで制限をすり抜けることができる。

先にも書きましたが、この裏技は特にタグ制限の厳しいスマホの商品ページやカテゴリーページにて複雑なコーディングを実現するためによく使われています。

他にはPC版の商品ページやカテゴリーページの各要素(パンくずや商品名、商品価格部分など)に

また、CSSを噛ますことで楽天市場の共通パーツを強制的に非表示とすることも可能です。

さすがに規約違反なのであまりオススメはしませんが、デザインの自由度がかなり増しますので、規約に触れない程度でぜひ色々試していただきたいところです。

 

  • このエントリーをはてなブックマークに追加
  • Pocket

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。