navigation-menu

賢威テンプレートを使用したナビゲーションメニューの使い方をご紹介します。


ナビゲーションメニューはカスタムメニューとも呼ばれていて、メニューの設定や構造を作成する機能になります。メニューを設定するには、「固定ページ」「投稿」「カテゴリー」で表示させたいページを作成しておきます。


ただ、一度に全部を準備するのは大変ですよね。そこで「固定ページ」や「投稿」をメニューに入れるときはタイトルだけのページをつくってみて下さい。



基本のメニューの作り方

まずはグローバルメニューを説明します。グローバルメニューとはグローバルナビゲーションとも呼ばれている部分で、Webサイトの全てのページに共通して設置されている案内リンクのことです。具体的には下の画像の部分になります。

global-menu

フッターメニューはサイトの一番下のこの部分です。

footer

まずは「外観」から「メニュー」をクリックします。

menu

「新規メニューを作成」をクリックするか「メニュー名」に名前を入れて「メニューの作成」をクリックします。ここでは「サンプルのメニュー」としています。

menu-name

すると「メニューの構造」と「メニューの設定」が表示されます。

menu-stracture-setting

次に画面左側にある「固定ページ」「投稿」「カスタムリンク」「カテゴリー」からメニュー構造に追加したい項目にチェックを入れて「メニューに追加」をクリックします。


ただし、ここに表示される「固定ページ」と「投稿」は公開されている状態になっていないと表示されないので注意して下さい。


ここでは「サンプルページ」にチェックマークをいれて「メニューに追加」をクリックします。


menu-added

「メニュー構造」の下に「サンプルページ」が追加されたら「固定ページ」の右側にある▼をクリックします。

click-menu

するとナビゲーションに表示されるラベルを編集することが出来ます。

label-edit

同じ手順で「Hello word!」と「未分類」を追加しています。最後に「メニュー設定」にある「メニューの位置」からグローバルメニューかフッターメニューを選択して「メニューを保存」をクリックします。

select-global-menu

「位置の管理」をクリックすると追加されたメニューを確認することができます。

check-position

ここではグローバルメニューを選択していますから、指定した位置に「サンプルのメニュー」が追加されていればOKです。

sample-menu

それでは「ライブプレビューで管理」をクリックしてメニューが表示されているか確認していきましょう。

review

追加したメニューが表示されていれば基本の設定は完了です。

menu-check

サブメニューの作り方

シンプルなメニューではなく、サブメニューを表示することもできます。まずはプレビュー画面の左上にある「✖」をクリックして編集画面に戻って下さい。


サブメニューにしたいページをドラッグ&ドロップで右にずらします。

submenu

「メニューの保存」をクリックしたら、再度ライブプレビューをクリックしていきましょう。

submenu-display

「メニューのサンプル」の下に「Hello word!」が表示されていればOKです。


以上がナビゲーションメニューの使い方です。この手順でフッターメニューも作成していきましょう。


フッターを自由形式でカスタマイズする

賢威テンプレートにはフッター用の独自設定が準備されているので、フッターに表示させたい項目が多いときには、そちらを使ってみて下さい。


フッターを自由にカスタマイズするには、「賢威の設定」から「フッター」をクリックします。

select-footer

すると「投稿」の編集画面と同じような画面が表示されます。コードやリンクも使用可能になっています。

footer-edit

メニューを作るときの注意点

グローバルナビにはいくつくらいの項目を掲載したら良いでしょうか。心理学者のG.A.ミラーさんが発表した論文によると、人が一瞬で認識できる情報は、「7(±2)」とのことです。


ですので、記憶力の良い人でも9つくらいしか覚えることができません。覚えるのが苦手な人なら5つ程度です。サブメニューを使うとたくさんの項目を追加することができますが、一度に目に入るメニューは「7(±2)」にしていきましょう。


それから、スマホユーザーにも使いやすいようにスマホのグローバルメニューは折りたたみができるテンプレートを使用してみて下さい。