戦略的ホームページ

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

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

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

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

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

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

<例:カーセンサー様。画面右下\たった90秒/~とあるのがフローティングバナー>

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

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

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

手順は3つ。

  1. footer.phpに記述
  2. cssを追加
  3. 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>

これで完了。

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

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

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

【超簡単】ワードプレスで制作したホームページにフローティングメニューをつけるホームページのコンテンツをしっかり作り込み、ページが長くなる場合、フローティングメニューを設けるのは、良い考えです。 フローティン...

 

ABOUT ME
HICO
HICO
ほんの小さな感動が、誰かの人生をちょっと変える。そんな食体験を通して人類に貢献することが僕の使命です。目標は「100年レストラン事業」。お金も才能も人脈もありませんが、実現させるために日々、愚直に考えていることを綴ってます。
人生のアフターコロナ対策、お決まりですか?

コロナショックにより、人の暮らしから考え方、働き方は大きく変わるのでしょう。

どうなるのか?というよりも、どう生きたいのか?

たいせつな人たちと楽しく人生を送る為に必要な資産と、生き方を、ない頭で頑張って考えてます。あなたのお役に立てれば幸いです!