WordPressでResponsive Menuというプラグインを使ったモバイル用レスポンシブメニューの追加方法と、その設定方法について説明します。
このプラグインを使えばスムーズなメニューを実装できるので、是非レスポンシブメニューの導入を考えている人は試してみてほしい。PRO版もあるが、無料版でも十分なクオリティだ。
デモは公式ホームページで確認してほしい。
プラグインの導入
Responsive Menuを使うにはプラグインを導入しよう。
これをインストール。プロ版もあるけど無料版でも十分。ちなみに当サイトはプロ版。
無料版とプロ版の違い
無料版に加えて、プロ版では以下のことが可能
- 画面上部に追従するヘッダーバー
- タッチジェスチャー(スワイプでメニューを閉じるなど)
- ボタンを押した時のアニメーション
- ページスクロールでメニューを閉じる
- 色の透明度変更
- 変更のプレビュー
とかこんな感じの機能がプロ版オンリー。必要ないと思ったら無料版で全く問題ない。1サイト分の値段が$14.99なので、そんな高くもないと思うから気に入ったら購入しても良いかもね。複数のサイトを運営しているなら100サイトまで利用可能な$49.99のマルチライセンスがいい。
Responsive Menuの設定
さらっとそれぞれの設定。当サイトで触っていない設定については解説しないことにする。重要なのは大体触っている・・はず。
Initial Setup
Breakpoint
レスポンシブメニューを表示させるサイトの最大幅を入力。PCサイズでは非表示、それ以下では表示が望ましいかと。当サイトでは1057pxに設定。
Menu to use
どのメニューセットを使うか選ぶ。レスポンシブ専用のメニューを作っておいても良い。
Container
Sizing
Width: メニューを開いた時のメニュー幅をここで設定。画面に対して%で指定するのがオススメ。当サイトは70%。
Background
コンテナの色を変更可能。クリックしてカラーピッカーを使って選ぶか、直接コードを入力する。
Title Text
Font Size: タイトルのテキストサイズを変更可能。
Animation
Appear From: どこからメニューが出てくるかの設定。好きなのを選ぼう。
Technical
- Close on Page clicks
- Close on Link clicks
両方ともON。メニューが表示されている状態でページ部分やリンクがクリックされたらメニューを閉じるというもの。
Menu
Styling
メニューのスタイル調整。
Font Size: フォントのサイズ
Item Height: メニュー1項目の高さ設定
Line Height: メニュー1項目のラインハイト
Text Alignment: テキストのアライン設定。左で良いかと。
Item Borders/Text/Background
メニューのボーダー設定、テキスト色、背景色設定など
Trigger Icon/Sizing/Colours/Background/Border
2階層目を開く時のトリガーについての設定
Submenu
基本的にはMenuの内容と変わらない。2階層目のメニュー設定。
Button
メニューを開くボタンの設定。
Animation
Type: 無料版では1つしか選べない
Location
Positioning: ボタンの位置。追従したければFixed、固定したければAbsolute。
Side: 右か左か。当サイトは右。
Distance from Side/Top: ボタンの位置を設定。
Container Sizing
ボタンコンテナの高さと幅を設定。トライ＆エラーで自分の気持ち良いサイズを探そう。
Line Sizing
ボタンの中にある3本線の高さ・幅・マージンについての設定。
Container Background/Line Colours
色の設定。
Technical
Scripts
Minify ScriptsやPlace Scripts in Footerでサイト表示の高速化ができる。ただしきちんと動くかどうかなどテストした方が良い。
Advanced
Animation Speed
アニメーションの速さを秒数(s)で指定。
Header Bar
当サイトでオンにしている機能。一番上にバーが表示される。左上にホームぺージへのリンクも表示可能。
Desktop Menu
デスクトップ用のメニューも作成可能らしい。こちらは試したことないのでなんとも。
まとめ
モバイルで役立つレスポンシブメニューだが、テーマによっては付属していなかったり、あっても使いづらいものであったりする。
Affinger5にも最初からレスポンシブメニューはついてくるが、個人的には使いづらいと感じたので前から使っているプラグインを継続して使うことにした。
Responsive Menuはものすごく使いやすいしオシャレなプラグインなのでオススメ。