【賢威8】スマホのフッターパネルをスクロールに応じて表示/非表示を切り替える

フッターパネルとは

フッターパネルとは

これです。

最近では基本的にほとんどのアクセスがスマホですので、標準でフッターパネルが搭載されているテンプレートなども多いと思います。

このブログのテンプレート「賢威8」でもフッターパネルは標準搭載です。

フッターパネルは必要か?

もちろんあるに越したことはないと思うのですが、この限られたスマホの画面の面積を、常時占有し続けるのはユーザビリティ的にいかがなものか?と思うわけです。

当サイトでは「シェア、お問い合わせ、TOPへ」の3項目を表示しておりますが、きっちり計測してないですが、押されたことがあるのか甚だ疑問でもあります。

ということで、必要ない時(ユーザーが記事を読み進めているとき)はフッターパネルを非表示に、必要になったら(記事途中で立ち止まってスクロールアップで戻ろうとすると)フッターパネルを表示させる、という仕様にカスタマイズします。

フッターパネルをスクロールでトグル化

JQuery CDN

JQueryの設定をしていない方は<head>~</head>タグ内の出来るだけ上の位置に下記コードを追加して事前に読み込む必要があります。

基本的にワードプレスであればディフォルトでjQueryの読み込みが行われていますので上記コードは不要かと思います。

JavaScript(JQuery)

上のJQuery CDN の読み込みコードより下の位置、もしくはワードプレスの標準で読み込まれるjQueryより下の位置であればどこに記載しても動きます。

基本的には<head>~</head> タグ内に置くことをオススメします。

賢威8の場合は埋め込みコード設定の「</head>直前に記述するコード」の所にそのままコピペすればOK。

賢威8以外のフッターパネルのカスタムをしたい方は、

'.keni-footer-panel_wrap'

の部分をご自身のテーマのフッターパネルのクラス名に変更すればそのまま動きます

CSS

CSSも必要です。

上記コードをテーマのstyle.cssに記述して更新します。

以上で作業完了です。

フッターパネルのスクロールトグル
完成形