【WPプラグイン配布】カスタムフローティングメニュー
2026.01.25
はじめに
前回の記事では、AIを相棒にプラグインを開発した裏話をお届けしました。 今回は、追従メニューを作りました！
普段は画面の端っこでずーっと付いてきて、必要なときにパットメニュー表示します！
人とは違うメニュー表示をしたかった方必見ですよ！
またヘッダーのメニューとは別のメニューを表示させたい人にもオススメです！
このHPにも実装していますので、画面の右端のメニューをタップもしくはマウスを持って行ってみてくださいね。
こんな機能追加して！とか言う方は、まず自分でAIを相棒に修正してみてください！
画面の端っこで邪魔せず主張します！
プラグインをダウンロード
Digital Onion Follow Menu 使い方ガイド
Plugin Version 7.2.0 / Author: Awaji_Tamao
1. メニューの準備と設定
まずはWordPressの管理画面から、表示したいメニューを作成します。
- メニューの作成: 「外観」＞「メニュー」から新しいメニューを作成します。
- 位置の割り当て: メニュー設定の「表示位置」で「Digital Onion Follow Menu」にチェックを入れて保存してください。
- 階層構造: 2階層目（サブメニュー）まで対応しており、展開時にはふわっとしたアニメーションで表示されます。
2. 詳細カスタマイズ（設定画面）
「設定」＞「DO Menu設定」から、サイトのデザインに合わせて見た目を調整できます。
カスタマイズ項目
- 設置位置: 上・中央・下の3パターンから選択可能。
- 背景透明度: 0〜100%で調整でき、磨りガラスのような背景効果を適用します。
- カラー設定: ボタン色、メニュー背景色、文字色を自由に変更できます。
- フォントサイズ: サイトの雰囲気に合わせて文字の大きさを指定できます。
3. 操作仕様（PC ＆ スマホ）
デバイスごとに最適化された快適な操作性を実現しています。
PCでの操作：
- ホバー展開：サイドのラベルにマウスを重ねるだけで、スッとメニューが展開します。
- 自動収納：マウスをメニューから外すと、自動的に閉じます。
スマホでの操作：
- タップ開閉：ラベルをタップすることでメニューが開閉します。
- 右スワイプ閉じ：メニューが表示されている状態で、左から右へスワイプすると直感的に閉じることができます。
💡 こだわりの機能
- ヌルッとした追従性: スクロールに合わせてメニューが追従し、停止後はゆったりと定位置に心地よく戻ります。
- サブメニューの見切れ防止: PCでもスマホでも、サブメニューは主メニューの下に展開されるため、画面外に見切れる心配がありません。
- ページトップ戻り防止: 階層リンクをクリックしてもページの一番上に戻ってしまう現象を完全に排除。ユーザーを迷わせません。
まとめ
新しいメニュー表示やで！
ヘッダーメニューと分けたいメニューの表示や、ヘッダーメニューと同じでもいいかも！
おしゃれな感じになってます？？？
デザイナーではないので、デザインもGemini任せです（汗）
でも他にはないサイトを作るのにはいい感じのプラグイン。
導入してみてください。
こちらもAIで作ったもの。
時間のある人はページのカスタマイズで迷ったら、AIに相談すれば、かなりの確率で解決出来ちゃいますよ！
問い合わせ
※過去記事の誤報や削除依頼は随時受け付けております。
