Wordpress

Responsive MenuでWordPressにスムーズなモバイルメニューを追加する

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 ScriptsPlace Scripts in Footerでサイト表示の高速化ができる。ただしきちんと動くかどうかなどテストした方が良い。

 

Advanced

Animation Speed

アニメーションの速さを秒数(s)で指定。

 

Header Bar

当サイトでオンにしている機能。一番上にバーが表示される。左上にホームぺージへのリンクも表示可能。

 

Desktop Menu

デスクトップ用のメニューも作成可能らしい。こちらは試したことないのでなんとも。

 

まとめ

モバイルで役立つレスポンシブメニューだが、テーマによっては付属していなかったり、あっても使いづらいものであったりする。

Affinger5にも最初からレスポンシブメニューはついてくるが、個人的には使いづらいと感じたので前から使っているプラグインを継続して使うことにした。

Responsive Menuはものすごく使いやすいしオシャレなプラグインなのでオススメ。

ABOUT ME
van
好きなことだけ書き続ける趣味ブロガー。仕事よりも楽しく生きるのが大事。英語と写真が得意。