ifreamの表示について　（PC）

Question

いつもお世話になります、naoyaです。

PCページでのifreamの表示方法で悩んでいます、何か良い方法はないでしょうか？

現在横スクロールと縦スクロールを商品ページ、TOPページで利用させてもらってるのですが、スクロールでは無く、全部一覧で表示させたいと思い


このようにPC販売説明文に設置しています、スマホページはwidth="100％"で設置しています。
この場合、バナーを追加したり減らしたりした時に中の高さが変わるため、高さが超えた場合はスクロールになり、減った場合はフレームの枠内の下部に空白が出来てしまいますので、都度高さを変更しています。
ただこの作業も面倒になってきたので、rpoint_box.htmlの高さに合わせてifreamの高さが変わるような設定はできないでしょうか？

スマホはwidth="100％"で設置していると、スクロールになってもあまり影響ないかな？と思っています。なるならそのようにしたいのですが・・・

どうぞよろしくお願いします。

Answer

ECマスターズの田辺です。

只今確認しておりますので、少々お待ちくださいませ。

Answer

ECマスターズの田辺です。

＞PCページでのiframeの表示方法で悩んでいます、何か良い方法はないでしょうか？

iframeにつきましては、
中身の大きさに合わせて自動で大きさを変えることが難しいので、
縦横の大きさは中身に合わせてその都度変えていただく必要がございます。

ですが、今より作業を効率よく行う方法がございます。


現在は


htmlの中で直接大きさを指定している為、
商品ページごとに大きさを変更しなければなりません。


改善策は、
１：



linkを追加してiframeの中のwidthとheightの記入を消します。

２：
下記の内容を
テキストエディタ（メモ帳など）に貼り付けた後、
ファイル名の末尾を「.css」にし、外部スタイルシートファイルとして保存の上、
楽天GOLD内に設置してください。
===== この下の行から ============

iframe#event {
	width: 600px;
	height: 800px;
}

===== この上の行まで ============


このようにGOLDのCSSファイルにて大きさを指定していただきますと、
こちらを変更するだけで全商品ページを一括で変更することが可能です。


＞スマホはwidth="100％"で設置していると、スクロールになってもあまり影響ないかな？と思っています。

スマホにつきましては、
iPhoneなどのiOS端末で表示される場合には、
高さを指定しない場合でもiframeの中身が全て表示されます。

しかしながらAndroid端末やPCのスマホ画面にて確認したときに
高さ指定がないとiframeの部分のみスクロール画面になってしまいます。

お客様からすると使いづらい可能性もございますので、
こちらを解決する方法としては、

の高さを内容に合わせて自動調整する、
下記jQueryプラグインをお試しください。

iFrame Resizer
http://davidjbradshaw.github.io/iframe-resizer/

導入方法ですが、たとえば、

上記サイトの「Download ZIP」よりダウンロードしていただいた
zipファイルを解凍し、「js」フォルダの中にある
「iframeResizer.min.js」「iframeResizer.contentWindow.min.js」を
楽天GOLDにアップロードしていただき、

iframeとして埋め込まれる側のHTMLファイルに



を、iframeを呼び出す側のページ（共通パーツ設定など）に


 jQuery(function($){ $('iframe').iFrameResize(); }); 

を、それぞれご記載いただく、といった形になります。
（各jsファイルのURLは、実際のURLに変更してご利用ください）

Answer

田辺様早々の回答ありがとうございますnaoyaです。

早速PCページで試してみたのですが、PC販売説明文では
"link"タグが許可されていないエラーがでてしまいます、
すんげー時短で便利な内容だけにどうかしたいのですが、どうしたら良いでしょうか？

スマホページはPC解決後に試します。

どうぞよろしくお願いします。

Answer

ECマスターズの田辺です。

禁止タグをご案内してしまい大変失礼いたしました。

linkは、
ヘッダー・フッター・レフトナビや共通説明文（大）に
使用できるタグでした。

ですので、

を例えばヘッダーの先頭などに入れていただくか、

もしくは、
ヘッダー・フッター・レフトナビ、および共通説明文（大）には

を使用することができるので、


iframe#event {
width: 600px;
height: 800px;
}


をヘッダー・フッター・レフトナビ、もしくは共通説明文（大）に
記入していただく方法がございます。

後者の方法は、GOLDにアップロードすることなく、
RMSで変更するだけでサイズ変更をすることが可能です。

Answer

田辺様回答ありがとうございますnaoyaです。

PCはヘッダーに

iframe#event {
width: 600px;
height: 800px;
}

で高さ調整するようにしました、かなりの時短になりましたありがとうございます。

それからスマホの自動調整を設定しました。
自分で作っているhtmlファイルは自動で調整できるみたいなのですが、
イベント告知君（https://www.rakuten.ne.jp/gold/shimabara-tyokusou/rpoint_box/rpoint_box.html）に

を組み込んでみたのですが、表示が途中で切れてしまう現象になっています。

何か原因なのでしょうか？
どうかよろしくお願いします。

Answer

ECマスターズの塚本です。

＞何か原因なのでしょうか？

こちら担当の者に確認しまして、
改めてご連絡させていただきます。

お時間いただきますが、
今しばらくお待ちいただければと思います。

Answer

ECマスターズの田中です。

イベント告知君は、通常のHTMLファイルと異なり
バナーをJavaScriptで生成している関係から
高さを正しく取得できていない可能性がございます。

ちなみに、イベント告知君(R)では
スマートフォン用の見た目もご用意しております。
こちらをご設置いただくのはいかがでしょうか。
https://manual.ec-masters.net/index.php?ecm-tools-manual-eventR

Answer

naoyaです。

返答ありがとうございます。
「イベント告知君は、通常のHTMLファイルと異なり
バナーをJavaScriptで生成している関係から
高さを正しく取得できていない可能性がございます。」
ありがとうございます、高さは都度変更しようと思います、ありがとうございます。

それからスマートフォン用のイベント告知君を試してみたのですが、表示がうまくいかないようです。
設定を色々試してみたのですが、もともとの
https://www.rakuten.ne.jp/gold/shimabaratyokusou/rpoint_box/rpoint_box.html
は表示できるのですが、スマホ用の

を設置すると表示がうまく出来ないようです。

なにかあるのでしょうか？

Answer

ECマスターズの田中です。

スマートフォン用のイベント告知君設置用タグは、
URLだけでなく高さや幅の指定方法も変わりますので、
HTMLタグ作成フォームにて、
改めてタグを作成していただきますようお願いします。

ifreamの表示について （PC）

ifreamの表示について　（PC）