【コピペOK！】楽天のスマホ版にCSSやiframeを読み込む方法

楽天

2017年04月20日 22:25　2019年09月01日

最近、コンビニの栄養ドリンクを舐め回すようにして試している社員Aです。

ちなみに、キューピーコーワαドリンクが一番甘いです。

さて、今回は楽天店舗のスマートフォンページにCSSやiframeを読み込む方法をご紹介します。

楽天でショップ運営をされている方ならお馴染みの楽天RMS。私的には、FacebookやInstagram開く回数よりも断然多いです。

「スマホ版にもiframeやcssを適用させたいけど、エラーが出る！」「スマホ版は使えないタグが多い…」

こういった相談を受けることがあるのですが、「ある裏技」を使えば、スマホ版でもifameやcssを読み込むことができます。

やり方はとっても簡単で、エラーが出るタグ自体に13個の空白をつけるだけなんです。

と言っても分かりにくいと思いますので、実例でご紹介します。

<iframe src="http://www.rakuten.ne.jp/gold/xxxxx/" width="100%" height="200"　　　　　　　　　　　　　></iframe　　　　　　　　　　　　　>

<link rel="stylesheet" href="xxxx"　　　　　　　　　　　　　>

こんな感じできっちりと13個空白を入れることで、エラーなく反映できます。

なぜ13個なのかは謎ですが、私は毎回このやり方でCSSやiframeを読み込んでいます。

スマホ版にiframeやcssを読み込めると、様々な方法で活用できます。

私がよく使うのは、「フローティングバナー」です。

こんな感じで、スクロールをしても常に追跡するバナーですね。

楽天goldで追跡をするCSSの記述を書いて、先程の方法でスマホ版に読み込めばフローティングも簡単にできてしまいます！

期間限定で発行しているクーポンを取得させたり、大型イベント（マラソン、スーパーセール）時にイベントページに誘導したりと転換率を上げるための戦略として活用できます。

こちらのやり方はまた後日紹介させていただきますねm(__)m

スマホ版のデザインにCSSやiframeを活用してもっとデザインの幅を広げてみましょう！

「13個の空白」と覚えておけばいつでも活用できます。

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺