こんにちは。もうすぐブログを始めて一ヶ月のクラゲです。
クラゲブログですが、なんだかヘッダーが寂しいと感じる今日この頃。
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d160a53f71104dc4e5ed3c300ba3ba79-1.png)
うーん、なんだかヘッダーが寂しいな
![](https://ryulifeblog.com/wp-content/uploads/2020/09/97ff0e400bc3bae5193f7272fc46a00c.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/97ff0e400bc3bae5193f7272fc46a00c.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/97ff0e400bc3bae5193f7272fc46a00c.png)
ヘッドが寂しい?薄毛じゃない?
![](https://ryulifeblog.com/wp-content/uploads/2020/09/212f67afbdab28c63b3d22a71f820596.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/212f67afbdab28c63b3d22a71f820596.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/212f67afbdab28c63b3d22a71f820596.png)
ヘッドじゃない・・・
ヘッダーだよ・・・
他のブロガーさんのブログを見ると、ヘッダーにメニューがあります。
しかもメニューにカーソルを合わせると、メニューの下にニュッとカテゴリーが出るじゃないですか!
クラゲブログにもこの機能が欲しい!!
ということで、ヘッダーにドロップダウンメニューを設置する方法を調べて実践しました。
- ヘッダーが寂しい
- ヘッダーにドロップダウンメニューを設置したい
ドロップダウンメニューを設置
![](https://ryulifeblog.com/wp-content/uploads/2020/11/animal_chara_computer_azarashi.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/animal_chara_computer_azarashi.jpg)
ドロップダウンメニュー設置は意外と簡単です。
10分くらいあれば設置できます。
WordPressの設定変更
WordPressの「外観」⇒「メニュー」⇒「新しいメニューを作成」をクリックします。
![ドロップダウンメニュー](https://ryulifeblog.com/wp-content/uploads/2020/10/1-1024x489.png)
![ドロップダウンメニュー](https://ryulifeblog.com/wp-content/uploads/2020/10/1-1024x489.png)
「メニュー名」に好きな名前を入力し、「ヘッダーメニュー」にチェックを入れて「メニューを保存」をクリックします。
![ドロップダウンメニュー](https://ryulifeblog.com/wp-content/uploads/2020/10/2-1024x337.png)
![ドロップダウンメニュー](https://ryulifeblog.com/wp-content/uploads/2020/10/2-1024x337.png)
「メニュー項目を追加」で「カテゴリー」のドロップリストを表示します。
ヘッダーに追加したいカテゴリーにチェックを入れて「メニュー項目を追加のメニューに保存」をクリックします。
![ドロップダウンメニュー](https://ryulifeblog.com/wp-content/uploads/2020/10/3-1024x321.png)
![ドロップダウンメニュー](https://ryulifeblog.com/wp-content/uploads/2020/10/3-1024x321.png)
メニュー構造に追加したカテゴリーが表示されます。
ドラッグ&ドロップで表示したい順番に並べ替えます。
![ドロップダウンメニュー](https://ryulifeblog.com/wp-content/uploads/2020/10/5-1024x407.png)
![ドロップダウンメニュー](https://ryulifeblog.com/wp-content/uploads/2020/10/5-1024x407.png)
このままの状態だと、ヘッダーに表示されてもドロップダウンメニューにはなりません。
ドロップダウンメニューにしたいカテゴリーを「副項目」にしましょう。
![ドロップダウンメニュー](https://ryulifeblog.com/wp-content/uploads/2020/10/6-1024x343.png)
![ドロップダウンメニュー](https://ryulifeblog.com/wp-content/uploads/2020/10/6-1024x343.png)
スマホ表示でもドロップダウンメニューを追加したい場合は「ヘッダーモバイルメニュー」にもチェックを入れましょう。
「スマホ表示の場合はヘッダーに表示させるメニューを変えたい」という場合は、モバイルヘッダー用のメニューを新規で作成しましょう。
設定が完了したら「メニューを保存」を押せば作業終了です。
![ドロップダウンメニュー](https://ryulifeblog.com/wp-content/uploads/2020/10/7-1024x365.png)
![ドロップダウンメニュー](https://ryulifeblog.com/wp-content/uploads/2020/10/7-1024x365.png)
ビフォーアフター
なんということでしょう!
あんなに寂しかったヘッダーが
![](https://ryulifeblog.com/wp-content/uploads/2020/11/8-1024x228-1.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/8-1024x228-1.jpg)
たくさんのメニュー溢れる素敵なヘッダーに
![](https://ryulifeblog.com/wp-content/uploads/2020/11/9-1024x278-1.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/9-1024x278-1.jpg)
カーソルを合わせるとニュッとメニューが出てきます!
これが欲しかった!!
![](https://ryulifeblog.com/wp-content/uploads/2020/11/10-1024x354-1.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/10-1024x354-1.jpg)
まとめ
![](https://ryulifeblog.com/wp-content/uploads/2020/11/musician_ukulele.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/musician_ukulele.jpg)
ドロップダウンメニューの設置方法について説明してきました。
思ったよりも簡単にドロップダウンメニューを設置出来たのではないでしょうか?
ヘッダーにドロップダウンメニューがあると、他のカテゴリーへの移動が簡単です。
ブログを見に来てくれた方が、少しでも他の記事にも興味を持ってもらえるように工夫することは大切です。
ドロップダウンメニューを追加したことで、寂しかったヘッダーが充実して見た目も良くなりました。
最後まで読んでいただき、ありがとうございました。
![](https://ryulifeblog.com/wp-content/uploads/2020/09/9fa0cfcafc9c9e8d447b845dca59d4d2.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/9fa0cfcafc9c9e8d447b845dca59d4d2.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/9fa0cfcafc9c9e8d447b845dca59d4d2.png)
ヘッダーだけじゃなくて、ヘッドも充実するといいね
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d011084fa0d4648b65bf5ef6a2c886c4.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d011084fa0d4648b65bf5ef6a2c886c4.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d011084fa0d4648b65bf5ef6a2c886c4.png)
まだ寂しくないもん・・・
コメント