楽天スマホでフローティングバナーを上下に設置する方法

Question

お世話になります。
現在楽天スマホページにてフローティングバナーを下部分に設置しているのですが、
上下に設置する方法は御座いますでしょうか？

Answer

ECマスターズの田中です。

はい、上下にフローティングバナーを設置する方法はあります。

まずは、既存のフローティングバナー用の
HTMLタグ、およびスタイルシートの記述を
コピーして、同じ内容が２つになるようコピーしてください。

コピー先のHTMLおよびスタイルシートに対して、
HTMLおよびスタイルシート、それぞれに記載されているIDが
既存のIDと重複しないよう、別の値に書き換えてください。
例）
 → 
#BtmFlag { → #TopFlag {

最後に、スタイルシートにて、
リンクバナーの表示位置を、下から上にご変更ください。
例）
#TopFlag { から } の間にある、
bottom: -5px; → top: 0px;
のように変更。

Answer

#TopFlag { から } の間にある、
bottom: -5px; → top: 0px;のように変更。
　　
　　　　　　　　　　　　↓

楽天から教えて頂きましたものが以下の物で、
上記の表示位置設定が見当たらないのですが、
どのように追加したら宜しいでしょうか？

Answer

ECマスターズの田中です。

只今ご返信いただいた内容の場合、
スタイルシートの記述は
http://www.rakuten.ne.jp/gold/_osaka01/floatfooter2.css
の中にありますので、このファイルを修正する必要があるのですが、
GHさんの編集できない場所に保存されておりますので、
一度、上記「floatfooter2.css」ファイルをダウンロードして、
修正した後、GHさんの店舗のGOLDにアップロードしなおしていただく形になります。

上記「floatfooter2.css」ファイルの中に、

===== この下の行から ================
#BtmFlag{
	width:100%;
	margin: 0;
	padding: 0;
	position: fixed;
	bottom: -5px;
	right: 0;
	z-index: 2147483647;}
===== この上の行まで ================

という記述がありますので、

===== この下の行から ================
#BtmFlag{
	width:100%;
	margin: 0;
	padding: 0;
	position: fixed;
	bottom: -5px;
	right: 0;
	z-index: 2147483647;}
#TopFlag{
	width:100%;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 2147483647;}
===== この上の行まで ================

このように、#TopFlag の規則を追記していただき、
GHさんの店舗のGOLDにアップロードしなおしていただき、
HTMLソース最後のタグのリンク先を、
GHさんの店舗のGOLDにアップロードした「floatfooter2.css」にご変更ください。

Answer

田中様

先程はお電話にてご説明頂き、ありがとうございました。

できました。

Answer

ECマスターズの田中です。

当質問にていただいたような、
画面に固定されるバナーを簡単に設置できる
「バナー設置君」を作成いたしましたので、
全体公開前に、当質問への返信として、
先行してお知らせさせていただきます。

HTMLやスタイルシートを書くことなく、
完成したHTMLをヘッダー・フッター・レフトナビに貼り付けるだけで
固定バナーを簡単に設置することができます。

オプションを詳しく設定することで、
マウスを乗せると動いたり、半透明になったり、
IDを変えることで複数設置することも可能です。

もし、新しいバナーに入れ替える機会などありましたら、
ぜひ、下記URLより「バナー設置君」をお試しいただき、
わかりづらい点やご希望などございましたら
お知らせいただければと思います。
https://ec-masters.club/fwd3/fixedbannerkun