ひかるぶろぐを少しカスタマイズ。モバイルからのアクセス時に、画面下部にフッター固定バーを設置しました。スクロールに追従して画面にずっと表示されたままのメニューがさっと作れるエントリーです。子テーマにfooter.phpを用意するフッター固定バーにコードを記述する追加CSSにコードを記述する自分好みにフッター固定バーをCSSカスタマイズするためのコツCSSカスタマイズ画面に一時的に表示させるフッター固定バーを自分好みにカスタマイズするには?このエントリーでできるようになるのはスマホ画面にフッター固定バーを表示することスマホからブログへのアクセス時に画面下部にフッター固定バーを設置しました。BEFOREAFTERこのフッター固定バーは下へ下へスクロールしても追従して画面下部に表示されたままになります。今回固定メニューを導入した背景として今まで直帰率が高かった悩みがありました。「長文のエントリーになる傾向があるからページトップに遡ってスクロールするのダルいよなあ・・・」と思っていて技術的にこの問題を放置してましたが、今回フッター固定バーを設置することで一応は解決できました。ヘッダーを固定することも考えたのですが、上から下に閲覧していくのに画面上部にヘッダーが固定されていると目障りになるのでボツ。画面下部ならそれほど邪魔にならなそうです。フッター固定バーを設置して便利なボタンを用意しました。フッター固定バーの便利なボタン1:ハンバーガーメニューを表示するフッター固定バー「メニュー」をタップすると、ハンバーガーメニューが表示されます。ハンバーガーメニューはヘッダーの一要素なので、今回実装したフッター固定バーがなければページトップ左上にしか表示されません。ハンバーガーメニューをタップしてもらえない泣。フッター固定バーを設置したことでいつでもハンバーガーメニューへアクセスできるようにしました。CATEGORIES)を表示させています。フッター固定バーの便利なボタン2:ブログトップページへ戻る2つ目の「ホーム」ボタンでは、ひかるぶろぐのトップページに遷移させるようにしました。特定のエントリーをブックマークしていただいているありがたい読者の方が「最新エントリー更新されてないかな」という場合に特定のエントリーページ→トップ画面へアクセスしやすいようにしました。ヘッダーのロゴをタップすればトップ画面には飛べますが、他にもアクセスの方法を用意したって感じです。フッター固定バーの便利なボタン3:エントリーページトップへ戻る画像右側のマークが長文の証ですが・・・スクロールしなくても一瞬でページ上部へ戻ります僕のエントリーは4,000字超と比較的長文化しやすい傾向があります。これを読み返す時にわざわざ上にスクロールするのはかなりのストレス。料理系のエントリーは必ず読み返す必要が出てくるので・・・。フッター固定バーの「トップ」をタップすれば一瞬でページトップまで戻れます。個人的にはこのボタンがとても重宝しています。フッター固定バーの便利なボタン4:エントリー検索画面を表示するこれも今まではヘッダー右上に表示されていましたが、いつでも他のエントリーを検索できるようにしました。記事数も少なく網羅性が弱いブログなのでまだまだ使われる頻度は少ない検索画面ですが他のエントリーにアクセスしてもらう方法が増えるのはいいことですよね。このようにスクロールしても追従してくれるフッター固定バーに4つのボタンを設置することで利便性が高まるというわけです。フッター固定バーの作り方そんな便利なフッター固定バーの作り方をメモしておきます。WordPressテーマは「STORK(ストーク)」を使っていますが、ググったらSTORKでフッター固定バーの作り方を紹介しているものがヒットしなかったので参考になれば嬉しいです。以下の外部リンクを参考にさせていただきました。ありがとうございます!>>WordPressスマホ固定フッター(フロート)メニューの表示方法!コピペ可のCSSコードも!>>ストークでフッター固定メニューを設定するカスタマイズフッター固定バーの作り方は次の3ステップ。子テーマにfooter.phpを用意するフッター固定バーにコードを記述する追加CSSにコードを記述するフッター固定バーの基になる要素を出力させ(footer.php)、出力した要素を綺麗にデザインする(追加CSS)というのが今回やりたいこと。子テーマにfooter.phpを用意するまずは「ひかるぶろぐ」にフッター固定バーを表示させるための要素を追加出力させる命令が必要です。これは「footer.php」が役割を担っています。スクロールに追従する固定バーの作り方として他にはjQueryでやる方法もあるようですが、ビギナーにはハードル高すぎ。今回はPHPとCSSを使って用意します。子テーマ(stork_custom)に「footer.php」を用意します。子テーマは公式サイトからDLできます。公式サイトからDLした子テーマには残念ながら次の3ファイルしか用意されていません。functions.phpstyle.cssyarpp-template-relative.phpこれに加えて「footer.php」を追加します。FTPソフトを使って親テーマ(jstork)の「footer.php」をPC(デスクトップなど)にDLします。名称そのまま、子テーマ(jstork_custom)のディレクトリにコピーすればOKです。「public_html」→「wp-content」→「themes」と進むと「jstork_custom」があるはず。親テーマの「footer.php」も同じように辿っていけば見つかります。FTPソフトは「FileZilla」を使っています。フッター固定バーにコードを記述する子テーマに用意した「footer.php」にフッター固定バーを出力させるためのコードを追記します。?></body></html>用意した「footer.php」はこのようなコードが書かれているかと思います。?>」と70行目「</body>」の間に以下のコードを追記します。-->これでフッターに固定バーに必要な要素が出力されるようになります。CSSコードを用意してないのでまだブサイクなデザインです。最終ステップに移りましょう。追加CSSにコードを記述する出力した固定バーを表示させるためのCSSコードを用意します。WordPress管理画面から「外観」→「カスタマイズ」→「追加CSS」と進んで、次のコードを追記します。"\f002";}一応はこれで「ひかるぶろぐ」と全く同じフッター固定バーが表示されるはずです。自分好みにフッター固定バーをCSSカスタマイズするためのコツせっかくなら、自分のブログに合わせて少しカスタマイズしませんか?僕もさきほど紹介した外部リンクのCSSコードをベースにして、フッター固定バーの背景カラーやアイコンを変更しました。この辺を自分のブログに合わせてCSSをカスタマイズすると楽しいのですが、変更するコツを記載しておきます。CSSカスタマイズ画面に一時的に表示させるCSSをいじくる時は「外観」→「カスタマイズ」→「追加CSS」でコードの反映を確認しながらコードを書くのが非常に便利ですよね。このままだとカスタマイズ画面ではフッター固定バーは表示されません。?>)をしていたためで、このまま確認できずにCSSコードをいじるのは非常に不便です。そこで一時的にカスタマイズ画面にフッター固定バーを表示させます。?>」を削除して以下の状態にして保存します。style="font-size:16px"></span><br>検索</a></li></ul>「スマホのみに表示させる」という命令を削除したので、PC画面にもフッター固定バーが表示されるようになりました。これでカスタマイズ画面を見ながらCSSを編集することができるようになります。CSSカスタマイズが終わったら、PHPコードを編集して戻すことをお忘れなく。PC画面にもフッター固定バーを表示させたい場合はそのままでOKです。フッター固定バーを自分好みにカスタマイズするには?僕はフッター固定バーに4つの機能をもたせましたが、数を減らしたい、または背景カラーを運営ブログのテーマカラーに合わせたり、シンプルに黒背景にするなどしたいですよね。フッター固定バーを作ろうとしているぐらいなのでわざわざ書く必要がないかもしれませんが、PHPとCSSの編集箇所をメモします。ボタンの数を減らす・名称を変更する超初歩なので書く必要ないかもしれませんが、「footer.php」を編集します。style="font-size:16px"></span><br>検索</a></li><li>〜〜〜</li>が上から4つ並んでいます。スマホ画面では左から順番に次のボタンが出力されます。メニュー(ハンバーガーメニューの表示)ホーム(ブログトップページの表示)トップ(ページトップに戻る)検索(検索画面の表示)もし必要のないボタンがあれば、該当する<li>〜〜〜</li>を1行丸ごと削除すれば出力されません。順番を変えればボタンの位置も変更できます。ボタン名称を変えたい場合は<br></a>の間を書き換えてあげればOKです。背景カラーのカスタマイズ先ほど追記したCSSコードのうち、背景カラーに関わるのは次の部分です。#333;「#333」を自分の好きな色に変更します。僕はこちらを参考にしてカラーコードを選んでいます。Awesome」を使っています。無料アイコンでたくさんのバリエーションがあるのでお気に入りのアイコンが見つかるはず。Awesomeイメージに近い単語を入力すると検索ができます。お気に入りのアイコンが見つかったらクリック。画像の黄色でベタ塗りした部分(f011)がコードです。これをCSSの該当部分に書き換えるとアイコンを変更することができます。先ほど追加したCSSコードのうち、アイコンのコードにあたるのは次の部分。“\□□□□”」の□□□□を書き換えればOKです。以上、備忘録的にスクロールに追従するフッター固定バーの作り方を紹介しました。今回初めてソースコードを載せてみたりしたので誰かの参考になったらとっても嬉しいです^^。PM参考にさせて頂きました。ありがとうございます。僕の固定バーの「メニュー」と「検索」ボタンは前提として、すでにサイトに「メニュー」と「検索」機能を実装しているため機能します。メニュー:ハンバーガーメニュー(ヘッダー左上)検索:ヘッダー右上の虫眼鏡マーク東さんの「メニュー」と「検索」に該当する機能は実装していますか?もしされている場合、そのURLは僕の固定バーの「検索」「メニュー」のURLとは違うものではないですか??URLを自身のサイトと同じものに置き換えれば機能するはず!です。hummingbirdについてわからず申し訳ナスですが、そちらを確認してみてください:)見当はずれな回答でしたらごめんなさい。AM貴重な記事、ありがとうございます。貴サイトのSNSシェアのリンク先URLを代入すればメニューにいれられるはずです。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。Eats(ウーバーイーツ)は3日稼働で4万円の報酬でした遺伝子を調べればアルコールの強さが分かる「アルコール感受性遺伝子検査キット」をやってみたRECOMMENDこちらのエントリーも人気です。Proとテレビを接続すると作業が楽...WordPress2019.3.4Mac上でスクロールするほど大きな画面の保存(スクショ)方法WordPress2018.2.12プログラミングを文系が説明してみるWordPress2018.4.10WordPressのダッシュボードが表示されない...。ローカル環境からアッ...WordPress2020.1.23パンくずリストを残したまま。「警告:data-vocabulary.or...WordPress2018.3.30ひかるぶろぐのロゴを作ったらブログに愛着が湧いたABOUTこの記事をかいた人ひかる2013年大卒。サルに従事後、17年12月末退職。収入0からリスタート。好きなことやりたいことに素直に!ブログを綴りながら生きていく!人生実験してます。POSTこのライターの最新記事COOKING2020.1.25ビール片手に、キッチン焼肉でひとり酒WordPress2020.1.23パンくずリストを残したまま。−ひかる見た目は童顔、中身はおじさん。好きなものはお酒と旨いつまみ。きが転じて居酒屋料理の自宅再現ブログやってます。UberEatsの配達パートナー(認定ゴールドパートナー)についても書いてます。記事が参考になったら「ほしいものリスト」にてご支援くださると喜びます。