WordPressに簡単最強レスポンシブ「Max Mega Menu」

max-mega-menu

メニューにウィジェットが挿入できる!?
↑のようにメニューをマウスオーバーすると地図まで表示できるので会社やお店のサイトには最適ですね。
個人では地図は必要ないですが使い方次第では、カテゴリーしか表示できなかったメニューバーが魔法のバーに変身しそうです♪(^^)

スポンサーリンク

SimplicityにMax Mega Menuを入れてみました。

メニューのカスタマイズ項目が多い WordPressの日本語無料テーマ「Simplicity」ですが、ちょっと前まで Bloggerブログで私が愛用してたメニューとはちょっと違うためカスタマイズしたいけど、まだPHPが分からない(^^;)

しかたないからプラグインで探してみました。

Max Mega Menuのインストール

プラグイン ⇒ 「新規追加」から「Max Mega Menu」を検索

mega-menu2

インストール ⇒ 有効化します。

mega-menu有効化

外観メニューから↑のように をいれて設定し保存をクリック。

これでブラウザの新しいタブで自分のブログを開き 再読み込みすればメニューが変わってると思います。

Max Mega Menuの設定

外観Max Mega Menuから設定画面を開きます。

mega-menu設定画面

General Settingsではデフォルトのままでいいと思います。

下のToolsタブもキャッシュとデータ削除に関することなのでそのまま触らずに。

Theme Editorで デザインを変更してみましょう。

General Theme Settings

mega-menuデザイン

Theme Title Default
Arrow 矢印の設定
Responsive Breakpoint モバイルメニューへの切り替えサイズ
Responsive Menu Text モバイルメニューでの表示名
Line Height 行間
Z-Index 他コンテンツとの重なり位置
Shadow 影を付ける設定
Menu Bar

mega-menuデザイン設定

Menu Background メインメニューバーの背景色。FromとTOの色を変えることでグラデーションも可能。
Menu Padding メインメニューの余白
Rounded Corners 角丸設定
Menu Items Align 位置揃え
Top Level Menu Items

mega-menuデザイン設定

Menu Item Background メニュー項目の背景
Menu Item Background (Hover) メニュー項目の背景(マウスオーバー時のホバー色)
Menu Item Spacing メニュー項目の間隔
Menu Item Height メニューアイテムの高さ
Font フォントの設定
Font (Hover) マウスオーバー時のフォントの設定
Menu Item Padding メニュー項目の余白
Menu Item Rounded Corners メニュー項目の角丸
Menu Item Divider メニュー項目のしきり線
Highlight Current Item ホバーのスタイルを適用
Mega Panels

mega-menuデザイン設定

Panel Background パネルの背景
Panel Width パネルの幅
Panel Border パネルの境界線
Panel Padding パネルの余白
Rounded Corners パネルの角丸設定
Widget Padding パネル内の各ウィジェットの余白
Heading Font パネル内の各ウィジェットヘッダ見出しのフォント
Content Font パネル内のコンテンツ用のフォント
Heading Padding パネル内の各ウィジェットヘッダ見出しの余白
Flyout Menus

mega-menuデザイン設定

Item Background フライアウト(飛び出したメニュー)の背景
Item Background (Hover) マウスオーバー時の背景色
Item Height アイテムの高さ
Item Padding アイテムの余白
Flyout Menu Width フライアウトメニューの幅
Flyout Menu Border フライアウトメニューの境界線
Rounded Corners フライアウトメニューの角丸設定
Font フォントの設定
Font (Hover) マウスオーバー時のフォントの設定

CSSでの追加設定(私のメニューの場合)

Custom Stylingへの追加

↓このように、メニューの文字に影を付けたい人だけ行なって下さい。

mega-menu影

mega-menuデザイン追加


Simplicityのテーマをお使いの場合

mega-menu-mobile

スマホのMENUをタップして開き、一番下の項目をドロップダウンさせると
下のコンテンツと合体したように崩れてしまいます。

その場合は、外観テーマの編集からSimplicitynavi.phpを開き
一番下のコメントアウトした部分の上、画像の赤線部分に↓のタグを記述して下さい。
親テーマの編集になるため、必ずバックアップをとってから!

2015/8月更新
現在のSimplicityとMax Mega Menuの最新版では、この追記は必要ありません。

mega-menu phpの修正

次に、
Simplicityでは幅が狭まった時にモバイルメニューに変わり、
ヘッダーにメニューボタンが現れます。

mega-menu14

このボタンも消しておかなければメニューが2つになってしまいます。

外観テーマの編集から Simplicity childスタイルシート (style.css)

↑このように記述して下の「ファイルの更新」を押します。

お疲れ様でした。
これで「Max Mega Menu」のインストールと初期設定は完了です。

長くなったので次は、メニューへウィジェットを登録する方法と
タイトル前へのアイコン設置方法など実践的な使い方の解説をします。

記事はこちら

最後までご覧いただきありがとうございました。

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメント

  1. ktkhoasan より:

    こんばんは
    便利なプラグインをご紹介していただきありがとうございます。
    さっそく、わたしも導入したのですが、

    ちょっと、不具合というか、困ったことが起こりました。
    それで、お尋ねしたいのです。

    WordPressのテーマは、わたしもsimplicity 1.8です。
    有効化すると、きちんとメニューは表示されるのですが、

    設定のMenu Bar内容を変えて更新しても
    ブログには、反映されません。

    他に、simplicityのカスタマイズをする必要とか
    あるのでしょうか。

    おかわりでしたら、教えていただけないでしょうか。
    よろしくお願いいたします。

    • Reira Carreon より:

      ktkhoasanさん

      有効化できて表示もできてるのにMenu Barの変更が反映されない。とのことですが
      Menu Barとは、このページで紹介してる外観⇒Max Mega Menuから設定する色などの設定ですよね?
      変更した後で設定ページの一番下にある【変更を保存】は押してますよね?
      ブラウザの再読み込みも?

      simplicityのテーマ側で設定することはなにもなくて、
      逆に子テーマなどでメニューバーをいじってると、そちらが優先されてしまう可能性も考えられます。

      私も現在simplicity1.8を使ってて、Max Mega MenuのMenu Barを試しに変更してもちゃんと反映されるので、テーマやプラグインのバージョンによる不具合は考えられないので、ちょっと原因が分からないです。

  2. KOH より:

    はじめまして、KOHと申します。

    ナビゲーションメニューのカスマイズについて調べていたところ、こちらのページにたどり着きました。

    「Max Mega Menu」について解説しているサイトがあまりなく、こちらの情報を参考になんとか思ったとおりのメニューを作るができました。ありがとうございました。

    取り急ぎ御礼申し上げます。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る