wordpressでフッターに固定メニューを表示したい

Question

wordpressでホームページを作っています。
スマホで見た時にフッターにホームや戻る、進むといった固定の
メニューを表示したいです。
ページをスクロールしても付いてくるようにしたいのですが
わからず、どなたかご教授いただければ幸いです。

試しているのはfooter.phpに以下を記述しています。
ですが、これでは一番下にスクロールした時のみ表示され
固定で表示することはできません。画面をスクロールしてる
時もずっと下に付いてくるようにしたいですが。
どのように記述すればよいのでしょうか？

<script> //戻る function modoru(){ history.back(); } //進む function susumu(){ history.forward(); } //更新 function koshin(){ location.reload(); } </script> <form> <p><br></p> <input type="button" value="ホーム" onclick="location.href='http://nihon-lifix.com/235-2/';" style="width: 84px; height: 36px; padding: 0.75em 2em;"> <input type="button" value="戻る" onclick="modoru()"> <input type="button" value="進む" onclick="susumu()"> <input type="button" value="更新" onclick="koshin()"> </form>

Answer 1

この場合だとformである必要はないと思いますが

form {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99999;
}

こんな感じでボタンの親要素にposition: fixed;を指定してあげます
ただしこのままだと全てのフォーム（検索フォーム等）もスクロールに追従してしまうので、
実際には該当のformに適当なIDやクラスを与えてください

Comments

[koichi0414]

回答ありがとうございます。まさにやりたかったことができました。ちなみにz-index:9999とはどういう意味でしょうか？

[退会済みユーザー]

positionプロパティを指定した場合は要素同士が重なり合う可能性があるため、前後の関係をz-indexの数値で指定します。数値が大きいほど前面に来ます。

z-index再入門 - 第1回 z-indexの仕組み
https://app.codegrid.net/entry/z-index-1

[koichi0414]

そうなんですね、ありがとうございます。重ねて質問すみません、現在4つのボタン（ホーム、戻る、進む、更新）が左寄せになってるのですが、これをバランスよく中央に配置することはできませんでしょうか？

[退会済みユーザー]

提示のコードにCSSを追加するだけで実現するなら

form {
display: flex;
justify-content: space-around;
}

これを追加します。その際`<p><br></p>`は要らないかと。

しかし回答にも書きましたが、情報を送信しないのにformを使う必要がないので、マークアップを見直す必要はありそうです。

[koichi0414]

おっしゃる通りformを使うと他のformを使っているプラグインとバッティングしてしまったので適当にクラスを付けることにしました。本当にありがとうございました。