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