【WordPress】テーマCocoonでスマホのハンバーガーメニューを設定する方法

WordPress

ホームページを作ってみたけどスマホ版のヘッダーがごちゃごちゃして分かりづらい・・・
とお悩みではないですか?

本記事ではハンバーガーメニューを使ってスマホのヘッダーをスッキリ見せる方法をご紹介します。
スマホのヘッダーを変えてみたい方は是非読んでみてくださいね。

実は簡単!Cocoonでハンバーガーメニューはすぐに作れる

やることは2つだけ。とっても簡単です。

  • 新しいメニューを作成する
  • 作成したメニューを表示させる

以上。

YUKI
YUKI

10分あればできます!

ハンバーガーメニューとは?

そもそもハンバーガーメニューとは何か気になりますよね。「ハンバーガーのメニュー表?」と思ったあなたにハンバーガーメニューについて説明しておきますね。

ハンバーガーメニューとはスマホサイトなどでよく見かける三本線の操作メニューのことをいいます。

↓これです。

3本の線がハンバーガーに見えるため”ハンバーガーメニュー”という名前が付けられたそうです。

美味しそうな名前ですね・・・

YUKI
YUKI

それではハンバーガーメニューについて理解できたところで、早速設定していきましょう!

新しいメニューを作成する

1. 外観の中のメニュー 新しいメニューを作成しましょうを選択。

2. メニュー名を入力してメニューを作成を選択。
今回はモバイルヘッダーという名前を付けてみました。

3.  ヘッダーモバイルボタンにチェックを入れてメニューを保存

4. ①②の部分を入力してメニューを追加メニューを保存
②で入力した文字が実際に表示されます。

①に入力するURLコマンドはこちらを参考にしてください。

#menu・・・メニュー
#home・・・ホーム
#share・・・シェア    
#follow・・・フォロー
#search・・・検索
#toc・・・目次
#top・・・トップ
#prev・・・前へ
#next・・・次へ
#comments・・・コメント
#sidebar・・・サイドバー
#logo・・・サイト名

私は左に「#menu メニュー」中央に「#logo ロゴ」右に「#search 検索」を設置してみました!

作成したメニューを表示させる

1. Cocoon設定 → モバイルを選択

2. 矢印の部分にチェックを入れて変更をまとめて保存

モバイルメニューの中で「フッターモバイルボタン」を選択するとフッターに設置することもできます。

以上で設定完了です!

スマホで確認してみると・・・

いい感じです!ヘッダーがスッキリしました。

ロゴが二重表示になってしまった場合の対処法

書いてある通りに設定したのに何故か上手くいかないことってよくありますよね。私もこれで苦戦したのでモバイルヘッダーを設定した後にロゴが二重で表示されてしまった場合の対処法についてもご紹介しておきます。

YUKI
YUKI

チェックを1つ外すだけという単純な作業で解決しました!

1. Cocoon設定の中のモバイルを選択。
2. サイトヘッダーロゴを表示するのチェックを外す。
3. 変更をまとめて保存

以上。これだけでロゴが消えてスッキリします。

スマホメニューのデザインをカスタマイズしたい時はどうする?

スマホメニューのデザインカスタマイズについては、yuji blog.さんのブログで紹介されている記事がおすすめです。
こちらの記事でとても分かりやすく解説されているのでよかったら参考にしてみてください。
カラーやフォントサイズを自分流に少しアレンジしてみるのもいいですね。

まとめ

ハンバーガーメニューは無事に設定できましたか?
スマホからのアクセスはPCよりも多いので、スマホ版も見やすいように設定しておきたいですね。

YUKI
YUKI

ヘッダーやアイキャッチ画像など、ホームページで使用する画像でお困りではないですか?

formom designでは、ホームページやSNSで使える画像制作を行っています。
料金や詳細は上の画像をクリックするとご覧いただけます。

インスタグラム
YUKI
YUKI

Instagramでは制作実績やWEBデザイン関連の役立つ情報などを発信しています。

よかったら、こちらもチェックしてみてください。

YUKIをフォローする

この記事を書いた人
Web Designer | YUKI

一児の母/Webデザイナー
出産後、未経験からWebデザインを学び、フリーランスWebデザイナーとして活動中。
結婚や出産で環境が変わっても、女性が自分らしく輝けるようにデザインを通してサポート。
ホームページやSNSで使用する画像/ロゴ/名刺 など制作しています。
ご依頼・お問い合わせはポートフォリオサイトをご確認ください。

WordPress
スポンサーリンク
formom design blog
タイトルとURLをコピーしました