Web集客無料メール講座

ウェブ集客に関するメール講座を期間限定で無料購読できます。

詳細はこちら

ナビゲーションメニューを作成し、メニュー表示を見やすくカスタマイズしよう

サイトの骨格を作る

ウェブサイトのサイトの構成を考え、必要なページを追加しましたら、ユーザーにページを見てもらうよう、ナビゲーションメニューを作成します。

ナビゲーションメニューとは、各コンテンツページへリンクされているウェブサイト共通の案内メニュー(目次)のことです。メニューをきちんと設置してあると、ユーザーはウェブサイトで迷うことなく必要な情報に辿り着く事ができるようになります。

メニューの新規作成

それでは早速、ナビゲーションメニューを作成していきましょう。
ダッシュボード>外観>メニュー を選択します。

メニュー作成画面が表示されますので、まず最初に、メニュー名を入力します。メニュー名は自分が分かりやすい名前を適当に入れておけば良いです。

※ユーザーには見られませんので、管理しやすい名前を入れると良いです。

例)メインメニュー、ヘッダーメニュー(上部にあるメニュー)とでも入れておけば良いかと思います。

①メニュー名を入力する

②メニューを作成をクリック

これでメニューを作成できました。ただ、これだけではメニューという器を作っただけに過ぎませんので中身は何もありません。ですので、メニューの編集を行う必要があります。

 

メニューの編集

メニューを作成したら、次に、メニュー内容を編集していきます。

①まず最初に、メニューに追加したい項目にチェックを入れます

②チェックを入れましたら、「メニューに追加」ボタンをクリックします。

メニュー構造という右側の欄に、先程追加したメニューが追加されます。

次に、メニューの位置というところにチェックを入れます。ひとまず「Header Navigation」にチェックを入れておけば良いです(Headerにチェックを入れると上部に表示されます)。

メニューの位置にチェックを入れたら、「メニューを保存」をクリックします。

「メニューを保存」をクリックすると、画面上部に「更新されました」と表示されます。これで設定が反映されました。

プレビューで確認すると、メニューが出現しているのが確認できます。

この調子で、どんどんメニューを追加していきましょう!

メニュー位置について

メニューの位置はテーマによって異なるのですが、「Lightningテーマ」では、「Header Navigation」と「Fotter Navigation」の2つが用意されています。

ヘッダーナビゲーション:サイト上部に表示されるメニュー
フッターナビゲーション:サイト下部に表示されるメニュー

 

親子関係の追加、メニューの移動

親子関係の追加

続いて、親子関係のメニューの作成方法を解説します。

会社案内という親メニューの下に、代表挨拶という子メニューを追加する場合、まずは小メニューにしたいページにチェックし、「メニューに追加」をクリックします。

右側にメニューが追加されました。しかし、このままでは親子関係で表示されず、横並び(同列)での表示となってしまいます。

このような感じですね。

これでは親・親となってしまいますので、親子関係に修正する必要があります。

修正する方法は非常に簡単で、子にしたいメニューを右側に少しドラッグし、「メニューの保存」をクリックするだけで反映されます。

これで子メニューが追加されました。

メニューの移動(並び替え)

メニューを移動したい場合(並び替えたい場合)は、移動したいメニューをドラッグするだけで並び替えが簡単にできます。

並び替えが完了しましたら、「メニューを保存」をクリックすると反映されます。

メニューの追加項目

今回、固定ページを例に解説させて頂きましたが、メニューに追加できるものは固定ページ以外にも投稿、カスタムリンク、カテゴリーを追加する事が出来ます。

固定ページ固定ページを追加できます
投稿ブログ記事を追加できます
カスタムリンク直接URLを記入する事ができます(他サイトのページも追加可能)
カテゴリーブログのカテゴリーを追加できます

 

メニュー表示のカスタマイズ

これまでの解説を元に、下記メニューを追加しました。

これでメニューの作成を終了しても良いのですが、テーマによってはメニューの表示をカスタマイズすることができます。

例に漏れず、「Lightningテーマ」もメニュー表示をカスタマイズする事ができますので、メニュー表示をカスタマイズしたいと思います。

表示のカスタマイズ

画面右上に「表示オプション」という項目がありますので、こちらをクリックします(若干分かり難い場所にあります)。

表示オプションの詳細が開きますので、「説明」をチェックを入れます。

「説明」にチェック後、表示のカスタマイズをしたいメニュー名の右側にある矢印(▼)をクリックすると、メニューの編集項目が出現し、メニュー表示をカスタマイズできるようになります。

①ナビゲーションラベル:メニューに表示されるメニュー名

②説明:下に小さく表示される英文字

入力が終わりましたら、「メニューを保存」をクリックします。これでメニュー表示のカスタマイズが完了です。

ちなみに、「Footer Navigaton」に説明を入力して表示されません。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
無料メール講座
集客に強いWordPressを活用してあなたのファンを引き寄せる「Web集客無料メール講座」

今なら無料で下記ノウハウが手に入ります。

WordPressでビジネスサイトを構築するマニュアル
売り込まなくても楽に売れるWeb集客ノウハウ
あなたの商品・サービスを必要としている人に届ける方法

期間限定2大プレゼント「WordPressでビジネスサイトを構築するマニュアル」&「Web集客無料メール講座」

PROFILE
この記事を書いた人
瀬間 隆司

上野を拠点に中小企業の資金繰り・事業再生コンサルタントとして活動しています。
最近は自分でウェブサイトを作りたいという企業や、独立された方、独立を考えている方等にWordPressを活用したウェブサイト作り方をレクチャーしています。

他にも、チャットボットを作ったり、業務効率化のためにRPAを研究したり、目新しいものに飛びつく傾向があります。

フォローする
サイトの骨格を作る
クリエイトエクスプレス