スマホのフローティングバナーの閉じるボタン

Question

お世話になります。

https://ec-masters.club/forum/post_view.php?id=2454
こちらを参考にフローティングバナーを設置しました。

こちらにプラスしてバナーの閉じるボタンをつけるにはどうしたらよいでしょうか。

よろしくお願い致します。

Answer

ECマスターズの田中です。

〜の間、かつバナー用のタグの後方に
リンク付きの閉じるボタンを設置し、
リンク先として、「classが"spFixedBanner"であるタグを非表示にする」という内容の
JavaScriptを指定してください。

JavaScriptを含むため、リンクを指定するタグにも
RMSによる禁止タグチェック回避の処理が必要となりますので、


と

で、閉じるボタンのタグを囲んでください。

このままですと、スタイルシートに記載された
「.spFixedBanner img」に対しての規則が同様に適用されるため、
閉じるボタンは画面の右下端に設置されますので、

スタイルシートに「.spFIxedBanner a img」に対する規則を加え、
位置の調整を行ってください。

例）
.spFixedBanner a img {
bottom: 115px;
left: 0px;
}

Answer

ECマスターズの田中さま

いつも早いお答え、ありがとうございます。
早速やってみます。

ありがとうございます。

Answer

すみません、

例）
.spFixedBanner a img {
bottom: 115px;
left: 0px;
}

の件ですが、元のバナーにもリンクを張っているので、上記クラスが効いていないっぽいです。

回避策はありますでしょうか。

Answer

ECマスターズの田中です。

それでは、閉じるボタン自体にクラスをつけていただけますでしょうか。
例えば、閉じるボタンのタグに
class="spfbclose"
という属性をつけていただきますと、
.spFixedBanner img.spfbclose
に変更することで、閉じるボタンだけに規則を適用することができます。

Answer

ありがとうございます。

やってみましたが、禁止タグのエラーが出ます。

Answer

ECマスターズの田中です。

禁止タグチェックの回避は、タグ名の後ろに ="" を入れることで可能です。
（改行の場合は、別途全角スペースが数個必要です）

Answer

ありがとうございます。
おかげさまで無事回避できましたが、位置の調整がうまく行きません。
何が原因でしょうか。
何度もすみません。

Answer

cssのあて方が間違っていたようです。なんとかなりそうです。
ありがとうございました。