WordPress

ワードプレスのモバイル時ナビゲーション改善 その2

こんにちは〜 GWも明日で終了ですね。

今日はわざわざ遠くからいらした親戚のおじさんおばさんを熊本が誇る火山 阿蘇山にご案内。阿蘇神社や白川水源にいって自然の安らぎに癒やされてきました。

たまには外でのんびりするのもいいもんです。

 

さて今回は前回のナビゲーション改善の続きです。

ついに!これなら絶対回遊率アップだ!という方法を見つけたのでその方法をシェアします。

プラグイン Max Mega Menu

使うのは、このプラグイン。

※本来はサブメニューを含む画像付きメニューを作るメガメニュー作成プラグイン

 

レスポンシブ系メニューはモバイルの横幅になるとトグルメニューになってしまいます。これをモバイルの横幅でもPCと同じようにナビゲーションを表示したままにすればナビゲーションのクリック率も増えるはず。

そう考えました。

このMax Mega Menuは、モバイルの幅を低く設定することでスマホやタブレットの幅でもトグルメニューにならずにナビゲーションを表示することが可能です。

 

ナビゲーション改善方法

Responsive Breakpointの設定

Mega Menu管理画面を開いて、Menu ThemesーMobile Menuを選択。その中のResponsive Breakpointを100px(デフォルト値は600px)など小さい値を入れてあげるとスマホ画面でもナビゲーションが表示されたままになる。

メニューの設定

外観ーメニューを開くと左側にMax Mega Menu Settingsというパーツが増えています。このパーツの一番上のEnable(有効)にチェック。

改善方法はたったこれだけですw

ちなみに上画像のメニュー右側の各メニューにカーソルを合わせたらメガメニューの個別設定が可能です。(モバイル非表示・アイコン設定が便利)

改善結果

トグルメニューは残したまま、モバイル表示でナビゲーションを残すことができました。トグルメニューを押すとナビゲーション表示・非表示を切り替えることが可能です。

ただし今回の設定をする場合、メニューの数、文字数が多い場合は2段3段と増えてしまうのでメニューの数と文字数は少なめに設定することが必要です。フォントサイズはメガメニューの設定画面の中で変更可能です。

アフィリエイトの場合ほとんどがモバイル表示だと思うので、ヘッダーメニューをモバイル優先で考えてしまっていいと思います。このブログの場合はPCも多いので向いていませんが。

今回の手法以外にいい方法を僕にアドバイスいただける方がいたら是非コメントください! 色んなアイデアをお待ちしております。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

イチオシ記事

  1. アフィリエイト

最近の記事 おすすめ記事
  1. インフィード広告を入れる
  2. タイトルがなっとらん!
  3. アフィリエイト防災
  4. 長期トレンド
  1. アフィリエイト防災
  2. 長期トレンド
  3. アフィリエイトのキーワード選び
PAGE TOP