まだ大阪で消耗してます。

ブログ好きな30代独身男性のあれこれ。

MENU

SWELLでヘッダーメニューを考えながら設置したいと思う

 本ページはプロモーションが含まれています

まだええかなと思ってましたが先延ばしにすると孫の代まで手を付けない可能性があるため引き続きやっていこうと思います。

よくあるヘッダーロゴ横にあるメニューですが、そのままヘッダーメニューとかグローバルナビと呼ばれていて下記の画像のようなものです。

SWELLのサイトのヘッダーメニュー

とりあえずブログの見栄えにも関わりますし、利便性にも関わる重要な要素なのでページ上部に表示されるヘッダー部分を変えようと思います。

ちなみにスマホで見た場合は上下左右どこかにあるメニューをクリックすると出てくるアレです。
開閉メニューとかハンバーガーメニューと呼ばれるものですね。

下記画像の場合だと左下にあり、タップするとメニュー一覧が出てきます。

スマホで見たSWELLのサイトのヘッダーメニュー

では早速作っていこうと思います。

ヘッダーメニューの設定

まずはヘッダーメニュそのものを作成します。

WordPress管理画面の外観>メニューをクリックします。

私は既にメニュー名を入力して仮のものを作成していますが、何もない状態の場合はメニュー名の欄にメニュー名を入力し、メニューを作成ボタンをクリックするとメニューが作成されます。

分かりやすいようにヘッダーメニューとでも名前を付ければ良いかと思います。

ヘッダーメニューを作成

次にヘッダーメニュー部分に追加したい項目を選びます。

メニュー項目を追加から固定ページの全て表示タブをクリックするとこれまでに作成した固定ページが表示されるのでチェックボックスにチェックを入れてメニューに追加をクリックします。

メニュー構造に選択した固定ページが追加されます。

メニュー構造のメニュー設定に関してはグローバルナビにのみチェックを入れるようにしてメニューを保存ボタンをクリックして保存します。

固定ページをメニュー構造に追加して保存

これでブログ上にヘッダーメニューが設置されています。

並び順を変更したい場合はドラック&ドロップすることで並び順を簡単に変更できますが、変更を反映させるためにメニューを保存ボタンをクリックすることを忘れないようにしましょう。

マウス操作だけで簡単に位置を変更できるのでよほど複雑な形にしない限りは使うことはないと思いますが、メニュー構造に追加した固定ページやカテゴリーなどの右にある▼をクリックすると各メニュー項目の詳細設定ができます。

その中でメニューの並び順と、移動というところでも並び順を変更することができます。

詳細設定でメニューの並び順変更

一度ブログ上のヘッダーメニューを確認したところ、ちゃんと反映されていますが正直なところヘッダーメニューの内容がイマイチですね。

イマイチなヘッダーメニュー

よくよく考えるとヘッダーメニューに詳細プロフィールやらプライバシーポリシーやらお問い合わせを追加したところでほとんどクリックされませんからね。

ということでさっき追加した項目はフッター側に表示させようと思います。

先ほどのメニュー設定画面のまま、一旦追加したメニューを削除します。

メニュー構造の中にある消したいメニューの右側にある▼をクリックし、メニュー項目の詳細設定を開くと左下に削除と書かれているのでそれをクリックすると削除できます。

メニューを削除

次にヘッダーメニュー(メニュー構造)に何を追加しようかと考えると現状カテゴリーを追加すること一択になります。

私のブログは現状雑記ブログのようなもので、カテゴリーが雑多な状態のため全てをメニュー構造に入れると入り切らずに表示されてしまうのでWordPress(SWELL)、ゲーム、雑記をとりあえずヘッダーメニューにすることにしました。

メニュー項目を追加でカテゴリーをクリックするとブログで作っているカテゴリーを選択してメニュー構造に入れることができます。

全て表示タブをクリックし、メニュー構造に入れたりカテゴリーをチェックしてメニューを保存ボタンをクリックします。

カテゴリーをメニューに追加

ブログを確認するとカテゴリー名の下に小さく文章が書かれている場合があります。

これに関してはカテゴリーで設定している説明文が表示されてしまっている状態で、テーマによっては表示非表示の違いがあるのでしょうがSWELLでは表示されるのでしょう。

カテゴリーの説明文が端的で簡潔にまとまっていて見栄え的に問題ないのであればそのままで良いですが私の場合は長ったらしいので不恰好ですね。

テーマの説明文が表示されてしまう

こういった場合の対処法として、表示オプションの設定で変更することができます。

引き続きメニュー設定画面のままで、右上の表示オプションと書かれているところをクリックすると上からヌルッと色々な項目が出てきます。

詳細メニュー設定を表示の中から説明にチェックを入れるとカテゴリーの詳細設定に説明文を入力する項目が表示されます。

表示オプションの説明をクリック

変更したいカテゴリーの▼をクリックして、表示された説明の文章を変更、メニューを保存して完了です。

私の場合は説明にはそれぞれの英語単語的な感じにしようかと考えたのですが、やってみたところ微妙な感じがしたので説明の項目を全て空白にして非表示としました。

追加したカテゴリーが3つのみで余裕があるので、再度お問い合わせもメニューに追加しました。

WordPress(SWELL)というナビゲーションラベルも長ったるいのでWordPressのみに変更して完成です。

ヘッダーメニューに追加しなかったプライバシーポリシーはフッターメニューでええかなと思ってます。
詳細プロフィールに関してはサイドバーのプロフィールから飛べるようになっているので、こちらもフッターメニューにだけ入れる予定です。

近々やります。