楽天スマホを自由にカスタマイズする裏ワザまとめ[iframe・CSS・JavaScript設定可能]

今までいろいろとRMSスマホ用のカスタマイズできる裏ワザをご紹介しましたが、
商品ページやカテゴリでいろいろとバグコードが異なるので過去記事から設置個所別でまとめてみました。

カスタマイズされる方はぜひ参考にしてみてください。
あくまで禁止タグをかいくぐる”バグコード”ですので設置される方は自己責任でお願いします。

スマホ用デザイン設定

ここはスマホで共通として使えるバグコードです。例えば、ヘッダー部分にスライドやオリジナルメニューを入れたり、商品ページ右側等に固定バナーやお気に入りボタン、フローティングにバナーやタイマーなど、ページ全体を大幅に変更できるようになります。

RMS設置個所

■デザイン設定メニュー（スマートフォン） > スマートフォン用商品ページ > 商品ページ設定

■デザイン設定メニュー（スマートフォン） > スマートフォン用カテゴリページ > カテゴリページ設定

設置タグ

<link rel="stylesheet" 　　　　　　　　　　　　　　="" href="https://www.rakuten.ne.jp/gold/店舗ID/★★★.css">

<iframe src="https://www.rakuten.ne.jp/gold/店舗ID/★★★.html" id="★★★" scrolling="no" frameborder="0" =""=""></iframe =""> 

<script src="https://www.rakuten.ne.jp/gold/店舗ID/★★★.js" type="text/javascript" charset="UTF-8" =""=""></script 　　　　　　　　　　　　　　　　　　>

設置コードはCSS、iframe、scriptと設置することが可能です。

スマホ商品ページ用

ここはスマホ用の商品ページ内にiframeを入れことが可能です。スマートフォン用商品説明文は文字数制限があるので、これを使えば文字数を気にせず楽天独特の縦長のページを作成することができます。また、回遊性を高めるための「関連商品」や「おすすめ商品」など店舗独自で設定して露出することができます。iframeになっているので、タブ切り替えスライドなどオリジナリティある見せ方が可能になると思います。

RMS設置個所

■商品ページ設定 > 商品ページ情報 > スマートフォン用商品説明文

設置タグ

<iframe               src="https://www.rakuten.ne.jp/gold/店舗ID/★★★.html" width="100%" height="★★★px" scrolling="No" frameborder="0" =""=""></iframe                =""="">

スマホ用カテゴリページ

先程のスマホ用の商品ページと同様のことが言えます。基本的には各カテゴリページ（店舗独自で作成されたカテゴリ）の上部分を自由にカスタマイズできます。特にここは文字数制限が「全角4000文字(半角8000文字)以内」と少ない設定なので、iframeを使えばかなり自由度の効くページにすることができると思います。

RMS設置個所

■カテゴリページ設定 > 店舗内カテゴリ設定 > 店舗独自で作成されたカテゴリ > 表示内容の編集　（スマートフォン用） > スマートフォン用カテゴリ説明文

設置タグ

<font color="#fff"><iframe src="https://www.rakuten.ne.jp/gold/店舗ID/★★★.html"  scrolling="no" frameborder="0"　　　></iframe <!--　　　-->></font>

裏ワザ活用店舗

最後に以上の裏ワザ（バグコード）を使ってさまざまなページ作成をされている店舗さんをご紹介します。私もこれらの店舗さん参考にさせてもらってます。