攻略

Version:

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

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

SXAでは、スタイルはエディターや最終製品でコンポーネントがどのようにレンダリングされるかを指定します。サイト作成後、選択したテーマに応じてデフォルト設定でいくつかのスタイルが用意されています。

カスタムスタイルを追加できます。カスタムスタイルを追加するには、まずスタイルコントローラーを挿入し、型を割り当て、最後にスタイルクラスを追加する必要があります。このウォークスルーでは以下の方法を説明します:

スタイルコントローラーを挿入します

Horizonで利用可能にしたいスタイルを挿入する必要があります。

スタイルを挿入するには:

コンテンツエディターで、サイトの Presentation フォルダに移動します。
新しいスタイルを追加するには、右クリックで 「Styles」をクリックし、「 Insert」をクリックし、「 Styles」をクリックしてください。
スタイルの名前を入力して OKをクリックします。

!ヒント新しいスタイルに名前をつけて、編集者が何をするのか理解しやすくしましょう。

スタイルのフォルダレベルでは、Horizonが編集者にスタイルをどのように表示するか設定する必要があります。これを行うには、Horizonエディター用の既製表示タイプのいずれかを割り当てる必要があります。

型を割り当てるには:

!注 アイコンボタングループチェック やアイコンボタングループ ラジオ 表示タイプを使う場合は、グリッド内で正しいHorizonアイコンが指定されていることを確認してください。

エディターがコンポーネントの異なるオプションを見られるように、それぞれのオプションをスタイルクラスとして追加する必要があります。

スタイルクラスとしてオプションを追加するには:

コンテンツエディターで、スタイルを追加したい Style フォルダを見つけて右クリックし、新しいスタイルクラスを挿入するには 「Insert, Style」をクリックします。
Value欄でスタイル用のCSSクラスを入力します。デフォルトのCSSクラスとカスタムCSSクラスの両方を使えます。
このクラスに紐づけたい特定のコンポーネントを入力するには、「 許可されたレンダリング 」セクションで 「編集」をクリックしてください。ここでコンポーネントを入力すると、このクラスはこれらのコンポーネントのみに表示されます。このフィールドを空にすると、すべてのコンポーネントでクラスが利用可能になります。
この手順をスタイルに合わせて、さらに好きなクラスでも繰り返してください。

!注使用するCSSスタイルもテーマやCSSで設定する必要があります。

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