今回は Mobile 画面の使い使い易さを改善する為に、

• ヘッダメニューの設置
• フッタメニューの設置
• トップへ戻るボタンの設置

の三点についてプラグインを追加した事を主に記事にします。

WP Mobile Menu によるヘッダメニューの設置

ヘッダメニューを設置する為に WP Mobile Menu プラグインを追加しました。

このプラグインでは、無料枠では3種類のメニューを設置できます。

• ヘッダメニュー
• 左サイドメニュー
• 右サイドメニュー

ボトムメニューは有料の範囲となります。

細かな設定が可能ですので、一つずつ確認しながら設定を進めています。疑似グローバルメニューの中身を入れ終わったら、そちらはモバイルでは非表示にします。

固定ページ、カテゴリー、タグ、リンクが追加できます。アーカイブや他プラグインの結果等を自由に追加する事は出来なさそうです。

トップメニューと右側のサイドメニューを有効にしました。

Google AdSense 対策として、トップメニューは画面内で固定せず、スクロールすると消えるようにしています。最初に表示される範囲内には広告を表示しないようにしたので、サイドメニューを開いた時に広告が隠れる事はありません。

WP Mobile Bottom Menu によるフッタメニューの設置

フッタメニューを設置する為に WP Mobile Button Menu プラグインを追加しました。

これまで自作の擬似フッタメニューを設置していました。

しかし、私の技術が未熟なために、安定して疑似フッタメニューを表示させる事が出来ませんでした。

プラグインをもう一度探し直したところ、WP Mobile Botton Menu の使い勝手が良さそうでしたので、インストールして設定しました。

スマホ画面では、フッタメニューが表示されているはずです。

ただ、アイコンの代わりに画像を指定すると表示が乱れましたので、原因を掴むまでは Font Awesome のアイコンを使用する事にしました。

WPFront Scroll Top によるトップへ戻るボタンの設置

ページのトップへ戻るボタンもうまく機能させられなかったので、WPFront Scroll Top プラグインをインストールしました。

Google reCAPTCHA やフッタメニューとのバランスを取るのが大変でしたが、設定自体は直ぐに出来ました。

こちらのページで設置した疑似フッタメニューの中のページトップへ戻るボタンは、動作したりしなかったりと安定しませんでしたので消去しました。

WPFront Scroll Top プラグインで設置したボタンは安定して動作し、スクロールを停止すると表示も消えてくれるので、希望通りの動作になりました。

LiteSpeed Cache の設定を微調整

WPFront Scroll Top プラグインも、始めは動作が不安定でした。LiteSpeed Cache プラグインのページの最適化で JavaScript を除外したり、CSS の内容を style.css に追加したりしても、中々安定して動作しませんでした。

最終的に、JavaScript の “JS を遅延読み込み” の項目を “Deferred” にする事で安定動作するようになりました。

LiteSpeed Cache のページの最適化の使用量が上限

2025年2月も、LiteSpeed Cache プラグインのページの最適化の使用量が上限に達しました。まだ21日なのに、です。

理由は複数あります。

• CSS を微調整した結果を反映させる為に UCSS を全消去したのが複数回あった事
• 毎記事を三か国語で作成していますので1日で最低でも24回以上の UCSS を生成している事

この調子では全ページに UCSS を作成するのは難しいです。カテゴリのページは生成しないように設定しました。他にも除外できる項目が無いか確認します。

今回追加したプラグインが正常に動作するかどうかは、UCSS が生成されないと分かりません。ページの最適化の使用量が復活する来月3月に備えて、各所の微修正を行います。

結び

Mobile 画面用の最適化として、

• ヘッダメニュー
• フッタメニュー
• トップへ戻るボタン

を設置しました。それぞれプラグインをインストールして設定しました。ひとまず、Mobile 画面に追加したい項目は終わりです。LiteSpeed Cache プラグインのページの最適化の使用量が戻る3月までの間に、微調整を終わらせます。

今日も昼更新が出来ませんでしたので夜更新です。昼休憩の時間は個人的な調べ事がありましたので無理でした。こういう日もあります。