テーマを持ったコンポーネントをスタイリングする

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

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

コンポーネントビルダーでは、スタイルビルダーでテーマを作成・管理します。スタイルズライブラリに保存されたテーマを使えば、ワンクリックでコンポーネント全体のスタイルが可能です。

コンポーネントのテーマを選ぶことに加え、テーマに含まれる要素のカテゴリ(例えば、すべてのカードやすべてのイメージブロック)のスタイルを変更することでテーマを カスタマイズ できます。

また、スタイルを変更し たり、コンポーネント内の特定の要素を一つずつ カスタマイズ することも可能です。

コンポーネントのテーマを選びましょう

テーマは、事前に作成された要素とスタイルルールの組み合わせで構成されています。主な目的は、複数のスタイルを同時に適用することで、例えばライトセクション、ダークカード、ライトテキストブロック、特定のピルスタイルをワンクリックで適用することで、コンポーネントのスタイリングプロセスを向上させることです。

テーマを使ったコンポーネントをスタイリングするには:

  1. コンポーネントビルダーで、スタイルをつけたいコンポーネントをクリックします。

  2. スタイルしたいバージョンの右上で「 現在のテーマ 」をクリックしてください。

    Screenshot of the style picker
  3. 右側のペインの 「テーマ」 タブで、そのバージョンに割り当てたいテーマをクリックしてください。

コンポーネントは選んだテーマに沿ってスタイリングされています。

テーマをカスタマイズする

要素カテゴリごとに代替スタイルを選択することでテーマをカスタマイズできます。これは、デフォルトスタイルに加えて他のスタイルで構築されている場合のみ可能です。代替スタイルは、テーマピッカーの をクリックすることで利用可能です。

特定のバージョンのコンポーネント向けにテーマをカスタマイズするには:

  1. コンポーネントビルダーでカスタマイズしたいバージョンをクリックします。
  2. バージョンの右上で「 現在のテーマ 」をクリックしてください。
  3. 右側のペインで「 カスタマイズ 」をクリックします。
  4. カスタマイズしたい要素タイプは をクリックしてください。
  5. 「許可されたスタイルリスト」で、このコンポーネントのこの要素タイプに使いたいスタイルをクリックしてください。

Elementのカスタマイズ概要では、カスタマイズされたスタイルが薄緑色でハイライトされています。

Theme dialog in the right-hand pane

カスタマイズは特定のコンポーネントに適用されたテーマにのみ適用されます。コンポーネントに別のテーマを適用すると、すべてのカスタマイズが削除されます。また、同じテーマを使う別のコンポーネントやバージョンにカスタマイズが移されることはありません。

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