ピックアップコラム
-
Pickup!
サイドバーとは?サイドバーを設置するメリットと書き方
-
Pickup!
カラー別にみてみる!WEBサイトにおける配色パターン
-
Pickup!
プラグインなし!オリジナルSNSシェアボタンの作り方ガイド
-
Pickup!
ワードプレスのプラグインで画像の圧縮・最適化をしてみた
スマホでPC版におけるグローバルナビの代わりになっているのがハンバーガーメニュー。ハンバーガーメニューは画面表示が少ないスマホサイトでは大変役立ちます。
ただ何も考えずに実装するとPC版に使いにくいなどのデメリットもあります。今回は、ハンバーガーメニューについてご紹介していきます。
ハンバーガーメニューとはどんなものなのか?具体的に使うシーンをご紹介します。
ハンバーガーメニューは、主に3本の線で構成されています。その形がハンバーガーに似ていることから、ハンバーガーメニューともハンバーガーアイコンと呼ばれています。
多くのサイトは3本線ですが、まれに4本線や2本線で構成しているものもあります。
ハンバーガーメニューは主に、スマホサイトでメニューを表示させるときに使います。たまにPCサイトでもハンバーガーメニューを表示させているところもありますが、主に画面が狭いスマホやタブレット端末でグローバルナビなどのナビゲーションメニューで使われています。
ハンバーガーメニューのメリットとデメリットは以下のとおりです。
特に表示エリアが少ないスマホにおいて、PC版と同様のグローバルメニューを設置してしまうと、画面がメニューで占有されてしまい、ファーストビューで、本来訴えたいコンテンツが表示できなくなります。
ハンバーガーメニューなら、少ないスペースでメニュー表示が可能ですので、その分本来訴えたいコンテンツをファーストビューで表示することが出来ます。
FacebookやYAHOO!などメジャーなサイトの多くのスマホサイトで使われています。そのため、ユーザーとしては「三本線があったらメニュー」と認識されやすくなります。
ただ全てのサイトで使われているわけではないので、例えば初めてスマホを使った人や、メニューであることに気づかない可能性もあります。
PC版でよく見かけるナビゲーションメニューだと、画面に表示できる数に限界(おおよそ5~7個程度)があります。文字を小さくすれば数は増えますが、今度はボタンが押しにくい、誤操作が発生してしまいます。
ハンバーガーメニューなら、縦に並べて、スクロールできるようにすれば、メニューをいくらでも表示できます。
特に、後からメニューを追加したい場合は、レイアウトの変更をすることなくできるので、メンテナンス性という意味でも優れています。
スマホでは有効なハンバーガーメニューですが、PC版に設置すると目立ちにくく、メニューがどこにあるのか、どんなメニューがあるのか分からなくなってしまいます。
そのため、PC版は、ナビゲーションが表示されているメニューを表示させ、スマホ版はハンバーガーメニューといったようにメニューの表示をデバイスで分けたほうが良いです。
ハンバーガーメニューの遷移はたいてい、タップしてメニュー一覧を表示、その次に遷移したいメニューに遷移する形となり、PC版だと1遷移済むところ、ハンバーガーメニューは2遷移必要です。
そのため、以下のように、ハンバーガーメニューの下に、よく使われるメニューをナビゲーションとして表示するとより親切となります。
メリットの項目でも紹介しましたが、一見すると3本線なので何を占めているのか分からないです。そのため、以下のように3本線+MENUと表示させると初心者でも何を表示しているのか分かります。
ハンバーガーメニューはhtmlとcssだけでできます。なおスマホだけ表示させるのも、cssだけでコントロール可能です。
<!--▼グローバルナビ--> <div id="a-top"></div> <div id="global-nav"> <dl id="global-nav-in"> <dt class="btn-gnav"></dt> <dd class="menu-wrap"> <ul id="menu" class="menu"> <li id="menu-item-31" class="first menu-item menu-item-type-post_type menu-item-object-page menu-item-31 even" style="z-index: 1000;"><a href="https://pecopla.net/sample-page/">サンプルページ</a></li> <li id="menu-item-2600" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2600 odd" style="z-index: 990;"><a href="https://pecopla.net/sample-page2/">サンプルページ2</a> </li> <li id="menu-item-2397" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-2397 even" style="z-index: 980;"><a href="https://pecopla.net/sample-page3/">サンプルページ3</a></li> <li id="menu-item-3165" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3165 odd" style="z-index: 970;"><a href="https://pecopla.net/sample-page4/">サンプルページ4</a></li> <li id="menu-item-2339" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2339 even" style="z-index: 960;"><a href="https://pecopla.net/sample-page5/">サンプルページ4</a></li> </dd> </dl> </div> </div>
/*-------------------------------------------------------- グローバルナビ --------------------------------------------------------*/ #global-nav{ border-top: 0; border-bottom: 0; } #global-nav dt{ background: url(./images/icon/menu.png) 1em center no-repeat #99179c; color: #fff; font-size: 1.4em; border-bottom: solid 1px #c43ec7; background-size: 20px; background-position: 95%; } #global-nav #global-nav-in .menu-wrap{ display:none; } #global-nav #global-nav-in #menu{ margin-bottom: 0; } #global-nav #global-nav-in #menu, #global-nav #global-nav-in #menu li{ width: 100%; border: 0; } #global-nav #menu li.first{ border-left: 0; } #global-nav #global-nav-in #menu li{ border-bottom: 1px solid #c43ec7; background-color: #fff; white-space: normal; border-top: #6d116f solid 1px; } #global-nav #global-nav-in #menu li.first{ border-left: 0; } #global-nav #global-nav-in #menu ul{ position: static; width: auto; padding-left: 10%; } #global-nav #global-nav-in #menu ul li{ width: 100%; } #global-nav #global-nav-in #menu ul li:last-child{ border-bottom: 0; } /*メニューのデザイン*/ #global-nav #global-nav-in #menu li a:link, #global-nav #global-nav-in #menu li a:visited, #global-nav #global-nav-in #menu li a:hover, #global-nav #global-nav-in #menu li a:active{ background: url(./images/icon/icon-arrow04.png) 1em 1em no-repeat #99179c; } #global-nav #global-nav-in #menu ul li a{ width: auto; } #global-nav .btn-gnav{ display:block; padding: 0.2em; cursor: pointer; } #main-image .catch-copy{ font-size: 1.4em; } /* スマホスタイル調整新規 */ /* nav */ dl#global-nav-in { width: 100%!important; margin: 0!important; box-sizing: border-box; padding-left: 0; } #global-nav { position: relative; height: auto; } #global-nav img { width: 70px; position: absolute; left: 5px; top: 5px; } #global-nav .menu-wrap{ padding: 0; } #global-nav .btn-gnav { display: block; padding: 0.2em; cursor: pointer; height: 28px; } #global-nav #menu li a { border-left: none; } .pc{ display: none; } .sp{ display: block; } }
上記方法でハンバーガーメニューは作成しますが、HTMLやCSSの知識がないと作成できません。
ただ、ワードプレスで作成する場合は、「WP Responsive Menu」というプラグインが用意されています。
このプラグインを使うことで、簡単にしかもスマホ版にだけハンバーガーメニューを表示することが出来ます
WP Responsive Menuのインストールはこちらから
WP Responsive Menuをインストールしたら、「有効化」しましょう。このプラグインは、インストールしただけでは、
意味がなく、機能を使う場合は、必ず有効化する必要があります。
デフォルトでは何もメニューが用意されていないので、[here]をクリックしてメニューを作成します。
クリックしたら、メニュー名を入れて「メニューを作成」ボタンを押し、ハンバーガーメニューを作成します。
作成したものと、メニューが被らないように、「Elements To Hide On Mobile」の項目を「#header」や「#menu」などテーマに合わせて入力します。これをやると、スマホメニューのみにハンバーガーメニューが表示されます。
受付時間:平日10:00~19:00(土・日・祝日を除く)