続きを読む" />

複数のページを階層化してメニューに紐づける

複数の固定ページを追加してメニューに紐づけるときは、メニューを階層化することで多くのページをメニューに紐づける事ができます。

また、製品やサービスなど多くのページを必要とする際にも、階層化することで分かりやすいメニュー構成になりますので是非ご活用ください。

目次

階層化メニューについて

階層メニュー(ドロップダウンメニュー)は、メインメニューを第1階層として第2階層、第3階層まで増やす事ができます。下の画像のように、ページを階層で分けることにより、複数のページをメニューに紐づけることができ、コンテンツの整理にもなるので、閲覧者にとって分かりやすいホームページとなります。

メニューを階層化した場合と階層化しない場合の違い

※Topping Webでは、第3階層までメニューに紐づける事ができます。

▲ 目次に戻る

階層化メニューの設定

さっそく階層化メニューを設定してみましょう!

まずはマニュアル「サブページ(固定ページ)の追加」の通りにサブページを追加してください。

サブページの追加が完了したら、下の画像のように管理メニュー「外観」を押して設定ページを開いてください。

メニュー設定画面

「メニュー項目を追加」へ追加ページが表示されていることを確認し、チェックして「メニューに追加」ボタンを押すと、追加ページが「メニュー構造」に表示されるはずです。

この段階では、まだメインメニューに通常メニューとして設定されている状態で、階層化されていません。

次に下の画像のように、追加ページをドラッグ&ドロップで「ページ2」と「ページ3」の間に移動します。

階層化メニュー設定ページでページを移動する

次に下の画像のように、追加ページをドラッグ&ドロップで右に移動します。これで第2階層化の設定になりましたので、「メニューを保存」ボタンを押して反映してください。設定画面上部に「header-menu を更新しました。」と表示されていれば完了です。実際のページで確認してみましょう。

階層化メニュー設定ページでページを右へ移動して「メニューを保存」する

下の画像のように「追加ページ」が「ページ2」の第二階層に設定されたら設定完了です。

階層化メニュー設定の第2階層を実際のページで確認

第3階層の設定も同じです。更に追加したページを下の画像のように移動して設定を反映してみてください。

階層化メニュー設定ページで第3階層ページを右へ移動して保存

下の画像のように「第3階層ページ」が「ページ2」の「追加ページ」の第3階層に表示されたら設定完了です。

階層化メニューで第3階層まで設定した場合の表示結果

▲ 目次に戻る

ポイント

メインメニューの一番右側のメニュー項目は第2階層までとしてください。現在のバージョンでは下の画像のように第3階層はブラウザを突き抜けてしまいます。

  • 第2、第3階層はフッターメニューには表示されません。
  • スマートフォンのメニューには第2、第3階層メニューは表示されません。第1階層のページにテキストリンクや、画像リンクなどを貼って誘導してください。
戻る