ドキュメントコンテンツとデザイン

[PaaSのみ]{class="badge informative" title="Adobe Commerce on Cloud プロジェクト（Adobeで管理されるPaaS インフラストラクチャ）とオンプレミス プロジェクトにのみ適用されます。"}

ページ階層

最終更新日： 2026年6月16日

作成対象：

  • {"id":"b5a62a22-46f7-4f0d-b151-3fc640bef588"},{"id":"e8ccd51f-da0d-4e3b-939b-e30d5ebb1ea5"}
  • {"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"},{"id":"c66ffd68-0f65-42bb-aa23-b4020f12e0bd"}
Adobe Commerceの機能 {width="20"} これは、Adobe Commerceでのみ使用できる機能であり、Magento Open Sourceでは使用できません。 （詳細情報）

ストアページ階層システムは、コンテンツページを整理し、ページネーション、ナビゲーション、メニューを追加する機能を提供します。 サンプルデータのプライバシーポリシーのページは、左側にメニューが表示されているページの例です。 大量のコンテンツを定期的に公開する場合、ページ階層を利用してコンテンツを整理することで、誰かが興味のある記事を簡単に見つけることができます。

ページ階層システムは、ノードを使用して関連するコンテンツを識別し、コンテンツページを親子関係に整理します。 親ノードは、子ノードやページを含む可能性のあるフォルダーのようなものです。 階層内の各ノードとページの相対的な位置は、ツリー​構造として表示されます。 ノードには他のノードやコンテンツページが含まれる場合があり、単一のコンテンツページは複数のノードや、親子関係や近隣関係にある他のコンテンツページに関連付けられる場合があります。

左ナビゲーション付きのページ ​ {width="600" modal="regular"}

ページ階層の設定

設定は、ページ階層システムとメタデータをアクティブ化し、デフォルトのメニューレイアウトを決定します。

CMS ページ階層 {width="600" modal="regular"}

  1. 管理者 サイドバーで、Stores > Settings>Configuration​に移動します。

  2. General​の下の左側のパネルで、Content Management​を選択します。

  3. 拡張セレクター CMS Page Hierarchy​を展開し、必要な変更を行います。

  4. 完了したら、Save Config​をクリックします。

フィールド
説明
Enable Hierarchy Functionality
コンテンツページのページ階層の使用を有効にします。 オプション：Yes / No
Enable Hierarchy Metadata
このオプションを有効にすると、メタデータを階層内のページに関連付けることができます。 オプション：Yes / No
Default Layout for Hierarchy Menu
デフォルトのメニュースタイルを指定します。 オプション：Content / Left Column / Right Column

階層ノードの追加

次の例は、関連するコンテンツページに簡単に移動できるノードを作成する方法を示しています。 ノードにはコンテンツページが関連付けられていませんが、サイトの他の場所で参照できるURL キーがあります。

例えば、個々のプレスリリースへのナビゲーションを持つ​ プレスリリース ​というノードを作成できます。 次に、ノードへの​About Us ページにリンクを含めることができます。 また、ニュースレターのバックイシューのコレクション用のノードを作成することもできます。

ノードにリンクするには、Widget ツールを使用してCMS Hierarchy Node リンクを作成し、ウィジェットをコンテンツブロックまたはページに配置します。

会社概要ページのナビゲーション メニューの例 {width="600" modal="regular"}

手順1: ノードの作成

  1. 管理者 サイドバーで、Content > Elements>Hierarchy​に移動します。

    CMS Pages grid {width="600" modal="regular"}

  2. グリッドの上で、Add Node…​をクリックします。

  3. Page Properties​の下に、ノードの​ Title ​と適切な​ URL Key ​を入力します。

    URL キーは、ノードの一意のWeb アドレスを提供します。 スペースではなく、ハイフンを使用して単語を区切り、すべて小文字にする必要があります。

    ​ ページプロパティ ​ {width="500" modal="regular"}

  4. Save​をクリックします。

    ノードは、ページの左側のツリーにフォルダーとして表示されます。

手順2：ノードへのページの追加

  1. 階層ツリーで、をクリックしてノードを選択します。

  2. Add Selected Pages(s) to Tree​をクリックします。

    上にスクロールすると、選択した各ページがノードフォルダーの下のツリーに表示されます。

手順3：構造の定義

  1. 必要に応じて、ページを位置にドラッグして、メニューに表示される順序を反映します。

    ​ ページを位置にドラッグ ​ {width="500" modal="regular"}

  2. 階層の上部にあるノードをクリックします。

    Page Properties​セクションに、ノードに関する情報が表示されるようになりました。

  3. Render Metadata in HTML Head​で、次の操作を行います。

    ​ メタデータ設定のレンダリング ​ {width="400" modal="regular"}

    • ノードを階層の最上位として識別するには、First​をYesに設定します。

    • ページネーション コントロールを表示するには、Next/Previous​をYesに設定します。

    • 階層内のページをブックとして整理するには、Enable Chapter/Section​をYesに設定します。

      ブックの一部としてノードを含めたくない場合は、デフォルトのNoのままにします。

    • ブックの特定の部分にノードを割り当てるには、Chapter/Section​を次のいずれかに設定します。

      • No - ノードを章/セクションとして定義しません。
      • Chapter – 現在のノードを章として割り当てます。
      • Section – 現在のノードをセクションとして割り当てます。
      • Both – 現在のノードを章とセクションの両方として割り当てます。

手順4：ページネーション制御の追加

  1. ネストされたページ の ページネーション オプションで、Enable Pagination​をYesに設定します。

  2. Frame​に、ページネーション コントロールに含めるページ リンクの数を入力します。

    ページネーションコントロールに含めることができるページが階層内にさらに存在する場合。

  3. Frame Skip​の場合、次のページ分割リンクのセットをスキップする（または戻る）ページ数を入力します。

手順5：メニューレイアウトの選択

ノードをメニューに表示する場合は、次の操作を行います。

  1. ページナビゲーションメニューオプション​で、Show in navigation menu​をYesに設定します。

    この設定は、ページ階層に対してナビゲーションメニューを生成するかどうかを決定します。

    ​ ページナビゲーションメニューオプション ​ {width="300" modal="regular"}

  2. コンテンツに関連するメニューの場所を指定するには、Menu Layout​を設定します。

    • Content - メニューレイアウトがコンテンツ内にあります。
    • Use Default - 設定で指定されたメニュースタイルを使用します。
    • Left Column - メニューがコンテンツの左側に表示されます。
    • Right Column - メニューがコンテンツの右側に表示されます。

  3. メニューにどの程度の詳細を含めるかを指定するには、Menu Detalization​を次のいずれかに設定します。

    • Only Children - メニューにサブページのみを含めます。
    • Neighbours and Children – 階層の同じレベルにあるサブページと他のページが含まれます。

  4. メニューの深さを判断するには、含めるレベルの最大数に​ Maximal Depth ​を入力します。

  5. メニューを書式設定するには、List Type​を選択します。

    • Unordered - メニューオプションには番号が付けられておらず、箇条書き記号の有無を問わず書式設定できます。 順序なしリストタイプのオプション：デフォルト/円/ディスク/正方形
    • Ordered - メニューオプションには番号が付けられており、大文字または小文字のいずれかで数値、アルファベット、またはローマ数字として書式設定できます。

  6. List Style​を次のいずれかに設定します：

    • Circle
    • Disc
    • Square

  7. ナビゲーションメニューにもノードを表示する場合は、メインナビゲーションメニューオプション​までスクロールし、Show in Navigation menu​をYesに設定します。

    ​ メイン ナビゲーション メニューのオプション ​ {width="250" modal="regular"}

  8. Save​をクリックします。

recommendation-more-help
commerce-admin-help-content-design