フッターバナー設置方法について

Question

お世話になります。

https://item.rakuten.co.jp/soukai/4973167281703/?l-id=sol_bty_evita_PC_5
のページのようにクーポンバナーを設置したいのですが、方法を教えていただけませんでしょうか？

Answer

ECマスターズの田辺です。

このページの場合、
https://www.rakuten.ne.jp/gold/soukai/frame/rd_fullbnr.html
このようなページを作成し、iframeタグで埋めこんでいます。

そしてiframeをとで囲み、
以下のようなCSSで固定表示させております。


@media screen and (min-width: 750px){
	#fullBnrBox iframe{
		position:fixed;
		bottom:0;
		z-index:1000;
		width:100%;
		max-height:70px;
		vertical-align:bottom;
		display:block;
		left:0;
	}
}


これらを参考にまずは作成してみていただき、
ご不明な点がございましたら再度ご質問をいただいてもよろしいでしょうか。

Answer

ありがとうございます！できました！
これをスマホにも設置したいのですができるものでしょうか？

また、爽快様のソースを拝借したのですが、楽天で禁止されているソースなど取りきれているでしょうか？
申し訳ありませんが、知識に乏しいためご確認いただけましたらありがたいです

https://www.rakuten.ne.jp/gold/urbene/frame/rd_fullbnr.html

Answer

ECマスターズの田中です。

＞これをスマホにも設置したいのですができるものでしょうか？

スマートフォン用共通説明文を利用して設置することはできます。
各タグは、本来スマートフォン用項目で利用が禁止されているタグですが、
タグ名の後ろに「 =""」（※=の前の半角スペースも必要です）を挿入していただくことで、
禁止タグのチェックを回避し、挿入することができます。
例）→、→

ただし、この方法は、RMSのバグを利用しているため、
今後、RMSの改修により、使用できなくなる可能性がありますので
ご注意ください。

また、スマートフォンの横幅に収まるよう、
ページ内容の改変も必要となります。

＞爽快様のソースを拝借したのですが、楽天で禁止されているソースなど取りきれているでしょうか？



上記JSファイルの内容は、
爽快ドラッグさんのGoogleアナリティクスに、
バナーがクリックされたことを記録するためのソースです。

つまり、デニムダックさんのショップでイベントバナーをクリックすると、
爽快ドラッグさんのGoogleアナリティクスに記録されてしまいますので、
上記タグは削除してください。

また、ソース中に、爽快ドラッグさんのクーポンへのリンクが
複数残っておりますので、ご注意ください。

Answer

ご返信ありがとうございました。


@media screen and (min-width: 750px){
        #fullBnrBox iframe{
                position:fixed;
                bottom:0;
                z-index:1000;
                width:100%;
                max-height:70px;
                vertical-align:bottom;
                display:block;
                left:0;
        }
}

	
	







これでスマホページに入れようとおもったのですが・・・どのように修正すれば入りますか？

Answer

ECマスターズの田辺です。

スマホページではも禁止タグですので
同様に開始タグと終了タグにあるタグ名の後ろに「 =""」の記載をお願いいたします。
https://club.ec-masters.net/index.php?design_page5

そして、
@media screen and (min-width: 750px)
は画面幅750px以上で表示
という意味になりスマートフォン画面では表示されませんので
そちらの記述は削除していただきますようお願いいたします。


#fullBnrBox iframe{
position:fixed;
bottom:0;
z-index:1000;
width:100%;
max-height:70px;
vertical-align:bottom;
display:block;
left:0;
}

Answer

度々申し訳ございません。


#fullBnrBox iframe{
position:fixed;
bottom:0;
z-index:1000;
width:100%;
max-height:70px;
vertical-align:bottom;
display:block;
left:0;
}




で何とか入ったのですが、購入ボタンにバナーが被るのと、そもそもバナーが大きすぎるのをどう小さくすればいいのかがわかりません。
どんな感じに修正すればいいでしょうか？

Answer

ECマスターズの田中です。

＞購入ボタンにバナーが被る

下端に設置されていることが原因ですので、
画面下端からの距離を示す「bottom:」右の「0」を、
単位を付けた上で大きな数字にご変更いただくことで、
購入ボタンの上に移動させることができます。
例）bottom:70px;

＞バナーが大きすぎるのをどう小さくすればいいのか
rd_fullbnr.htmlの中で、
各バナーのタグに、width（横幅）属性が設定されているところを、
height（高さ）属性に入れ替えて、値を調整（70など）していただくことで、
縦横比を保ったまま、高さによってバナーの見た目を修正することができます。

左右の「(店舗名)で使える」「お得なクーポン配布中！」各画像は、
divタグの背景に設定されており、サイズの制御が困難ですので、
下記のようなタグを、rd_fullbnr.htmlに挿入していただき、
スマートフォンで閲覧時に非表示にする、
といった処理を行っていただくといいと思います。

= この下の行から ====================

@media screen and (max-device-width: 480px){
div[id^=ShowBanner] { background: transparent !important; }
}

= この上の行まで ====================

Answer

ありがとうございます。
早速やってみましたが、今度は逆にバナーが出てこなくなりました。

※iphone5sで見ています

Answer

ECマスターズの田中です。

確認したところ、
タグ内にあるbottomの値に単位がついておらず、
認識できない状態となっておりました。

bottom:70;
を
bottom:70px;
に修正していただきますようお願いします。

Answer

ありがとうございます。

https://www.rakuten.ne.jp/gold/urbene/frame/rd_fullbnr-sp.html

のように


@media screen and (max-device-width: 480px){
div[id^=ShowBanner] { background: transparent !important; }
}


を設定してみたのですが、スマホで見るとやはりバナーが大きくてうまくいかないです。

Answer

ECマスターズの田中です。

＞スマホで見るとやはりバナーが大きくてうまくいかないです。

それでは、先の返信にて
＞rd_fullbnr.htmlの中で、
＞各バナーのタグに、width（横幅）属性が設定されているところを、
＞height（高さ）属性に入れ替えて、値を調整（70など）していただく
とお伝えしたとおり、

現在表示されている「バナー枠【０６】」内にある２つのタグにて、
width="357" height="70"
を
height="28"
に修正していただいた後、

スマートフォン用共通説明文に記載したタグの
#fullBnrBox iframe{
と
}
の間に
height: 38px;
を追記していただき、
改めて、表示をご確認いただきますようお願いします。

Answer

田中様
ありがとうございます！できました！お忙しいところ大変お手数をお掛け致しました。