コピペで簡単設置！スマホ画面用に固定フッターメニューの追加方法
たぶん来年からGoogle検索がモバイルインデックスを開始するだろうってことで、今後はモバイルをメインに考えたデザインが主流となってくると思います！
外出先とかでもない限りどうもあの小さい画面で調べものとかするの気になれなかったので、正直これまではあまりスマホ画面を意識してこなかったんですよね〜 ですが、今後はあの小さな画面が主戦場となるわけなので、なるべくスマホ検索を利用するようにして、使い勝手の良さそうな部分はどんどん取り入れていきたいと思います！
そんなわけで、実際利用しているなかで見つけたのが画面下に固定したフッターメニュー（もしくはフッターナビゲーション）なんですが、スマホはパソコンと違い主に縦長なので文字の読みやすさ等を考えると横幅詰めてどうこうしようってのは難しいと思うんですよね〜 なので削るのであれば縦だってことで邪魔にならない程度で画面下に表示されるモバイルアンカー広告などが以前から存在しているんですが、そこは広告だしてる場合じゃないだろう！ってことで広告を押しのけてフッターメニューを設置してみました。
フッターメニューの設置方法
コピペで簡単に設置出来ます！
フッターメニューのHTML部分
以下のソースをテーマフッター(footer.php)のFooterより下に追加
フッターメニューのCSS部分
position: fixed;
width: 100%;
background-color: #1e1e1e;
bottom: 0;
left: 0;
z-index: 100;
padding: 0;
}
#footer-menu ul{
display: flex;
}
#footer-menu li{
width: 25%;
text-align: center;
background-color: #1E1E1E;
}
#footer-menu li:nth-child(even){
background-color: #333;
}
#footer-menu li a{
width: 100%;
display: block;
padding: 5px 0;
color: #EEE;
}
#footer-menu li a:hover{
background-color: #666;
}
フッターメニューの詳細
まずはHTML部分ですが、スマホ画面の表示を考えて４つの項目に絞ってあります。それぞれ見てもらいたいページのURLに変更してください。項目の数を変更する場合は、例えば５つにする場合は<li>リストを追加してCSSの部分の#footer-menu liの25%を20%に、３つにする場合は33.3%等に変更すれば項目の数は変えられます。項目を増やしたり、文字数が多い場合はフォントのサイズを小さくする等の工夫が必要です。
※footer部分にmargin-bottomでフッタメニューの高さ分スペースを空けてください。そうしないとFooter部分が隠れてしまうため。
パソコン画面で表示されていても邪魔にはならないと思うので、今回はスマホ・パソコン双方で表示させておりますが、スマホのみで表示させたい場合は#footer-menu箇所にdisplay:none追加で非表示として、@media screen and (max-width: 414px)等のメディアクエリのモバイル指定で#footer-menu｛display:block｝としてモバイルのみ表示させることも出来ます。
他にもFont Awesome等のiconを使って見栄えを良くしたりカスタマイズは自由自在！
Font Awesomeのiconを使ったカスタム例