Quantcast
Channel: Lahat ng gusto »プラグイン
Viewing all articles
Browse latest Browse all 10

Max Mega Menuの使い方と応用とSticky Menuの設定

$
0
0

max-mega-menu使い方

前回に続いて、
今回は「Max Mega Menu」へウィジェットやボタン、アイコンを登録してみましょう。

インストールと初期設定についてはこちら 

「Max Mega Menu」へウィジェットを挿入

何のウィジェットをメニューバーに組み込めば便利だろう?

と、訪問者視点で考えてみると一番便利なのが「検索」じゃないかな?と思います。
私自身、気に入ったブログでは「こんな話題に触れてないかな?」とサイト内検索をよくするので。(^^)

では、検索バーから順番にやってみます。
でも、その前に!

「Max Mega Menu」の設定で気を付けること

外観ウィジェットを開きMax Mega Menuのウィジェットをみると

mega-menuウィジェット

Do not manually edit this area.(手動でこのエリアを編集しないでください。)
と書かれています。
↑ここからはドラッグ&ドロップなどでウィジェットを入れないようにして下さい。

検索ウィジェットの挿入

まずは投稿カテゴリーから新規カテゴリーを追加します。

mega-menu-search

名前に分かりやすいように「検索」
スラッグは英字で「search」
親は 「なし」

これで下の新規カテゴリーを追加ボタンをクリック。

次に、外観メニューを開きます。

mega-menu追加

カテゴリーをドロップダウン表示させて、先ほど作った空のカテゴリー「検索」に チェックを入れてメニューに追加をクリック。
(画像では説明用に作ったため「検索2」となっています)

追加すると右側のメニュー構造にリストとして現れます。

mega-menu追加

移動ツールで設置したい階層へ移動し、右下のメニューを保存をクリック。

保存すると項目をマウスオーバーすることでMega Menuボタンが出現するのでクリック。

mega-menu追加

Mega Menu 設定

開いた設定ウィンドウの説明です。

mega-menu設定

1. ここでメニュー項目の設定をします。
2. を入れます。
3. ドロップダウンすると自分の登録してるウィジェットがリストされるので「検索」を選択。
4. 1つしか登録しない場合でもカラム数で横幅を決めることができます。

General Settings

次に一般設定の項目です。

mega-menu設定

1. メニュータイトルを隠します。
2. 矢印を隠します。
3. リンクを無効にします。
4. メニューの揃え方。
5. サブメニューの揃え方。

 私のメニューの場合は、項目が多すぎて④をleftとしてますが、項目が少ない場合は、検索だけ右寄せのRightを選択してもいいと思います。

変更を保存をクリック。

Menu Iconの選択

メニュータイトル前にアイコンを選択して設置することができます。
↑でHide Textに を入れた場合はタイトルがアイコンだけの表示にすることができます。

mega-menu設定

検索なので虫眼鏡を選択。

こんな風にアイコンだけのメニューボタンができました。

mega-menuボタン

マウスオーバーすると↓このように現れます。

mega-menu-demo

リンクの挿入

私のメニューにはボタンでメールフォームへのリンクをはっています。

メールでなくとも、SNS等の自分のページへリンクを貼りたい方もいると思います。
その場合は、外観メニューからリンクを選択して下さい。

mega-menuリンクの設定

↑リンクさせたいURLとリンクテキストを入力してメニューに追加をクリック。

あとは、上記の「検索」と同じように進みますが、
Mega Menu 設定では、ウィジェットは選択しないで下さい。

General Settingsでは、Disable Linkチェックを外します。

変更を保存をクリックして、次のMenu Iconの選択で好きなアイコンを選択すれば完了です。

私の使ってるメールフォーム

応用編

 その他のものを追加したい場合。

 私のように海外からの訪問を想定して翻訳を入れたい場合は、
プラグインの追加から翻訳を有効化することで、Mega-Menuから選択が可能になります。
私が追加したのはGoogle Website Translator です。
(古いプラグインばかりで選択肢が少なかったので他にお薦めがあれば教えて下さいね。)

 外部からのもの、例えばiframeなどを設置したい場合は、
テキスト・ウィジェットを選択してコードを入れることで可能だと思います。
(まだ私は試してませんが)

 他にもImage Widget などを追加することでドロップダウンで写真ギャラリーを表示することもできます。
mega-menu-demo

☆★ 最短4分で広告を掲載できる『忍者AdMax』

禁断の技(自己責任で!)

Max Mega Menuには、このフリー版とは別に有料のPro版があります。
個人だと1サイト19ドル。
機能もかなり増えて魅力的ですが、フリー版で充分だと思います。

「Sticky Menu」について

Pro版での機能の1つに「Sticky Menu」といってページをスクロールするとメニューバーが最上部に来たときに固定される機能があります。

Bloggerブログでは、この機能が付いたテンプレートを使用していたこともあり、このブログにもすぐにカスタマイズして設置したのですが、ある記事を読んですぐにやめました。

ドロップダウン式の「Sticky Menu」はアドセンス規約違反!

ページをスクロールしててアドセンス広告が表示されてる上で、上部に固定されたメニューからサブメニューがドロップダウンされると誤クリックを誘発する恐れがある。

実際に質問した人へのアドセンス側からの解答は、
「見つけたら通報して下さい」と言ったそうなので恐ろしくて使えません。(^^;)

なので「アドセンスはしてないよ~」とか「ドロップダウンじゃないから大丈夫?」という方のみへ自己責任で設置方法を解説します。
(Max Mega Menuでドロップダウンさせない人はいないかな・・?)

Sticky Menu の設定方法

参考になったサイトです。
JavaScript – CSSとJSで、スクロールして一定の場所を過ぎると、上部固定するメニューを作る – Qiita 

テーマによってIDやclass名が違ってますが
Simplicityの場合で解説すると子テーマのcssへ以下を記述します。
(必ずバックアップをとってからして下さい)

/* Sticky Menu */
header {
    height: 100px;
}
.fixed {
    position: fixed;
    top: 0;
    z-index: 1;
}
#navi {
  width: 100%;
}

3行目のheight: 100pxはご自分のブログのヘッダーの高さに合わせて下さい。

続いて、サーバーのSimplicity childフォルダ内の「javascript.js」を開き以下を記述します。

jQuery(function() {
    var nav = jQuery('#navi');

    // メニューのtop座標を取得する
    var offsetTop = nav.offset().top;

    var floatMenu = function() {
        // スクロール位置がメニューのtop座標を超えたら固定にする
        if (jQuery(window).scrollTop() > offsetTop) {
            nav.addClass('fixed');
        } else {
            nav.removeClass('fixed');
        }
    }
    jQuery(window).scroll(floatMenu);
    jQuery('body').bind('touchmove', floatMenu);
});

2行目の#naviの部分を、ご自身のメニューのIDへ変更して下さい。
Simplicityはこのままで大丈夫です。

以上の2つをコピペするだけで、メニューをスクロールしてみると上部でメニューバーが固定されたと思います。

これってスマホでは本当に便利な機能なので私も使い続けたいけど、アドセンスをしてるので残念でした。(T_T)

どなたか、メニューをホバーした時だけアドセンスがクリックできなくなるJSを作って下さ~い。

以上!お疲れ様でした♪(^^)/


Viewing all articles
Browse latest Browse all 10

Trending Articles