サイト制作において、フッターCTA(Call to Action)あるいはフローティングメニューを設置するのはユーザーの利便性を考えると、有効です。
基礎的な設置方法は下記の記事で書きましたので、今回はその応用編を忘備録として控えておきたいと思います。

少しスクロールしたら表示されるフッターCTA
トップページを開いた瞬間から、表示されると、時にはうっとうしい場合があります。
はじめて訪問した時には気にならなくても、何度か訪れると、目障りになってくるものです。
ユーザーにそんな感情を抱かせるのは良くありません。
そこで、少しスクロールした時に表示させる方法があります。
HTMLの記述
<基本編>同様、フッター(footer.php)のbodyタグの前に下記のようなHTMLを入力します。
<div id="footerFloatingMenu"> <a href="#"><img src="画像のURL"></a> </div> <script> jQuery(function() { var topBtn = jQuery('#footerFloatingMenu'); topBtn.hide(); jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 200) { // 200pxで表示 topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); }); </script>
最初の3行は<基本編>に記載したコードですので、すでに記載済みの場合はそれ以下を記載します。
これで、少しスクロールすると表示されるようになります。
なお、ここでは200pxほどスクロールすると表示させる設定にしており、もう少しゆっくり表示させたい場合は、200を500に帰れば、500pxに変えれば良い。
スマホにだけフローティングメニューを表示させる
とはいえ、PCとスマホの画面表示では、大きく異なります。
PCではサイドバーにもバナーを貼っており、一画面での情報量が多すぎる場合、フッターCTAがあると、かえってごちゃごちゃしてしまいます。
そんな時は、PCでは表示せず、スマホだけ表示させる方法が良いでしょう。
設定は簡単。
表示するdivタグ全体を、ifで囲みます。
こんな感じ。
<?php if(wp_is_mobile()) : ?> <div id="footerFloatingMenu"> <a href="#"><img src="画像のURL"></a> </div> <?php endif ?>
1行目と4行目が、ifです。
wp_is_mobileとは、「モバイルの場合はdivタグを表示する」ということ。
ちなみに「モバイル」にはスマホ・タブレット・携帯が含まれます。
流行りのアイコンで表記するフッターCTA
画像ではなく、アイコンで表記するのは今の流行りのようです。
例えば、4つのボタンを設置する場合、フッター(footer.php)のbodyタグの前に下記のようなHTMLを入力します。
<div id="footerFloatingMenu"> <a href="#"><img src="画像URL"></a> <a href="#"><img src="画像URL"></a> <a href="#"><img src="画像URL"></a> <a href="#"><img src="画像URL"></a> </div>
そして、cssに下記のような記述をします。
#footerFloatingMenu {
display: block;
width: 100%;
background-color: #000;
position: fixed;
left: 0px;
bottom: 0px;
z-index: 9999;
text-align: center;
}
「background-color」で背景色を選び、デザインを統一すれば完成。
もう一度<基本編>を確認したいときは下記をご参考ください。

コロナショックにより、人の暮らしから考え方、働き方は大きく変わるのでしょう。
どうなるのか?というよりも、どう生きたいのか?
たいせつな人たちと楽しく人生を送る為に必要な資産と、生き方を、ない頭で頑張って考えてます。あなたのお役に立てれば幸いです!