ネットショップ運営担当者のブログ

[初心者向け]楽天GOLDを使ってiframeを適用させる方法!スマホ商品ページ

こんにちは!楽しいECです
10年以上、ネット販売に携わる仕事をしています

楽天市場などネットショップ運営のデザイン面のにおいて
iframeを活用されている方、多いとよく聞きます

この記事では楽天GOLDを使ったiframeのこと

  • なぜ、iframeを活用するのか?
  • 楽天GOLDを使ってiframeを適用させる方法

などを解説していきます!

 

新米店長
博士~!でも楽天の商品ページって
iframeって入れられるんですか??
EC博士
確かにそうですね!
実はある方法で入れることができるのです。

*2020年6/18までの情報です。楽天の仕様が変更したら使えなくなるかもしれません、ご注意ください!

楽天でiframeが活用される理由!

iframeはインラインフレーム要素 と呼ばれています
iframeとはどんなタグかといいますと、

HTMLのページの指定された場所、範囲に
違うHTMLのページを呼び出しリンクすることができます

ちょっと分かりにくいですね
例えば
こちらの人気サイトの
スマホ商品ページの商品説明文ですが、

離脱されないようにするため、次に見てほしい6商品を提案してます!

出典:https://www.rakuten.ne.jp/gold/mobacaba/

この部分すべてがiframeになっています。

スマートフォン用商品説明文に HTMLで書かれていそうですが、
楽天GOLDにアップした別のファイルを
この場所に呼び出してリンクされています

直で書けばいいじゃんと思うかもしれませんが、
iframeを使うメリットがここにあります!

実は、この部分は店内全品に同じように入っています
例えば、この6つの商品を違う商品に変えたいってなった時どうしますか?

もし、スマートフォン用商品説明文に 直で書いていたら、
全商品の説明文を編集しなくてはいけません!

iframeなら
楽天GOLDにアップしてるファイルを編集するだけで
全商品のスマホ商品詳細部分が差し替わります!

iframeは作業効率が良くなるタグなので
特に楽天ではよく使われるのです

楽天GOLDを使ってiframeを適用させる方法

では実際に楽天GOLDを使ってiframeを実装する方法を解説します

まず、iframeの中に呼び出す部分のHTMLファイルを作っていきます
上記の例で行くと
注目アイテムの画像が6つ並んだ部分ですね

手順1.htmlファイルを作成します

普段htmlファイル作る感じと一緒です
CSSとかここに書くのを省いてますが、入れてみて下さい

<html lang=”ja”>
~~<!–▼上バナー▼–>
<img src=”上バナー画像URL.jpg” width=”100%”><!–▼注目アイテム▼–>
<div id=”pickup”>
<ul class=”clearfix”><li><a href=”https://item.rakuten.co.jp/商品ページリンクURL” target=”_top”><img src=”商品画像URL(1).jpg”></a>
<div><font color=”#d81c1c”>送料無料2480円</font></div><li><a href=”https://item.rakuten.co.jp/商品ページリンクURL” target=”_top”><img src=”商品画像URL(2).jpg”></a>
<div><font color=”#d81c1c”>送料無料2480円</font></div><li><a href=”https://item.rakuten.co.jp/商品ページリンクURL” target=”_top”><img src=”商品画像URL(3).jpg”></a>
<div><font color=”#d81c1c”>送料無料2480円</font></div><li><a href=”https://item.rakuten.co.jp/商品ページリンクURL” target=”_top”><img src=”商品画像URL(4).jpg”></a>
<div><font color=”#d81c1c”>送料無料2480円</font></div><li><a href=”https://item.rakuten.co.jp/商品ページリンクURL” target=”_top”><img src=”商品画像URL(5).jpg”></a>
<div><font color=”#d81c1c”>送料無料2480円</font></div><li><a href=”https://item.rakuten.co.jp/商品ページリンクURL” target=”_top”><img src=”商品画像URL(6).jpg”></a>
<div><font color=”#d81c1c”>送料無料2480円</font></div></ul>
</div>
<!–end–><!–▼下バナー▼–>
<br><a href=”リンク先URL” target=”_top”><img src=”下バナー.jpg” width=”80%”></a><br><br>~~
</html>

作成が完了したら、適当なファイル名を付けてhtmlファイルを保存し、
楽天GOLDにアップロードします。

手順2.商品ページにiframeを設置します

次は商品ページのスマートフォン用商品説明文にiframeを入力します

しかし、RMSの商品ページの編集画面からは
制限がかかっておりCSSやjavascriptなどのタグを使うことができません
また、iframeを呼び出すタグも使うことができず、エラーメッセージが表示されてしまいます
簡単なタグのみ使うことができるようです

ですが、
ある裏技を使うと、iframeを呼び出すことができちゃうんです!

*裏技なので自己責任でお願いします

商品ページの
スマートフォン用商品説明文 や 商品ページ共通説明文
にIFRAMEやCSSをいれたらエラーが出ますが
以下のどちらかの方法で入力すると適用されます!

  • タグ内に13個の全角スペースを入れる
  • 「=””」をタグの後にいれる

詳しくはこんな感じです

<iframe =”” src=”https://www.rakuten.ne.jp/gold/楽天GOLDに入れた呼び出すHTMLファイルのURL.html” scrolling=”no” frameborder=”0″ width=”100%”></iframe                               >

開始タグに半角スペース含めた =””  を入れます。
閉じたタグにも忘れずに、ここではスペースを入れています。

ちょっと、どういう理由で読み込めているのか、よくわかりませんが、
エラーが出なく、正しく呼び出せていればokです!

2020年6月時点ではこの方法で実装されているのを確認できていますが、
楽天の仕様が変更したら使えなくなるかもしれません、ご注意ください!

今回は楽天GOLDを使ってiframeを適用させる方法
というテーマで書かせていただきました!
何かの参考になれば、幸いです