[楽天]ページ作成時のIFRAMEタグの活用について

公開日:  最終更新日:2018/11/21

[楽天]ページ作成時のIFRAMEタグの活用について
楽天でショップページを作成する際にiframe(インラインフレーム)を使っているショップさんは多いですよね。
トップページをGOLDで作成しているショップ、RMSで作成しているショップどちらでもiframeを使っているのをよく見かける気がします。本日は、楽天でのiframeタグについてまとめてみたいと思います。

スポンサードリンク

そもそもiframe(インラインフレーム)って何?

ページに別のページを埋め込んで表示することが出来るタグになります。

楽天でiframeを使う理由

RMSに直接タグを入力するのって大変ですよね・・・

ヘッダー・フッター・レフトナビなど各ページ共通で表示したい内容や楽天のイベントバナーを表示するエリアのように頻繁に更新がある部分を別ファイルで管理することで修正する際の作業効率アップが可能になります。

GOLD内に別ファイルを作成していればホームページ編集ソフトなどで修正することも出来ますし、用途ごとにファイルを分ける事で管理しやすくなります。

また、RMSだけでは実現できない、このブログでもいくつか紹介しているjavascriptやjQueryを使った動きのあるページなどもGOLD内に別ファイルをとして作成してiframeで表示することが出来ます。

↓↓のようなのはGOLDで別ファイル作成してiframeで表示した方が管理しやすいでしょうね

レビューをトップに表示するのもiframeが使えますね。

注文状況をリアルタイムに表示するようなツールもiframeでページに埋め込んで表示します。

商品ページの共通説明文やカテゴリページにも同様にiframeは使えるのでアイデア次第では色々な使い方が考えられます。

たとえば、こちらのナチュラルガーデンでは

高評価レビューランキング というページをカテゴリページで作成して各商品ごとの商品レビューをiframeで表示しています。

iframeタグについて

覚えておきたい属性

属性内容
srcURL表示するURL
scrollingyes / no / autoスクロールバーの設定
frameborder数値境界線の幅 表示したくない場合は0
width数値 / %
height数値 / %高さ
marginwidth数値左右の余白
marginheight数値上下の余白

記述例

frameborderは0にして境界線をなしにしてすっきりさせる使い方が多いです。
scrollingは、表示する内容によってはスクロールバーを表示したい場合は「yes」
指定した幅、高さに収まる内容であれば「no」にします。
スクロールなしにすれば見た感じは埋め込んでいるのかわからない表示にすることが出来ます。

注意点はリンクのターゲット指定

埋め込んで表示するページ内のリンクについては注意が必要です。

<a href="リンク先" target="_parent"></a>

リンクタグのtarget属性の指定がない場合は、リンクをクリックしても埋め込んだ枠内でしかページが切り替わりません。そこで target=”_parent” とすることで1つ上の階層のページを切り替えることが出来ます。
(もし、特殊な構造としてiframeの中のページにさらにiframeで表示している場合などは target=”_top” と指定すれば一番上のページが切り替わります。)

効率よくページ更新、管理をする方法としてiframeの活用をするのも1つかなと思います。

また、レビューをiframeで表示、jqueryなどを使うことでページの見せ方の幅も広がりますよね。ぜひ、検討・工夫・試行錯誤しながら活用してみてください。

IFRAME関連の記事

楽天RMSからのスマホ設定時にiframeを使う方法


楽天RMSからスマホ設定ページには、基本的にはIframeタグが登録できない制限がかかっており、スマホページにIframeでコンテンツを表示することは出来ません。しかし、裏技的な方法を使えば、スマホページにIframeで埋め込むことができます。






Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑