WordPress
【WordPress】レスポンシブモバイルメニュープラグインWP Mobile Menu
April 1, 2017
WP Mobile MenuはWordPressのメニューを使ってレスポンシブモバイルメニュー実装できるプラグイン。左右どちらでもメニュー設置可能、レスポンシブ対応、ロゴ設置、背景設定、モバイルメニューを表示するブラウザ幅設定、Googleフォントなど設定項目も充実しています。
WP Mobile Menuプラグインを導入
ダッシュボード >> プラグイン >> 新規追加 >>
有効化にするとMobile Menu Optionsが追加されます。
登録しなければSkipをクリックします。
Mobile Menu Options
General Options
| Enable Mobile Menu | モバイルメニューを有効 |
|---|---|
| Enable Left Header Menu | 左ヘッダーメニューを有効 |
| Enable Right Header Menu | 右ヘッダーメニューを有効 |
| Width Trigger | モバイルメニューを表示する幅 |
| Hide Elements | 要素を非表示 |
| Custom CSS | カスタムCSS |
Header options
| Site Logo | サイトロゴ |
|---|---|
| Logo | ロゴ |
| Naked Header | 背景を無背景色 |
| Alternative Logo URL | 代替ロゴURL |
| Disable Logo URL | ロゴのURLを無効 |
| Header Height | ヘッダーの高さ |
| Logo Top Margin | ロゴ上マージン |
| Header Text | ヘッダーテキスト |
| Header Menu Font | ヘッダーメニューフォント |
Left Menu options
| Left Menu | 左メニュー |
|---|---|
| Left Menu Font | 左メニューフォント |
| Left Menu Background Image | 左メニュー背景画像 |
| Left Menu Background Image Opacity | 左メニュー背景画像の不透明度 |
| Menu Icon | メニューアイコン |
| Menu Icon Image | メニューアイコンイメージ |
| Left Menu Width Units | 左メニューの幅ユニット |
| Right Menu Panel Width(Pixels) | 右のメニューパネルの幅（ピクセル） |
| Right Menu Panel Width(Percentage) | 右のメニューパネルの幅（パーセント） |
| Icon Top Margin | アイコン上マージン |
| Icon Left Margin | アイコン左のマージン |
Right Menu options
| Right Menu | 右メニュー |
|---|---|
| Menu Icon | メニューアイコン |
| Menu Icon Image | メニューアイコンイメージ |
| Right Menu Font | 右メニューフォント |
| Right Menu Background Image | 右メニュー背景画像 |
| Right Menu Background Image Opacity | 右メニュー背景画像の不透明度 |
| Right Menu Width Units | 右メニューの幅ユニット |
| Right Menu Panel Width(Pixels) | 右のメニューパネルの幅（ピクセル） |
| Right Menu Panel Width(Percentage) | 右のメニューパネルの幅（パーセント） |
| Icon Top Margin | アイコン上マージン |
| Icon Right Margin | アイコン右のマージン |
Color Options
| Header Background Color | ヘッダーの背景色 |
|---|---|
| Header Text Color | ヘッダーテキストの色 |
Left Menu Colors
| Left Menu Icon Color | 左メニューアイコンの色 |
|---|---|
| Background Color | パネルの背景色 |
| Text Color | テキストの色 |
| Background Hover Color | 背景ホバー色 |
| Hover Text Color | ホバーテキストの色 |
| Submenu Background Color | サブメニューの背景色 |
| Submenu Text Color | サブメニューのテキストの色 |
Right Menu Colors
| Right Menu Icon Color | 右メニューアイコンの色 |
|---|---|
| Background Color | パネルの背景色 |
| Text Color | テキストの色 |
| Background Hover Color | 背景ホバー色 |
| Hover Text Color | ホバーテキストの色 |
| Submenu Background Color | サブメニューの背景色 |
| Submenu Text Color | サブメニューのテキストの色 |
