フッターパネルとは
これです。
最近では基本的にほとんどのアクセスがスマホですので、標準でフッターパネルが搭載されているテンプレートなども多いと思います。
このブログのテンプレート「賢威8」でもフッターパネルは標準搭載です。
フッターパネルは必要か？
もちろんあるに越したことはないと思うのですが、この限られたスマホの画面の面積を、常時占有し続けるのはユーザビリティ的にいかがなものか？と思うわけです。
当サイトでは「シェア、お問い合わせ、TOPへ」の3項目を表示しておりますが、きっちり計測してないですが、押されたことがあるのか甚だ疑問でもあります。
ということで、必要ない時(ユーザーが記事を読み進めているとき)はフッターパネルを非表示に、必要になったら(記事途中で立ち止まってスクロールアップで戻ろうとすると)フッターパネルを表示させる、という仕様にカスタマイズします。
フッターパネルをスクロールでトグル化
JQuery CDN
JQueryの設定をしていない方は<head>～</head>タグ内の出来るだけ上の位置に下記コードを追加して事前に読み込む必要があります。
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
基本的にワードプレスであればディフォルトでjQueryの読み込みが行われていますので上記コードは不要かと思います。
JavaScript(JQuery)
上のJQuery CDN の読み込みコードより下の位置、もしくはワードプレスの標準で読み込まれるjQueryより下の位置であればどこに記載しても動きます。
基本的には<head>～</head> タグ内に置くことをオススメします。
賢威8の場合は埋め込みコード設定の「</head>直前に記述するコード」の所にそのままコピペすればOK。
//フッターパネルアニメーション処理
jQuery(function($) {
var pos = 0;
$(window).on('scroll', function(){
//
if($(this).scrollTop() < pos ){
//上スクロール時
$('.keni-footer-panel_wrap').removeClass('panel_hide');
}else{
//下スクロール時
$('.keni-footer-panel_wrap').addClass('panel_hide');
}
//スクロールが停止位置
pos = $(this).scrollTop();
});
});
賢威8以外のフッターパネルのカスタムをしたい方は、
‘.keni-footer-panel_wrap’
の部分をご自身のテーマのフッターパネルのクラス名に変更すればそのまま動きます
CSS
CSSも必要です。
.panel_hide{
transform: translateY(50px);
}
上記コードをテーマのstyle.cssに記述して更新します。
以上で作業完了です。
フッターパネルのスクロールトグル
完成形
コメント
コメント一覧 （2件）
目次H２タグまで表示させるコードと、スクロールに応じて、スマホフッターパネル連動させるCSSなど、入れましたが、できませんでした。
簡単にできると記載ありましたが、追加で入れなくてはいけないコードなどございますか？
目次をH２までにするCSSは、サイト拝見しまして、デベロッパーツールから直接打ち込んでみたところしっかり効きましたので、コード以外の問題かと思います。
追加で必要なコードは特にありません。
フッターパネルの方はjQueryのコードですので以下の記事を参考にしてみてください。
https://lets-hack.tech/programming/languages/javascript/jquery/
記事内の追加のJS/CSSに記載する場合はスクリプトタグまたはスタイルタグで囲む必要がありますので忘れずに。