[楽天]ページ作成時のIFRAMEタグの活用について
![[楽天]ページ作成時のIFRAMEタグの活用について](https://peacepopo.net/wp-content/uploads/68-1.gif)
楽天でショップページを作成する際にiframe（インラインフレーム）を使っているショップさんは多いですよね。
トップページをGOLDで作成しているショップ、RMSで作成しているショップどちらでもiframeを使っているのをよく見かける気がします。本日は、楽天でのiframeタグについてまとめてみたいと思います。
そもそもiframe（インラインフレーム）って何？
ページに別のページを埋め込んで表示することが出来るタグになります。
楽天でiframeを使う理由
RMSに直接タグを入力するのって大変ですよね・・・
ヘッダー・フッター・レフトナビなど各ページ共通で表示したい内容や楽天のイベントバナーを表示するエリアのように頻繁に更新がある部分を別ファイルで管理することで修正する際の作業効率アップが可能になります。
GOLD内に別ファイルを作成していればホームページ編集ソフトなどで修正することも出来ますし、用途ごとにファイルを分ける事で管理しやすくなります。
また、RMSだけでは実現できない、このブログでもいくつか紹介しているjavascriptやjQueryを使った動きのあるページなどもGOLD内に別ファイルをとして作成してiframeで表示することが出来ます。
↓↓のようなのはGOLDで別ファイル作成してiframeで表示した方が管理しやすいでしょうね
レビューをトップに表示するのもiframeが使えますね。
注文状況をリアルタイムに表示するようなツールもiframeでページに埋め込んで表示します。
商品ページの共通説明文やカテゴリページにも同様にiframeは使えるのでアイデア次第では色々な使い方が考えられます。
たとえば、こちらのナチュラルガーデンでは
高評価レビューランキング というページをカテゴリページで作成して各商品ごとの商品レビューをiframeで表示しています。
iframeタグについて
覚えておきたい属性
| 属性 | 値 | 内容 |
|---|---|---|
| src | URL | 表示するURL |
| scrolling | yes / no / auto | スクロールバーの設定 |
| frameborder | 数値 | 境界線の幅 表示したくない場合は0 |
| width | 数値 / % | 幅 |
| height | 数値 / % | 高さ |
| marginwidth | 数値 | 左右の余白 |
| marginheight | 数値 | 上下の余白 |
記述例
frameborderは0にして境界線をなしにしてすっきりさせる使い方が多いです。
scrollingは、表示する内容によってはスクロールバーを表示したい場合は「yes」
指定した幅、高さに収まる内容であれば「no」にします。
スクロールなしにすれば見た感じは埋め込んでいるのかわからない表示にすることが出来ます。
注意点はリンクのターゲット指定
埋め込んで表示するページ内のリンクについては注意が必要です。
<a href="リンク先" target="_parent"></a>
リンクタグのtarget属性の指定がない場合は、リンクをクリックしても埋め込んだ枠内でしかページが切り替わりません。そこで target=”_parent” とすることで１つ上の階層のページを切り替えることが出来ます。
（もし、特殊な構造としてiframeの中のページにさらにiframeで表示している場合などは target=”_top” と指定すれば一番上のページが切り替わります。)
効率よくページ更新、管理をする方法としてiframeの活用をするのも１つかなと思います。
また、レビューをiframeで表示、jqueryなどを使うことでページの見せ方の幅も広がりますよね。ぜひ、検討・工夫・試行錯誤しながら活用してみてください。
IFRAME関連の記事
楽天RMSからのスマホ設定時にiframeを使う方法
楽天RMSからスマホ設定ページには、基本的にはIframeタグが登録できない制限がかかっており、スマホページにIframeでコンテンツを表示することは出来ません。しかし、裏技的な方法を使えば、スマホページにIframeで埋め込むことができます。
Your Message