要素のカスタマイズ

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

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

Stylesライブラリでは要素に1つ以上のスタイルが割り当てられています。コンポーネントで要素を使うと、そのコンポーネントに選ばれたテーマに合わせてスタイリングされます。そのデフォルトスタイルを、スタイルライブラリ内の元々割り当てられたスタイルや、他の利用可能なスタイルに変更することも可能です。

オプションで、特定の属性スタイルに一度きりのカスタマイズを適用することも可能です。ワンオフスタイルのカスタマイズは、多くの異なるルールを作らずに、一度きりのスタイルを独自に組み合わせることを可能にします。変更の影響を受けるのは選択した要素のみであり、一度限りのカスタマイズスタイルは他の要素が再利用するためにStylesライブラリに保存されません。

スタイルをカスタマイズする

スタイルの一つ以上の特徴を変更してスタイルをカスタマイズするには:

  1. Componentビルダーでスタイリングしたい要素を選択します。キャンバス内の要素をクリックするか、コンポーネントの左下にあるコンテキストツールバーを使うことができます。

  2. 右のペイン上部のStyleセクションで、タイルをクリックしてスタイルピッカーを開き、カスタマイズしたいスタイルを選びます。

  3. 選択したスタイルをカスタマイズするには、変更したいスタイルの特定の特徴(例えばTypographySpacing)をクリックしてください。

  4. オプションShow all available stylesをオンにすると、Stylesビルダーで以前に作られたすべてのスタイルが確認できます。デフォルトのスタイルに加えて、要素に割り当てられた特徴スタイルから選択したり、Stylesライブラリの任意の特徴スタイルから選択できます。たとえその特徴がこの要素に割り当てられていなくてもです。これらの追加オプションは警告サインで強調されており、使うと元の要素スタイルから切り離されてしまいます

    Screenshot of the different feature style options

スタイルの一度きりカスタマイズを作る

スタイルの一つ以上の特徴を新たに設定して一度きりのカスタマイズを行うには:

  1. Componentビルダーでスタイリングしたい要素を選択します。キャンバス上の要素をクリックするか、コンポーネントの左下にあるコンテキストツールバーを使うことができます。

  2. 右のペイン上部のStyleセクションで、タイルをクリックしてスタイルピッカーを開き、カスタマイズしたいスタイルを選びます。

  3. 変更したいスタイルの特徴(例えばTypographySpacing)はをクリックします。

  4. > Custom をクリックしてください。

  5. 右側のペインには、Stylesビルダーの設定オプションが表示され、それを使って一度きりのカスタムデザインを作成できます。

Screenshot showing the configuration option for one-off customization of an element feature.

高度なスタイルカスタマイズは、要素が 重複リンクされていない限り、既存のコンポーネントバージョンにのみ適用されます。この場合、カスタマイズはリンク要素を共有するすべてのバージョンに適用されます。

ここで作成されたデザインはライブラリに保存されることも再利用もできません。再利用可能なデザインにするには、それを作成し、スタイルライブラリの要素に適用できます。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、