【STINGER5】スクロールしてもフッターで固定するメニューを設置してみたよ!【STINGER5】スクロールしてもフッターで固定するメニューを設置してみたよ!スマホでの操作性をもう少し良くしてみたくなり、フェイスブックのようなスクロールしてもフッター部分でずっとついてくるメニューを装備しました。CSSだけで作ったのであっという間に設置できますよ!スポンサーリンク[toc]コピペでOK!スマホの固定式フッターメニューのコードまずはstyle.cssに以下を記述します。スマートフォンより前の部分です。–>の下に記述します。0で一番下にDIV要素を固定させました。STINGER5のデフォルトの状態だとこれで問題ないみたいです。tableで横に均等になるようにしているので、メニューの項目が減ったりしてもうまく並ぶようにしています。footer.phpスマホでしか表示させないのでis_mobileで分岐させています。(※STINGER5ではis_mobileの関数は実装済み)また、前の記事と次の記事は投稿ページにしか必要ないのでこれもis_singleで分岐させています。前の記事と次の記事この部分はSTINGERに元々あったのをちょっと変更して使いました。古い記事には『前の記事』というのは非表示に、また一番最新記事には『次の記事』は必要ないので非表示になります。中間の記事これには前の記事、次の記事どちらも表示されます。投稿以外のページこれには前の記事、次の記事どちらも表示されません。});もともとあるページトップのJqueryはある程度スクロール後ぽわっと表示される仕様になっているため、こちらに変更してみました。POINTスマホでの表示ですと、元々あるページトップボタンとフッターメニューに追加したボタンがバッティングしてしまうのでis_mobileで分岐や、smanoneで非表示にしてください。当ブログではJqueryプラグイン『Sidr』でメニューを表示しています。『Sidr』の設置については前日エントリーを書いています。Shufulifeまとめスマホのスライド式のフッターメニューにしたのはウェブさえさんの直帰率の改善にウフフ!スマホサイトのメニューをアプリっぽくしてみたらというエントリーを拝見したのがきっかけでした。わたしもウフフ!ってしたい!それではちゅんこ@shufulifeがお送りしましたー。Share!!ツイートするシェアするはてブするこの記事のタイトルとURLをコピーする記事タイトル【STINGER5】スクロールしてもフッターで固定するメニューを設置してみたよ!記事URLhttps://shufulife.com/footer-menu/お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。【エクセル帳簿】決算時に行うこともっと見るブログの中の人ちゅんこ@shufulife意識低い系主婦。夫と娘(5歳)と仲睦まじく暮らしています。毎日楽することばかり考えて、お手本はアニメ「あたしンち」のお母さん。Shufulife本サイト内にある記事や画像などの一切の無断転載を禁じます。