スマホ用のリンクボタンをフッターに固定する［WordPress］

Webサイトの作成について言えば、少し前まで「モバイルファースト」でスマホでの表示を構築してからPCでの表示を整えていくという感じだったのですが、最近は「モバイルオンリー」なんだそうです。

僕は仕事でパソコンを使うので、大体はパソコンでWebサイトを見てますが、そうじゃなかったらいちいちパソコンを立ち上げないかもしれないですね。
確かにスマホで事足りれば、パソコンは要らないかな。

でも、やっぱりスマホは表示面積が絶対的に少ないので、メニューとかバナーとかボタンとか一度にいっぱい見れないんですよね。

すっかり前置きが長くなりましたが…、
そんな事もあってか、お客さんから「スマホで見た時、フッターに３つくらいボタンを置いてもらえませんか？」という要望をもらいました。今回はその時の備忘録です。

方法はいろいろあると思いますので、各自調べてください。
ここでは、メディアクエリを使って、表示幅で表示／非表示を制御していきます。
＊結構ズボラな方法ですので、モバイル端末かどうかの条件判定を使った方が「銀ちゃんカッコいい」と思います。

テーマは「enfold」を使っています。
他のテーマの場合は、適宜変更してください。よろしくお願いします。

footer.php のオシリから3行目あたり <div id=”fb-root”></div> の直前に

と追加します。
＊アイコンは、CONDENSEさんのWebフォントを使ってます。
ある程度の物は揃っていますし、毎回使わさせていただいてます。

Webフォントのスタイル定義は、調べてくださいね。

今回は、簡単にCSSも紹介してみます。
「enfold」だと、custom.cssという空のスタイルシートが用意されているので、カスタマイズはこのcustom.cssに追加していけばOKです。

まあ、細かい所は調整してくださいね。
…で、こんな感じに仕上がりました。