1. コンテンツの追加と変更

ナビゲーションを追加

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

あなたのウェブサイトのナビゲーションは、マーケティングの観点からあなたに直接影響を与える重要な要素です。SXAのナビゲーション レンダリングは、Webサイトのユーザーに役立つ方法でナビゲーションを設計するのに役立ちます。ナビゲーション レンダリングをページにドラッグすると、ナビゲーション メニューが生成されます。 Control Propertiesダイアログでは、ナビゲーションのスタイルを指定できます。

ナビゲーションコンポーネントをページに追加するには:

  1. ツールボックスを開き、Navigationセクションでナビゲーションレンダリングを見つけます。

  2. レンダリングをクリックしてドラッグを開始すると、レンダリングをドロップできるプレースホルダーが青色に点灯します。ナビゲーションレンダリングを目的のプレースホルダーの上に置き、プレースホルダーが緑色に点灯したら、レンダリングをページにドロップします。

    メモ

    Control Propertiesダイアログボックスでは、PlaceholderとData Sourceのプロパティは変更しないでください。これらのプロパティを変更すると、レンダリングが消えたり、予期しない動作が発生したりする可能性があります。

  3. Stylingセクションでは、ナビゲーションレンダリングに使用できるバリアントがある場合、たとえば、ページタイトルの代わりにサブタイトルを表示するバリアントがある場合は、バリアントフィールドで選択できます。バリアントによって、表示される項目とその外観が決定されます。

  4. Stylesフィールドで、目的のスタイルを選択し、右矢印をクリックしてから、OKをクリックします。たとえば、次の項目を選択できます。

    航法

    形容

    ワイヤーフレーム モードの例

    Main navigation - drop down vertical

    標準の垂直ドロップダウンナビゲーション
    Main navigation drop down vertical example.

    Main navigation- drop-down horizontal

    子項目を1行に含むドロップダウン ナビゲーション
    Main navigation- drop-down horizontal example.

    Sidebar navigation

    すべての子アイテムが縦に表示
    Sidebar navigation example.

    Sitemap navigation

    すべての子アイテムが縦に表示
    Sitemap navigation example.

    Big/fat navigation

    すべての子アイテムが横方向に表示
    Big/fat navigation example.

    Mobile navigation

    モバイル用ナビゲーション
    Navigation for mobile example.
    手記

    独自にカスタマイズしたテーマを使用していて、このテーマがナビゲーション クラスのCSS実装を提供していない場合、ナビゲーションのスタイルを変更しても効果がない可能性があります。

  5. Custom Variants for levelsフィールドでは、特定のナビゲーション レベルのカスタム外観を選択できます。

  6. Navigation Settingsセクションでは、次のフィールドを指定できます。

    • Start Page – サイトをホームページとは異なるページで開く場合は、ここでそのページを選択します。

    • Top Navigation Level –ナビゲーションを開始するレベル(ルートからカウント)をクリックします。

    • Bottom Navigation Level –ナビゲーションが終了するレベル(ルートからカウント)をクリックします。

    • Navigation Filter – ドロップダウンリストからナビゲーションフィルタをクリックします。

    • Flat Structure - このチェックボックスを選択すると、同じレベルにあるすべてのアイテムが表示されます。

    • Include Root Page – このチェックボックスを選択すると、ナビゲーションリストにルートページが含まれます。

  7. Cachingセクションでは、ナビゲーションレンダリングのキャッシュを設定して、Webサイトのパフォーマンスを向上させることができます。

    • Cacheable – 選択すると、HTMLキャッシュが有効になります。レンダリングにビューが1つしかない場合は、このチェックボックスのみを選択する必要があります。

    • Clear on Index Update – レンダリングでSitecore ContentSearch APIを使用する場合に選択します。

    • Vary by Data – レンダリングのデータソースに基づいて、別のバージョンのHTMLをキャッシュすることを選択します。

    • Vary by Device – 使用する各デバイスの出力のコピーをキャッシュする場合に選択します。

    • Vary by Login – ログインしたユーザーに対してレンダリングの表示が異なるかどうかを選択します。

    • Vary by Param - レンダリングで受け入れられる各パラメータの出力をキャッシュする場合に選択します。

    • Vary by Query String – クエリ文字列パラメータの一意の組み合わせごとに出力をキャッシュする場合に選択します。

    • Vary by User - レンダリングにユーザー固有の情報を表示するかどうかを選択します。

  8. Parametersセクションでは、サブレイアウトのこのインスタンス (データ ソース以外) に渡されるデータをカスタマイズできます。Additional Parametersフィールドで、追加のプロパティをキーと値のペアとして追加します。

この記事を改善するための提案がある場合は、 お知らせください!