【ブログ初心者】スマホ画面用ハンバーガーメニューの表示方法

副業・ブログ運営

まいど！今年こそブログ作りをやり遂げたいおこめちゃんです！

ブログ初心者の皆さん、ブログページのトップにメニューをつけたいと思ったことありませんか？

おこめちゃん
おこめちゃん

Google AdSenseなどのアフェリエイトを導入したい人は、
トップ画面を整えるところから始めた方がいいみたい！

実は私もずっとつけたいと思っていたのですが、
ネットで調べたりChatGPTに聞いたりするもうまくいかず断念していました。

今回ようやく重たい腰を上げ、リベンジ！

うまくできたので、その方法を書いていきたいと思います！

トップメニューって何？

突然ですが、”ハンバーガーメニュー”って知っていますか？

答えは、この画像の右部分。

スマホでサイトを見たときに右上に三本線で表示され、タップするとスルッと項目が出てくる…あれです。

ブログを始めて数ヶ月。

「トップページをもっと見やすくかっこよくしたい」と思いながら自分のページを眺めるうちに、

どうしても画面中央下部の「☆ホーム」が気になるように。。笑

このボタンを消して、ハンバーガーメニューでスタイリッシュにコンテンツを選べるようにしたい！

ところがいざ実際にやってみると、
WordPressの設定項目のどこで何をやればどうなるのやら、頭の中が「？？？」に。

「まずはどこ触ればいいの？」→「あれ、メニューが消えた！」→「…もうやめたい」って何度もなりました。(・ω・`｡) 笑

今日は、そんなおこめちゃんの試行錯誤の記録と、最終的にメニューをつけることができた方法を、失敗談も含めてお届けします。

ゴールイメージ

まず完成形をお見せします。

この３本線部分をポチッと押すと、メニューが出てきます。

Screenshot
  • PC：ヘッダー部分にメニューが横並び
  • スマホ：右上に三本線（ハンバーガーアイコン）、タップするとカテゴリーや固定ページが表示
  • メニューにかわいいアイコンやイラストも入れられる

これがあると、ブログの回遊性がグンと上がります！

回遊性とは、ページビュー数(閲覧数) ÷ セッション数(訪問数)で算出される指標で、

サイトに長く留まる・いろんな記事を読む人が多いと、回遊性も高いと言えます。

大抵の訪問者は目的の記事が読みたいだけなので、一瞬サイトを訪問し離脱します。

もう１つのメリットはズバリ、ブログページのクオリティ向上！🔥
わかりやすいメニューの設置で、訪問者さんが迷子にならず、読みたい記事にスッとたどり着けます。

より良いページを作ることで、書き手・読み手双方にとってメリットがあるのです！

それでは実際にハンバーガーメニューを挿入した方法を解説していきます✨

結論：必要なステップ　所要時間１０〜３０分

やることは以下。

  1. WordPress管理画面にログイン　
    • 左メニューから「Cocoon設定」を開く
  2. 外観＞メニューから自分の好きなレイアウトでメニューを作成する
    • イラストアイコンを登録したい、メニューを開いた時のレイアウトを変えたいときはここをいじります！今回は割愛。
  3. Cocoon設定で、モバイルタブを選択
    • モバイル環境用の表示設定画面に切り替わる
  1. モバイルメニューの項目を確認
    • トップメニューを選択する
  1. 「モバイルボタン」オプションの設定
    • 必要に応じて以下を選択：必要に応じて以下を選択：
      • 「モバイルボタンを固定表示する」→スクロールしても常に表示される
      • 「常にサイトヘッダーロゴを表示する」→ボタン横にロゴを表示する
  2. 同ページ左下「変更をまとめて保存」ボタンをクリック
    • 保存しないと設定は反映されないので注意。
  3. キャッシュをクリア（できれば）
    • Cocoonのキャッシュ削除機能や、ブラウザのキャッシュをクリアして最新の状態に。
    • スマホやブラウザのデベロッパーツールで確認
  4. スマホやブラウザのデベロッパーツールで確認　
    • 画面幅1024px以下にすると、ハンバーガーメニューが表示される

苦戦1：ハンバーガーメニューが出ない

最初に私がつまずいたのはここ。

３本線のメニューバーが出ず、上の部分に全部表示されっぱなし。

「ハンバーガーってどうやって出すの？」って思って調べても、
サラッと「モバイルメニューを有効化しましょう」としか書いてない。

結論から言うと、Cocoon（テーマ）を使っている場合は、

外観 → メニュー → メニューの位置 → ヘッダーメニューにチェック

「ヘッダーモバイルメニュー」「モバイルスライドイン」にもチェックを入れろと出てくるサイトもありましたが、私はヘッダーメニューのみで表示されました。

あとは、メニュー編集画面の右上に小さくある「表示オプション」にチェックが入っていなくて、
そもそもその設定項目が出ていない場合もあるようです。

おこめちゃん
おこめちゃん

一見シンプルなのに、実際やってみるとポロポロとエラーが出てくる…
ChatGPTを活用しながら１つ１つ修正していけば問題なし◎

苦戦2：メニューが重複して出る

やっと表示された！と思ったら、今度はメニューが二重に。

PCではヘッダーに、スマホではハンバーガーの中に…だけならまだしも、

なぜか同じ項目が上下に二段重ねで表示されてしまいました。

これは、メニューの位置設定で複数にチェックを入れすぎていたのが原因でした。

たとえば「グローバルナビ」「モバイルスライドイン」「ヘッダーモバイルボタン」の3つ全部に同じメニューを割り当ててしまうと、テーマによっては重複します。

解決方法は、PC用とスマホ用を分けるか、どちらかにだけチェックを入れる。

私は最終的に、PCは「グローバルナビ」、スマホは「モバイルスライドイン」のみに設定しました。

苦戦3：トップページが消える

これが一番焦ったやつ。

設定をいじっていたら、ブログのトップページが真っ白になったんです。

「やばい、全部消えた！？」って心臓バクバク。

実はこれ、外観 → カスタマイズ → ホームページ設定で、

「最新の投稿」か「固定ページ」を選べるのですが、そこで間違って存在しない固定ページをトップに指定してしまったのが原因でした。

戻し方は簡単で、「最新の投稿」に戻すか、正しい固定ページを選び直せばOK。

でも知らないとパニックになります。

実装ステップ（Cocoonの場合）

ここまでの失敗談を踏まえて、正しい手順をまとめます。

  1. 固定ページやカテゴリーを作成例：ホーム、ブログについて、お問い合わせ、カテゴリー
  2. 外観 → メニューで新しいメニューを作成
    • 名前は「グローバルメニュー」などわかりやすいものに
    • 項目に固定ページやカテゴリーを追加
  3. メニューの位置を設定
    • PC用：グローバルナビ
    • スマホ用：モバイルメニュー＞トップメニュー
  4. 保存
  5. キャッシュ削除
    • Cocoon設定 → キャッシュ削除
    • ブラウザの履歴・キャッシュもクリア

カスタマイズ：アイコンやイラストを入れる

ここは完全におこめちゃんの遊び心。

メニュー名の横に絵文字や自作イラストを入れるだけで、一気に楽しく・個性的になります♪

画像を使う場合は、小さめ（24px〜32px）に調整すると見やすいです。

トラブルシューティングまとめ

  • ハンバーガーが出ない → 表示オプションと位置設定を確認
  • 重複する → チェックを入れすぎない
  • トップが消えた → ホームページ設定を見直す
  • 反映されない → キャッシュ削除

おわりに

正直、途中で何度も「もうやめたい…」って思いました。

でも、1つずつ原因を見つけて解決できたときの達成感はなかなかのもの。

今では、スマホで自分のブログを開くたびに「ふふ、私が作ったハンバーガー…」と自己満足しています。

もしあなたも途中で心が折れそうになったら、このページを思い出してください。

失敗しても元に戻せるし、何度でも挑戦できます。

ブログは、作っている時間も含めて、あなたの作品です。

焦らず、楽しんで、少しずつ改造していきましょう！

コメント