Webサイトの作成について言えば、少し前まで「モバイルファースト」でスマホでの表示を構築してからPCでの表示を整えていくという感じだったのですが、最近は「モバイルオンリー」なんだそうです。
僕は仕事でパソコンを使うので、大体はパソコンでWebサイトを見てますが、そうじゃなかったらいちいちパソコンを立ち上げないかもしれないですね。
確かにスマホで事足りれば、パソコンは要らないかな。
でも、やっぱりスマホは表示面積が絶対的に少ないので、メニューとかバナーとかボタンとか一度にいっぱい見れないんですよね。
すっかり前置きが長くなりましたが…、
そんな事もあってか、お客さんから「スマホで見た時、フッターに3つくらいボタンを置いてもらえませんか?」という要望をもらいました。今回はその時の備忘録です。
WordPress 4.7.2
テーマ:Enfold 3.8.4
方法はいろいろあると思いますので、各自調べてください。
ここでは、メディアクエリを使って、表示幅で表示/非表示を制御していきます。
*結構ズボラな方法ですので、モバイル端末かどうかの条件判定を使った方が「銀ちゃんカッコいい」と思います。
テーマは「enfold」を使っています。
他のテーマの場合は、適宜変更してください。よろしくお願いします。
footer.php のオシリから3行目あたり <div id=”fb-root”></div> の直前に
1 2 3 4 5 6 |
<!-- モバイル用の固定ボタンを追加 --> <div id="mobileFootNav" class="clearfix"> <div class="ftNavBtn"><a href="<?php bloginfo('url'); ?>/該当するディレクトリ" class="blueButton"><span class="webfontIcon">R</span><br />来場予約</a></div> <div class="ftNavBtn"><a href="<?php bloginfo('url'); ?>/該当するディレクトリ" class="blueButton"><span class="webfontIcon">h</span><br />カレンダー</a></div> <div class="ftNavBtn"><a href="<?php bloginfo('url'); ?>/該当するディレクトリ" class="blueButton"><span class="webfontIcon">F</span><br />お問合せ</a></div> </div> |
と追加します。
*アイコンは、CONDENSEさんのWebフォントを使ってます。
ある程度の物は揃っていますし、毎回使わさせていただいてます。
Webフォントのスタイル定義は、調べてくださいね。
今回は、簡単にCSSも紹介してみます。
「enfold」だと、custom.cssという空のスタイルシートが用意されているので、カスタマイズはこのcustom.cssに追加していけばOKです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
#mobileFootNav { display:none; } @media only screen and (max-width: 767px) { #mobileFootNav { display:block; z-index:1030; width:100%; height:60px; position:fixed; bottom:0; } #mobileFootNav { background:rgba(255,255,255,0.7); border-top:1px solid #e1e1e1; } #mobileFootNav .ftNavBtn { float:left; width:31%; height:46px; margin:7px 1%; } #wrap_all { padding-bottom:60px; } // 60px上げる } /* ボタンデザイン */ .blueButton .webfontIcon { font-size:20px; line-height:24px; font-weight:normal; } .blueButton { box-shadow:inset 0px 1px 0px 0px #54a3f7; background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%); background-color:#007dc1; border-radius:3px; border:1px solid #124d77; display:inline-block; cursor:pointer; color:#ffffff; text-decoration:none; text-shadow:0px 1px 0px #154682; font-size:13px; line-height:16px; font-weight:bold; width:100%; height:100%; text-align:center; vertical-align:middle; } .blueButton:hover { background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%); background-color:#0061a7; text-decoration:none; } .blueButton:active { position:relative; top:1px; } |
まあ、細かい所は調整してくださいね。
…で、こんな感じに仕上がりました。