ページの階層化とプルダウンメニュー

現在ご覧のまめわざ公式ページの上部にあるメニューは、マウスを当てる(マウスオーバーする)と下層のページが表示されます。これをプルダウンメニューと呼びます。
ここでは、プルダウンメニューの設置方法と、それに必要なページの階層化、更に3階層目以下のメニューを表示する方法を説明します。

メニューを階層化が必要になるケースとメリット

まずは、そもそも階層化が必要かどうかについて考えてみましょう。
次のようなケースでは、メニューの階層化を検討する余地があると思います。代替案と合わせてご検討ください。

階層化が必要になるケース階層化によるメリット階層化以外の代替案
まったく異なるジャンルのページ(事業)が複数あるユーザーが目的のページにたどり着きやすくなるジャンルごとにホームページを分ける
サイトの規模が大きいユーザーが目的のページにたどり着きやすくなるジャンルごとにホームページを分ける
複数に分割しているっページを統合してページ数を減らす
ページ数が多くて、ヘッダーの並列メニューが見づらいヘッダーの並列メニューが見やすくなるメニューをサイドに移動する
タイトルの文字数が多くて、ヘッダーの並列メニューが見づらいヘッダーの並列メニューが見やすくなるタイトルの文字数を減らす
サブタイトルの文字数が多い場合は、「メニューにサブタイトルを表示する」を解除する(下記説明)

メニューを階層化するデメリットとしては、手間がかかることや、分類が上手にできないと逆に迷子になりやすい構造になってしまうことです。
また大きなデメリットの1つとしてリンク切れが発生することが挙げられますが、まめわざではページのアドレスを変更していなければ自動でユーザーを導く(リダイレクト)機能があるので気にする必要がありません。
例えば、
example.com/abc.html
というページが
example.com/jp/abc/
になった場合、abc.htmlにアクセスしたユーザーは自動でjp/abc/に移動します。

ページの階層構造を編集する手順

前提)まめわざの上部メニューはページの階層構造から自動生成される

まめわざの上部に表示されるメニューは、ページの階層構造をそのまま自動的に出力します。
図のように自動的に設定されるため、階層型メニューを表示するには、ページの階層構造を作成する必要があります。

手順1)ページを階層化する

管理トップページの「ページ一覧」の上部にある「ページを編成する」をクリックし、「メニュー編集」ページに移動します。

管理トップページの「ページ一覧」と同様に、ページが階層型に表示されます。
右側の「移動」をドラッグしてページを移動し、ページの順番入替ができます。この時、ページをページの中に移動することでページが階層化されます(ページがページの中に含まれます)。
逆に、Aページ内に含まれるBページを、Aページの上下の並びにドラッグすると、階層化が解除されて並列関係に変わります。

ページの移動を繰り返すことで、意図する階層構造を作成しましょう。
尚、このメニュー編集ページでは、各ページの上下にある「+(プラス)」マークや、「+下層に追加」ボタンからページを追加できます。

最後に下部の保存ボタンをクリックして、ページの階層楮を保存します。
管理トップページの「ページ一覧」にも即時反映されます。

手順2)メニューを2階層まで表示する

次に、管理トップページの「ページ一覧」で、メニュー欄にある「編集」ボタンをクリックします。

小窓が表示されるので「メニューに表示するページリストの抽出範囲」で「このページ直下とその下層(2階層分)のページ」を選択し、「OK」をクリックします。
これにより、メニューをマウスオーバーした際に、2階層目のページが表示されるようになります。

逆に「このページ直下のページ」を選んだ場合は、マウスオーバー時に2階層目が表示されなくなります。
またこの時、「メニューにサブタイトルを表示する」のチェックを外すと、メニューの下や右に表示されるサブタイトルを非表示にできます。

3階層目以降のメニューを表示する

上部のメニューに表示できるのは2階層目までに限られます。もし階層が3階層以上の場合は、これらのメニューをメニューブロックで表示する必要があります。

3階層目以降を表示する方法1)サイドのメニューに全ページを表示する

サイドの編集ページに移動し、ブロックを追加してメニューブロックを選択して「OK」をクリックします。

これにより、全階層のページ一覧が表示されます。
ヘッダーからメニューを外せば、サイドにメニューのあるレイアウトに変わります。詳しい設定はメニューをサイドに移動するをご覧ください。

3階層目以降を表示する方法2)2階層目以降にのみサイドを表示する

メニューブロックは、メニューの中の一部分だけを選択的に表示できます。これを利用し、ヘッダーメニューに1~2階層目、2階層目のページのサイドに2階層目以下のメニューを表示するという、自治体など大規模なサイトに採用されているダブルメニューを実装できます。

まず各2階層目のページにトップページとは異なった「サイド」を設定します。
管理トップページの「ページ一覧」で、各2階層目のページの「設定」ボタンをクリックし、サイドを「自身のサイド」にして「OK」をクリックします。これにより、トップページ(または上層)とは異なったサイドが該当ページ以下に適用されます。
尚、「自身のサイド」をやめてTopのサイドと同じものを表示するように戻す場合は、ここで「Topと同じ」を選択します。

「自身のサイド」として新設されたサイドは、はじめは中身がないため「なし」と表示されます。この「なし」をクリックして、サイドの編集ページに移動します。
上の「方法1」で説明したのと同じくメニューブロックを追加します。

追加したメニューブロックで、「起点」を該当の2階層目(ここでは「システム開発」)にします。

これにより、2階層目以下のメニューのみが表示されました。

以上のようにして、ページの階層化やプルダウンメニューが簡単に実現できます。
小規模サイト・中規模サイト・大規模サイトのそれぞれにスケーラブルに対応できる柔軟性がまめわざの特徴の1つです。

2015/11/12