ウォークスルー
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
!注このトピックで説明されている手順はコンテンツエディターを使用してください。
スタイルは、Page Builderアプリと最終製品の両方でコンポーネントのレンダリング方法を定義します。サイトを作成すると、デフォルト設定でいくつかのスタイルが用意されています。ただし、SXAコンポーネントには自分のカスタムスタイルを追加できます。
以下のスクリーンショットは、コンテンツエディターで設定された「 Background in Pages」というカスタムスタイルを示しています。この例では、カスタムスタイルによりコンテンツ作成者がプロモーションコンポーネントの3種類の背景から1つを選択できます。リスト内の各値はスタイルクラスに対応しています。
このウォークスルーでは、以下の方法を説明します:
- カスタムスタイルを追加しましょう。
- Pagesでカスタムスタイルオプションの表示方法を指定してください。
- Pagesで利用したいスタイルオプションを定義するために、スタイルクラスを追加してください。
カスタムスタイルの追加
コンテンツ作成者に提供したいカスタムスタイルをPagesに追加してください。
カスタムスタイルを追加するには:
- サイトの Presentation フォルダに行ってください。
- 「スタイル」を右クリックしてから「>スタイルを挿入」をクリックします。
- スタイルの名前を入力して OKをクリックします。
!ヒント例えば、新しいスタイルにコンテンツ作成者が何をするのか理解しやすい名前を付けBackground。
表示タイプを指定する
カスタムスタイルを追加した後、Pagesのスタイルオプション表示方法を設定してください。これを行うには、既製の 表示タイプのいずれかを割り当てる必要があります。
表示タイプを指定するには:
-
コンテンツツリーで、作成したカスタムスタイルをクリックします。
-
データセクションで「タイプリスト」をクリックし、スタイルの表示タイプを選択します。
-
コンテンツ作成者がセクションを空欄にしておけたい場合は、「 空の値を許 す」チェックボックスを選択してください。
!注 アイコンボタングループチェック や アイコン ボタングループラジオ表示タイプを使う場合は、グリッドに正しいページアイコンが指定されているか確認してください。
カスタムスタイルにスタイルクラスを追加
コンテンツ作成者がコンポーネントごとに異なるスタイルオプションを見られるようにするには、それぞれのオプションをスタイルクラスとして追加してください。
カスタムスタイルにスタイルクラスを追加するには:
- コンテンツツリーでカスタムスタイルを右クリックし、「スタイル>挿入」をクリックします。
- Valueフィールドで、スタイルのCSSクラス名を入力します。デフォルトのCSSクラスとカスタムCSSクラスの両方を利用できます。
- このクラスを特定のコンポーネントに関連付けるには、「許可された レンダリング 」セクションで 「編集」をクリックします。ここでコンポーネントを入力すると、このクラスはそのコンポーネントのみで利用可能です。これをしないと、すべてのコンポーネントでクラスが受講可能です。