ホームページを作ってみたけどスマホ版のヘッダーがごちゃごちゃして分かりづらい・・・
とお悩みではないですか?
本記事ではハンバーガーメニューを使ってスマホのヘッダーをスッキリ見せる方法をご紹介します。
スマホのヘッダーを変えてみたい方は是非読んでみてくださいね。
実は簡単!Cocoonでハンバーガーメニューはすぐに作れる
やることは2つだけ。とっても簡単です。
以上。
![YUKI](https://design-formom.com/wp-content/uploads/2021/02/00DAA173-E6EA-45DE-B132-10BAC3923677-150x150.jpg)
10分あればできます!
ハンバーガーメニューとは?
そもそもハンバーガーメニューとは何か気になりますよね。「ハンバーガーのメニュー表?」と思ったあなたにハンバーガーメニューについて説明しておきますね。
ハンバーガーメニューとはスマホサイトなどでよく見かける三本線の操作メニューのことをいいます。
↓これです。
![](https://design-formom.com/wp-content/uploads/2020/08/IMG_4293-1.jpg)
3本の線がハンバーガーに見えるため”ハンバーガーメニュー”という名前が付けられたそうです。
美味しそうな名前ですね・・・
![YUKI](https://design-formom.com/wp-content/uploads/2021/02/00DAA173-E6EA-45DE-B132-10BAC3923677-150x150.jpg)
それではハンバーガーメニューについて理解できたところで、早速設定していきましょう!
新しいメニューを作成する
1. 外観の中のメニュー →新しいメニューを作成しましょうを選択。
![](https://design-formom.com/wp-content/uploads/2020/08/menu1-1024x481.png)
2. メニュー名を入力してメニューを作成を選択。
今回はモバイルヘッダーという名前を付けてみました。
![](https://design-formom.com/wp-content/uploads/2020/08/menu2-1024x516.png)
3. ヘッダーモバイルボタンにチェックを入れてメニューを保存
![](https://design-formom.com/wp-content/uploads/2020/08/menu3-1024x508.png)
4. ①②の部分を入力してメニューを追加 → メニューを保存
②で入力した文字が実際に表示されます。
![](https://design-formom.com/wp-content/uploads/2020/08/menu4-1024x536.png)
①に入力するURLコマンドはこちらを参考にしてください。
#menu・・・メニュー
#home・・・ホーム
#share・・・シェア
#follow・・・フォロー
#search・・・検索
#toc・・・目次
#top・・・トップ
#prev・・・前へ
#next・・・次へ
#comments・・・コメント
#sidebar・・・サイドバー
#logo・・・サイト名
![](https://design-formom.com/wp-content/uploads/2020/08/スクリーンショット-2020-08-29-14.07.18-1024x458.png)
![](https://design-formom.com/wp-content/uploads/2021/02/00DAA173-E6EA-45DE-B132-10BAC3923677-150x150.jpg)
私は左に「#menu メニュー」中央に「#logo ロゴ」右に「#search 検索」を設置してみました!
作成したメニューを表示させる
1. Cocoon設定 → モバイルを選択
![](https://design-formom.com/wp-content/uploads/2020/08/menu5-1024x259.png)
2. 矢印の部分にチェックを入れて変更をまとめて保存
![](https://design-formom.com/wp-content/uploads/2020/08/menu6-1024x833.png)
以上で設定完了です!
スマホで確認してみると・・・
![](https://design-formom.com/wp-content/uploads/2020/08/menu7-1.jpg)
いい感じです!ヘッダーがスッキリしました。
ロゴが二重表示になってしまった場合の対処法
![](https://design-formom.com/wp-content/uploads/2020/08/IMG_4368-1.jpg)
書いてある通りに設定したのに何故か上手くいかないことってよくありますよね。私もこれで苦戦したのでモバイルヘッダーを設定した後にロゴが二重で表示されてしまった場合の対処法についてもご紹介しておきます。
![YUKI](https://design-formom.com/wp-content/uploads/2021/02/00DAA173-E6EA-45DE-B132-10BAC3923677-150x150.jpg)
チェックを1つ外すだけという単純な作業で解決しました!
![](https://design-formom.com/wp-content/uploads/2020/08/スクリーンショット-2020-08-29-13.37.03-1024x464.png)
1. Cocoon設定の中のモバイルを選択。
2. サイトヘッダーロゴを表示するのチェックを外す。
3. 変更をまとめて保存
以上。これだけでロゴが消えてスッキリします。
スマホメニューのデザインをカスタマイズしたい時はどうする?
スマホメニューのデザインカスタマイズについては、yuji blog.さんのブログで紹介されている記事がおすすめです。
こちらの記事でとても分かりやすく解説されているのでよかったら参考にしてみてください。
カラーやフォントサイズを自分流に少しアレンジしてみるのもいいですね。
まとめ
ハンバーガーメニューは無事に設定できましたか?
スマホからのアクセスはPCよりも多いので、スマホ版も見やすいように設定しておきたいですね。
![](https://design-formom.com/wp-content/uploads/2021/06/formom-hp-1-1024x538.jpg)
![YUKI](https://design-formom.com/wp-content/uploads/2021/02/00DAA173-E6EA-45DE-B132-10BAC3923677-150x150.jpg)
ヘッダーやアイキャッチ画像など、ホームページで使用する画像でお困りではないですか?
formom designでは、ホームページやSNSで使える画像制作を行っています。
料金や詳細は上の画像をクリックするとご覧いただけます。
![インスタグラム](https://design-formom.com/wp-content/uploads/2021/03/instagram.png)
![YUKI](https://design-formom.com/wp-content/uploads/2021/02/00DAA173-E6EA-45DE-B132-10BAC3923677-150x150.jpg)