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

公開日:  最終更新日:2017/03/24

この記事のタイトルとURLをコピーする

楽天RMSのスマホ設定で通常は使えないタグ IFRAME・LINK・CLASS・CSSを使う裏技
ネットショップのスマホ対策が必須と言われるようになっていますが、楽天のスマホ対策はどのくらい取り組まれていますか?

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

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

スポンサードリンク

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

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

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

楽天スマホ対策サービス

楽天、Yahoo!ショッピングのスマホ対策には「SUMAOU!」が簡単
楽天、Yahoo!ショッピングを運営で最近よく言われることに「スマホ対策」が必要というのを耳にすることが増えてます。でも、実際には...

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

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

参考記事(外部サイト)
楽天スマホをオリジナルにカスタマイズする裏技 | 楽天ティップスRakutenTips

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

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

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

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

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

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

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

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

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

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

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

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

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

[楽天]ページ作成時のIFRAMEタグの活用について
楽天でショップページを作成する際にiframe(インラインフレーム)を使っているショップさんは多いですよね。 トップページをGOLDで...

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

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

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

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

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


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

スポンサードリンク
FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

ヒートマップ分析も出来る無料のアクセス解析

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

ネットショップ運営「おすすめ書籍」


紙媒体より電子書籍(Kindle版)の方がお得です
>>>ネットショップ運営 おすすめ書籍[Kindle版]

Comment

  1. 新井誠司 より:

    お世話になります。
    楽天のスマホページにIFRAMEが使えるという事で現在使わせて頂いております。
    ありがとうございます。

    楽天の商品ページをアイフォンで確認するとIFRAMEが読み込まれレイアウトが崩れないのですが
    アンドロイドで商品ページを確認すると高さが短くなっておりIFRAMEで読み込んでいるページが
    途中で切れてしまっております。
    何か対応策はございますでしょうか。

    • peacepopo より:

      新井 様

      コメントありがとうございます。

      iframeにheight=”400px” などの高さは指定されてますでしょうか?
      高さの指定がない場合は閲覧するブラウザによっては表示が違ってくる可能性があります。

Your Message

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑