1. Horizonの設定

チュートリアル: カスタム スタイルの追加

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

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

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

カスタムスタイルを追加できます。カスタム スタイルを追加するには、まずスタイル コントローラを挿入し、次に型を割り当ててから、スタイル クラスを追加する必要があります。このチュートリアルでは、次の方法について説明します。

  • スタイル コントローラーを挿入する

  • タイプを割り当てる

  • スタイル クラスを追加する

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

Horizonで使用できるようにするスタイルを挿入する必要があります。

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

  1. コンテンツエディターで、サイトのPresentationフォルダーに移動します。

  2. 新しいスタイルを追加するには、Stylesを右クリックし、Insertをクリックして、Stylesをクリックします。

  3. スタイルの名前を入力し、「 OK」をクリックします。

先端

新しいスタイルには、編集者がその機能を理解できるような名前を付けます。

タイプを割り当てる

スタイルのフォルダ レベルでは、Horizonがエディタにスタイルを表示する方法を構成する必要があります。これを行うには、Horizonエディタにあらかじめ用意されている 表示タイプの1つを割り当てる必要があります。

タイプを割り当てるには:

  1. スタイルとして、DataセクションでTypeドロップダウンをクリックし、スタイルの表示タイプを選択します。

  2. 編集者が選択肢を選択解除できるようにするには、AllowEmptyチェック ボックスをオンにします。

メモ

Icon-button-group-checkまたはIcon-button-group-radioの表示タイプを使用する場合は、グリッドで正しいHorizonアイコンが指定されていることを確認する必要があります。

スタイル クラスを追加する

エディタがコンポーネントのさまざまなオプションを表示するようにするには、各オプションをスタイルクラスとして追加する必要があります。

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

  1. コンテンツ エディタで、スタイルを追加するStyleフォルダを見つけて右クリックし、新しいスタイル クラスを挿入するには、Insert、Styleの順にクリックします。

  2. Valueフィールドに、スタイルのCSSクラスを入力します。デフォルトのCSSクラスとカスタムCSSクラスの両方を使用できます。

  3. このクラスを関連付ける特定のコンポーネントを入力するには、「 Allowed Renderings 」セクションで「 Edit」をクリックします。ここにコンポーネントを入力すると、このクラスはこれらのコンポーネントに対してのみ表示されます。このフィールドを空のままにすると、クラスはすべてのコンポーネントで使用できます。

  4. スタイルに必要な他のクラスに対して、これらの手順を繰り返します。

手記

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

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