このブログでは、ページ最上部に以下のようなメニューバーを設置しています。メニューバーの各項目はカテゴリ名になっており、各カテゴリの記事一覧ページにリンクしています。
今回は、このようなカテゴリを利用したヘッダーメニューの作成手順をご紹介していきます。
ヘッダーメニューの作成方法
大まかな手順
ヘッダーメニュー作成時は、大まかに以下の手順で作業をしていきます。
- カテゴリの作成
- メニューの作成
- ヘッダーメニューの表示設定
- CSSの追加
カテゴリの作成
もし設定がまだの場合は、最初にカテゴリを作成しましょう。カテゴリは、投稿＞カテゴリから設定することができます。
このブログでは、妊娠‧出産、海外ライフ、仕事、スキルアップ、読書、ブログ運営の6分野の記事を作成しています。
メニューの作成
次に、外観＞メニューからメニューを作成していきます。
まずは、任意のメニュー名を設定。メニューの位置は、ヘッダーエリアにチェックをつけます。
次に、メニュー項目を追加していきます。
今回のようにカテゴリー名をメニュー名に設定したい場合は、メニュー項目を追加＞カテゴリ＞すべて表示で、メニューに追加したいカテゴリを全てチェックし、「メニューに追加」ボタンをクリックします。
（メニューの表示順は、この後変更できます）
すると、以下のようにメニュー構造が作成されます。
カテゴリ名をドラックして、各項目の順番を整え、メニューを保存ボタンを押したら、メニューの完成です。
ヘッダーの表示設定
次に、ヘッダーの表示設定をします。外観＞カスタマイズ＞共通エリア設定[THE]＞ヘッダーエリア設定から編集が可能です。
▼このブログの設定内容は、以下のようにしています。
CSSの追加
最後にCSSでヘッダーの見栄えを整えていきます。他にも色々と気になる部分はあったのですが、今回はとりあえず「メニュー名にマウスオンをした際に表示される下線の色」のみを変更しています。
変更箇所の確認
Inspect (検証)でコードを確認したところ、アンダーバーの色は、style.min.cssで指定されていることがわかりました。
▼CSSの該当箇所がこちら
CSSへの追記内容
変更すべき箇所がわかったら、早速CSSを編集していきます。CSSの編集・追記方法には以下の２つの方法があります。
１. テーマ＞テーマエディター（テーマの編集）から、「style-user.css」に追記する
２. 外観＞カスタマイズ＞追加CSSに追記する
マウスオン時の色を変えるには、クラス「globalNavi__list .menu-item a:hover」のborder-bottomにお好みのカラーを指定します。
▼コード例はこちら
.globalNavi__list .menu-item a:hover,.globalNavi__list .page-item a:hover{border-bottom:2px solid rgba(223,34,143,.9);}デフォルトの設定が透過指定ありの「rgba」形式を使っていたため、このサイトの設定もrgbaで色指定していますが、透過が不要の場合は#●●●●●●等で指定しても問題ありません。
また、上記の指定のみだと、各カテゴリページに飛んだ際のメニューの下線の色が黒のままなので、こちらも色を変更していきます。「.globalNavi__list .current-menu-item>a,.globalNavi__list .current-menu-parent>a」のborder-bottomにお好みのカラーを指定することで、変更が可能です。
▼コード例はこちら
.globalNavi__list .current-menu-item>a,.globalNavi__list .current-menu-parent>a{border-bottom:2px solid rgba(255,197,233,.9);}おわりに
最後までお読みいただき、ありがとうございました。
今回は、The Thor（ザ・トール）でのヘッダーメニューの設定方法についてご紹介しましたが、もし疑問点やアドバイス等がありましたら、コメント欄にてお知らせいただけると嬉しいです。
当ブログでは、他にもThe Thorのカスタマイズ方法に関する記事を随時更新中です。よろしければ、そちらも合わせてご覧ください。
WordPress有料テーマ「サンゴ」使用ブログなどでよく見かける、背景画像付きのプロフィールを作成してみたので、その設定方法をご紹介します。HTMLとCSSを使って設定を行いますが、基本はコピペでOKなので、プログラミングの知識があまり[…]