PCページ　下部固定バナー（特殊？）の設置方法　

Question

いつもありがとうございます。

1点設置方法のご質問です。

http://item.rakuten.co.jp/kouragumi/100000/?l2-id=Ranking_PC_top-0-day_rnkRankingMain&s-id=Ranking_PC_top-0-day_rnkRankingMain_16

上記URLの商品ページのように下部固定バナーを貼り、ユーザーの選択で
消すことも出来るようにするにはどのようにすればよいでしょうか。

お手数ですがお教え頂けると幸いです。

Answer

ECマスターズの田中です。

https://ec-masters.club/forum/post_view.php?id=3601
にてご案内差し上げたHTMLに、
バナーを閉じるためのボタンを追加する形になります。

バナーを閉じる仕組みには、
http://www.webdlab.com/labs/accordion-3/
上記、CSSだけでアコーディオンを作る仕組みが利用できます。
非表示にされたチェックボックスにチェックが入ると
バナーの高さが0になる、という仕組みになっております。

基本的なHTMLをご案内いたしますので、
加工してご利用ください。
タグの中には、文字以外にも、タグで画像を入れることもできます。
（各内容（７箇所）は、Udonさんにて実際の内容に変更してご利用ください）

= この下の行から ====================
閉じる



#fixedBannerBottom {
position: fixed;
bottom: 0px;
left: 0px;
display: block;
width: 100%;
height: バナー用画像の高さpx;
text-align: center;
background: 背景色;
z-index: 9999;
}
#toggleButtonFixedBanner {
position: fixed;
bottom: 閉じるボタン画面下からの位置px;
left: 閉じるボタン画面左からの位置px;
display: block;
width: 閉じるボタンの幅px;
height: 閉じるボタンの高さpx;
z-index: 10000;
transition: 0.2s;
}
#toggleCheckFixedBanner { display: none; }
#toggleCheckFixedBanner:checked ~ #fixedBannerBottom { height: 0; }

= この上の行まで ====================

Answer

ありがとうございます。

詳細までご記載頂きありがとうございます。

早速試してみます。！！！

PCページ 下部固定バナー（特殊？）の設置方法

PCページ　下部固定バナー（特殊？）の設置方法　