Snow Monkey Mega Menuの使い方

スノーモンキーメガメニュー

snow monkeyメガメニューの使い方

2021/3/23にsnow monkeyのメガメニューがリッリースされましたが、早速使ってみました。実際にこのブログページで使ってます。
メガメニューについてと、メガメニューの使い方・ちょっとおしゃれなスタイリングを説明します。

.

メガメニューとは?

メガメニューとは

メガメニューとは、ヘッダーメニューをアイキャッチ画像付きで表示できる機能です。実際にこのページのメニューをホバーしてもらうとわかると思います。snow monkeyの公式サイトで配信されているプラグインをインストールすると使用できます。公式の説明・ダウンロードはこちらから。

使い方手順

公式サイトからプラグインをダウンロード・追加
ヘッダーメニューの設定
追加CSSで少しおしゃれに

公式サイトからプラグインをダウンロード・追加

プラグイン追加

まずはこちらの公式サイトからzipファイルをダウンロードして、自分のサイトの管理画面からプラグインに追加してください。なお、こちらのダウンロードはサブスク会員限定です。プラグイン → 新規追加 のページにアップロード という項目があるので、それをクリックするとzipファイルをアップロードできます。

なお、このプラグインを使うにはsnow monkeyテーマのver.14.02以上 が必要なので、アップデートしておきましょう。

ヘッダーメニューの設定

ヘッダーの設定

外観→メニューのヘッダー(グローバルナビゲーション)を選びます。この中のトップレベルのメニュー
(上記で言うと、”旅の日記” や ”エンジニアブログ”)をクリックして、メガメニューの設定メガメニュー1を選択します。この数字は階層によって適宜設定してください。

メガメニューの選択

これで基本設定は完了ですトップページに戻り、ヘッダーメニューが変わっているかみてみましょう!

補足:うまくいかない場合

上記設定で適用されない場合は以下の2点が考えられます。

・設定したメニューがグローバルナビゲーションに設定されていない。

・そもそも副項目に画像が設定されていない。

まずはカスタマイズで設定したメニューがグローバルナビゲーションに設定されているかを確認しましょう。確認はカスタマイズページの メニュー → ヘッダー(自分の設定した任意の名前のもの) からできます。メニューの位置から、グローバルナビゲーション にチェックが入っているかを確認してください。

グローバルナビゲーションメニューの設定

もう一つの原因としては、そもそもアイキャッチ画像の写真が副項目メニューページに設定されていないことです。この設定が少しわかりにくいためできていないことがよくあります。

カスタマイズ画面の状態から該当の副項目ページに行きます。僕の場合は 旅の日記/島と自然(副項目)のページのことです。このページのカスタマイズメニューから デザイン → [島と自然]カテゴリーページ設定 から写真を設定できます。

アイキャッチ画像設定

グローバルメニューを少しおしゃれに

メガメニューデフォルト
引用:スノーモンキー公式ページ

デフォルトでは上記のようにbackgroundの色がベタ塗りとなります。少しこれを変えて、透明にすることでかっこよくなります。
以下のコードを追加CSSに追加するだけでできます。ぜひやってみてください

.c-navbar__submenu::before{
background:rgba(0,0,0,0.5)!important;
}
.c-navbar__submenu{
	background:none!important;
}
スノーモンキーメガメニュー2

まとめ

ヘッダーメニューが単調になりやすいという、snow monekyの欠点が一つ解消されましたね。(素晴らしいアップデートありがとうございます!!)
どんどんsnow monkey の使用者が増えているので、できるところは差別化していきましょう。