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

         

楽天

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

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

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

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

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

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

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



店舗ページのスマホ版を柔軟にデザイン

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

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

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

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

 

●iframeを読み込む方法
CSSを読み込む方法
 

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

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

 

上記タグの活用方法

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

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

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

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

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

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

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

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

 

関連記事

この記事を書いた人

社員A

入社7年目。フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。 一人旅が好きで、主に東南アジアを周っています。旅行が好きな方、おすすめスポットがあればぜひ教えて下さい!