WEBサイトにフローティングバナーを設置する方法

サイトを閲覧中、常に問い合わせボタンが出ているサイトが増えてきました。

行動を促すためですが、あんまり大きいと邪魔ですし、派手だと見る気も失せます。

ただ、問い合わせをしたいときに常にそこにある、というのは親切でもある。

配置については「右下」あるいは、「中央下」がベストでしょう。

人の目線は、上から下へ移動しやすいので、上にあると邪魔に感じるからです。

＜例：カーセンサー様。画面右下＼たった90秒／~とあるのがフローティングバナー＞

ということで、忘備録的にこちらを解説。

主にワードプレスでの利用を想定してます。

手順は３つ。

footer.phpに記述
cssを追加
Javascriptに記述

Footer.phpに記述

ワードプレス内ファイル「footer.php」に以下を記述します。

<divclass=”floating-banner”>
<ahref=”リンク先ページのURL”>
<imgclass=”pc”src=”PC用のフローティングバナーのURL”alt=”PC用のフローティングバナー”>
<imgclass=”sp”src=”スマホ用のフローティングバナーのURL”alt=”スマホ用のフローティングバナー”></a>
</div>

CSSに記述

次に、CSSに以下を記述します。

.floating-banner{
position:fixed;/*追従*/
z-index:99999;/*他の要素の下に隠れないように*/
top:80px;/*バナーの上下の位置*/
right:40px;/*バナーの左右の位置*/
}
.pc{
width:300px;/*バナーの横幅を指定*/
}
.floating-banner:hover{
opacity:.8;/*ホバーで少し透過*/
}
.sp{
display:none;/*PCではスマホ用のバナーは非表示に*/
}
@mediascreenand(max-width:990px){/*タブレット用のブレイクポイントを指定*/
.pc{
display:none;/*タブレットサイズ以下でPC用のバナーを非表示に*/
}}
@mediascreenand(max-width:560px){
/*スマホ用のブレイクポイントを指定*/
.sp{
display:inline-block;/*消していたスマホ用のバナーを表示させる*/
width:100vw;/*スマホの画面幅いっぱいにバナーを表示*/
}
.floating-banner{
top:unset;/*PCで指定していた上下の位置指定をクリア*/
right:0;/*左右の隙間が空かないように*/
bottom:0;/*画面の最下部にぴったりくっつくように指定*/
}}

Javascriptで以下を記述

Javascriptで以下を記述します。

<script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script><script>jQuery(window).on(“scroll”, function($) {if(jQuery(this).scrollTop() > 100)
{jQuery(‘.floating-banner’).show();} else{jQuery(‘.floating-banner’).hide();}});jQuery(‘.floating-banner’)
.click(function() {jQuery(‘body,html’).animate({scrollTop: 0}, 500);returnfalse;});</script>

これで完了。

フローティングバナーでなく、簡単なフローティングメニューをつける方法

なお、フローティングバナーではなく、フローティングメニューをつける場合は、下記をご覧ください。

ワードプレス限定にはなりますが、バナー設置より簡単です。