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

ECサイト制作

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

2017年04月20日 22:25 2018年09月28日

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

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

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

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

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

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

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

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

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

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

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

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

 

上記タグの活用方法

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

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

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

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

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

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

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

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

 

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。日本語力が乏しく…社内のみんなからも指摘をされるので、ブログの執筆を通じて語彙力強化していきたいです✨ 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物がすきな皆さま、小動物トークしましょう!