現在ご覧のまめわざ公式ページの上部にあるメニューは、マウスを当てる(マウスオーバーする)と下層のページが表示されます。これをプルダウンメニューと呼びます。
ここでは、プルダウンメニューの設置方法と、それに必要なページの階層化、更に3階層目以下のメニューを表示する方法を説明します。
まずは、そもそも階層化が必要かどうかについて考えてみましょう。
次のようなケースでは、メニューの階層化を検討する余地があると思います。代替案と合わせてご検討ください。
階層化が必要になるケース | 階層化によるメリット | 階層化以外の代替案 |
---|---|---|
まったく異なるジャンルのページ(事業)が複数ある | ユーザーが目的のページにたどり着きやすくなる | ジャンルごとにホームページを分ける |
サイトの規模が大きい | ユーザーが目的のページにたどり着きやすくなる | ジャンルごとにホームページを分ける 複数に分割しているっページを統合してページ数を減らす |
ページ数が多くて、ヘッダーの並列メニューが見づらい | ヘッダーの並列メニューが見やすくなる | メニューをサイドに移動する |
タイトルの文字数が多くて、ヘッダーの並列メニューが見づらい | ヘッダーの並列メニューが見やすくなる | タイトルの文字数を減らす サブタイトルの文字数が多い場合は、「メニューにサブタイトルを表示する」を解除する(下記説明) |
メニューを階層化するデメリットとしては、手間がかかることや、分類が上手にできないと逆に迷子になりやすい構造になってしまうことです。
また大きなデメリットの1つとしてリンク切れが発生することが挙げられますが、まめわざではページのアドレスを変更していなければ自動でユーザーを導く(リダイレクト)機能があるので気にする必要がありません。
例えば、
example.com/abc.html
というページが
example.com/jp/abc/
になった場合、abc.htmlにアクセスしたユーザーは自動でjp/abc/に移動します。
まめわざの上部に表示されるメニューは、ページの階層構造をそのまま自動的に出力します。
図のように自動的に設定されるため、階層型メニューを表示するには、ページの階層構造を作成する必要があります。
管理トップページの「ページ一覧」の上部にある「ページを編成する」をクリックし、「メニュー編集」ページに移動します。
管理トップページの「ページ一覧」と同様に、ページが階層型に表示されます。
右側の「移動」をドラッグしてページを移動し、ページの順番入替ができます。この時、ページをページの中に移動することでページが階層化されます(ページがページの中に含まれます)。
逆に、Aページ内に含まれるBページを、Aページの上下の並びにドラッグすると、階層化が解除されて並列関係に変わります。
ページの移動を繰り返すことで、意図する階層構造を作成しましょう。
尚、このメニュー編集ページでは、各ページの上下にある「+(プラス)」マークや、「+下層に追加」ボタンからページを追加できます。
最後に下部の保存ボタンをクリックして、ページの階層楮を保存します。
管理トップページの「ページ一覧」にも即時反映されます。
次に、管理トップページの「ページ一覧」で、メニュー欄にある「編集」ボタンをクリックします。
小窓が表示されるので「メニューに表示するページリストの抽出範囲」で「このページ直下とその下層(2階層分)のページ」を選択し、「OK」をクリックします。
これにより、メニューをマウスオーバーした際に、2階層目のページが表示されるようになります。
逆に「このページ直下のページ」を選んだ場合は、マウスオーバー時に2階層目が表示されなくなります。
またこの時、「メニューにサブタイトルを表示する」のチェックを外すと、メニューの下や右に表示されるサブタイトルを非表示にできます。
上部のメニューに表示できるのは2階層目までに限られます。もし階層が3階層以上の場合は、これらのメニューをメニューブロックで表示する必要があります。
サイドの編集ページに移動し、ブロックを追加してメニューブロックを選択して「OK」をクリックします。
これにより、全階層のページ一覧が表示されます。
ヘッダーからメニューを外せば、サイドにメニューのあるレイアウトに変わります。詳しい設定はメニューをサイドに移動するをご覧ください。
メニューブロックは、メニューの中の一部分だけを選択的に表示できます。これを利用し、ヘッダーメニューに1~2階層目、2階層目のページのサイドに2階層目以下のメニューを表示するという、自治体など大規模なサイトに採用されているダブルメニューを実装できます。
まず各2階層目のページにトップページとは異なった「サイド」を設定します。
管理トップページの「ページ一覧」で、各2階層目のページの「設定」ボタンをクリックし、サイドを「自身のサイド」にして「OK」をクリックします。これにより、トップページ(または上層)とは異なったサイドが該当ページ以下に適用されます。
尚、「自身のサイド」をやめてTopのサイドと同じものを表示するように戻す場合は、ここで「Topと同じ」を選択します。
「自身のサイド」として新設されたサイドは、はじめは中身がないため「なし」と表示されます。この「なし」をクリックして、サイドの編集ページに移動します。
上の「方法1」で説明したのと同じくメニューブロックを追加します。
追加したメニューブロックで、「起点」を該当の2階層目(ここでは「システム開発」)にします。
これにより、2階層目以下のメニューのみが表示されました。
以上のようにして、ページの階層化やプルダウンメニューが簡単に実現できます。
小規模サイト・中規模サイト・大規模サイトのそれぞれにスケーラブルに対応できる柔軟性がまめわざの特徴の1つです。