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

公開日:  最終更新日:2017/10/25

[楽天]ページ作成時のIFRAMEタグの活用について
楽天でショップページを作成する際に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” とすることで1つ上の階層のページを切り替えることが出来ます。
(もし、特殊な構造としてiframeの中のページにさらにiframeで表示している場合などは target=”_top” と指定すれば一番上のページが切り替わります。)

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

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

IFRAME関連の記事




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

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

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

スポンサードリンク

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

PAGE TOP ↑