STORK19|ヘッダーメニュー(グローバルナビ)の作成方法とカスタマイズ 

WordPressテーマのSTORK19では、初心者の方でも簡単にヘッダーメニュー(グローバルナビ)の設置ができます。

ヘッダーメニューは、読者を効率的にサイトの主要なページへ導けます。

当ブログもSTORK19を使用しており、以下のようにヘッダーメニューを設置しました。

本記事ではSTORK19をご利用の方に向けて、ヘッダーメニューの作成方法とカスタマイズ方法をご紹介します。

ヘッダーメニューの作成方法|STORK19

ヘッダーメニューを作成する流れは、下記2ステップです。

  1. メニューを新規作成
  2. ヘッダーメニューに表示する項目を選ぶ

それでは順番に進めていきましょう。

①メニューを新規作成

まずはメニューを新規作成します。

WordPress管理画面で、【外観】>【メニュー】を開きます。

画面一番上の【ライブプレビューで管理】をクリックします。

【メニューを新規作成】をクリックします。

メニュー名に【ヘッダーメニュー】と入力、メニュー位置は【グローバルナビ(PC用)】を選択し、【次へ】進みましょう。

モバイルサイトにもヘッダーメニューを表示したい場合は、【グローバルナビ(モバイル用)】も選択してください。

②ヘッダーメニューに表示する項目を選ぶ

ここからは、ヘッダーメニューに表示したい項目を選択していきます。

右に開いた項目一覧の中から、メニューに表示したい項目を選択してください。

ここでは例として、固定ページの項目内にある【お問い合わせ】を選択します。選択すると画面左に表示されます。

画面左下の【◁コントロールを非表示】をクリックすると、サイトにメニューがどう表示されるかプレビュー画面が見れます。

プレビューを見るとこんな感じです。

【公開】をクリックすれば、ヘッダーメニューの作成完了です。

ヘッダーメニューのカスタマイズ

ヘッダーメニューのカスタマイズとして、下記3つの手順をご紹介します。

  • メニューを階層化する
  • サブテキストを表示する
  • アイコンを表示する

好きなカスタマイズを選んで設定してみてくださいね。

メニューを階層化する

ヘッダーメニューは階層化できます。

階層化させると、メニューにカーソルを合わせた際、自動的にサブメニュー項目が下に開きます。

それでは設定手順を見ていきましょう。

最初にご紹介したヘッダーメニューの作成画面を開きます。

ここでは例としてメインメニューを【ブログ】、サブメニューを【ブログの始め方】として階層化したいと思います。

サブにしたい項目を、クリックしたまま右に少しずらします。段差ができれば【公開】をクリックして完了です。

ヘッダーメニューの【ブログ】にカーソルを合わせると、その下に階層化された【ブログの始め方】が表示されました。

サブテキストを表示する

メニュー名の下に、任意のサブテキストを表示できます。

以下は、メニュー名の下にHOMEやCONTACTなど、英語のサブテキストを表示した例です。

それでは、サブテキストの設定手順を見ていきましょう。

まず、管理画面で【外観】>【メニュー】を開き、画面右上の【表示オプション】をクリックします。

【説明】にチェックを入れましょう。

各メニュー項目の説明欄に、任意のサブテキストを入力し、【メニューを保存】をクリックすれば設定完了です。

アイコンを表示する

メニュー名の横に、好きなアイコンを表示できます。

それでは設定手順を見ていきましょう。

まず、Font Awesomeのサイトから好きなアイコンを選びます。
▶︎無料のFont Awesomeアイコンはこちら

検索枠に英単語を入力すると、関連するアイコンが表示されます。好みのアイコンを見つけてクリックしましょう。

画面に表示されているアイコンタグをクリックし、コピーします。

管理画面で【外観】>【メニュー】を開きます。

アイコンを入れたいメニュー項目の【ナビゲーションラベル】の枠に、先程コピーしたアイコンタグをペーストします。

その後、画面右下の【メニューを保存】をクリックすれば、設定完了です。

ちなみにアイコンタグとメニュー名の間に、半角スペースを入れるとちょうどいい余白が入ります。

まとめ:ヘッダーメニューを設置しよう

ヘッダーメニューを設置する方法をご紹介しました。

ヘッダーメニューは読者の目に入りやすい重要な項目です。ぜひこの機会に設置して、サイト内容を充実させていきましょう。

その他、STORK19のカスタマイズは以下記事でまとめています。

最後までご覧いただきありがとうございました。

▶︎ブログ記事の構成手順はこちら
▶︎ブログ収益化の手順はこちら