楽天RMSのスマホページ設定でIFRAME・CSSを読み込む裏ワザ

公開日：2016/04/14 最終更新日：2020/07/21

ネットショップのスマホ対策が必須と言われるようになっていますが、楽天のスマホ対策はどのくらい取り組まれていますか？

最近ではスマホ対策に特化したサービスなどもあります。活用している方も多いのではないでしょうか。ただ、楽天のスマホページにはいろいろな制限があり思ったようなページ作りができないという悩みを持っていませんか？

本日は楽天RMSからのスマホページ設定で使える裏技について紹介します。スマホページのカスタマイズが出来ますよ。

楽天のスマホページがカスタマイズ出来る！？

楽天のスマホページはRMSから設定できるようになっていますが、スマホ用のトップページ、商品ページなどに表示する内容が設定できる枠組が用意されており、バナーを指定、共通の自由入力欄など変更できるようになっています。決めたれた枠組みにしか指定ができないため、自由度はあまり高くありません。

スマホのトップページをGOLD内にオリジナルで作成しているショップやスマホトップページを自動的に生成してくれるツール・サービスなどあります。スマホのトップページ、カテゴリページなどはGOLD内に生成することでオリジナルで他ショップとの差別化を計ることが可能です。

楽天スマホ対策サービス

ネットショップ運営の気になる備忘録

楽天、Yahoo！ショッピングのスマホ対策には「SUMAOU！」が簡単

上記のサービスにはスマホ用の商品ページとしてPCページの内容を画像化してスマホページに表示する仕組みになっているようです。しかし、商品ページはRMSでデザイン設定している商品ページになるため、他のショップとの差別化があまりできないとも言えます。

楽天のスマホページについて気になる記事を見つけたので紹介したいと思います。

参考記事（外部サイト）
※2020.07.21リンク先のページがなくなったため、リンク記載なしに修正しました。

上記のサイトでは楽天RMSのスマホサイト設定で通常では入力エラーになってしまい、登録することができないタグの登録ができる方法が紹介されています。入力エラーをすり抜けて登録できてしまう裏ワザ的な方法のようです。

タグ内に13個の全角スペースを入れるまたは、（=””）をタグの後にいれるとスマホでもlinkやiframe,classなど使えなかったタグが使える様になります。閉じタグで入れる場合は半角でスペースを使用してください。

<link rel="stylesheet" href="GOLD内のCSSを指定"　　　　　　　　　　　　　>

上記のように全角スペースを後ろにいれるなんて通常のタグでは使わないような入力です。

なるほどー、こんな方法があったんですねー。

楽天でいろいろなショップのスマホページを見ていた時に、これどうやって実装しているんだろうと気になるショップを何度か見かけたことがあったのを思い出しました。この方法を使えば気になった内容は実装できそうだなと納得です。

それでは、この裏技を使えばどんなことができるのかというと

楽天のスマホページでオリジナルCSSが使える

スマホページのデザインは変更するのが難しいですが、ページのソースを解析してオリジナルCSSで見た目など変更することもできるのではないでしょうか。

参考サイトでも紹介されていましたが、楽天に限らずスマホでサイトを見ていると画面下側に固定された広告バナーが表示されたりするのを見たことありませんか？あれと同じように楽天スマホページを表示した際にオリジナルのバナーを固定表示することができます。

通常は登録できないタグのclassの入力指定もできるので、アイデア次第でいろいろと出来ることはありそうですね。

楽天のスマホページにIFRAMEが使える

PCの共通説明文などではIFRAMEタグを使うことができます。

ネットショップ運営の気になる備忘録

[楽天]ページ作成時のIFRAMEタグの活用について

そのため、上記記事のような色々な活用方法があります。スマホページの設定では、IFRAMEタグは許可されていないのでPCページと同じように他のHTMLページをIFRAMEで埋め込むことはできません。

しかし、裏技を使えばIFRAMEタグを使ってスマホページに埋め込むことが可能になります。転換率アップに繋がりなりそうな注文状況などを表示するツールを埋め込んだり、レコメンド商品ページを埋め込んだり色々とできるのではないでしょうか。

楽天スマホページでオリジナルのJavascriptを利用できる？

CSS、IFRAMEについては実際に使えるのを確認しましたが、同じように外部ファイルとして用意したjavascriptのファイルも読み込めてしまうでは？

実際には試していませんが仮に読み込むことができたら、さらにできることの幅が広がりそうな気がします。また、いろいろと試してみたいと思います。

注意が必要なのは、この方法はあくまで楽天RMSの入力エラーチェックをすり抜ける裏ワザですので、そのうち楽天側が対応して使えなくなってしまう可能性もあります。スマホ対策が必須となっていまだからこそ、スマホページの差別化ができるのは捨てがたいのは事実ですが、セキュリティー的にもリスクはあるので使う際は注意が必要です。

楽天のスマホ対策については下記記事にもまとめていますので参考にしてみてください。

ネットショップ運営の気になる備忘録