Wix Studio エディタ:サイトの色を操作する

読了時間:4分
サイトの色は、クライアントのサイト全体で使用される全体のカラーテーマを構成します。このテーマは、さまざまなカテゴリー(例:背景とテキスト)に適用され、特定の色合いを含む色の範囲に分かれています。
単色と色の範囲の両方がカスタマイズ可能であるため、必要に応じてサイトの特定の部分をデザインしたり調整したりできます。
この記事では、以下の項目について説明します:

サイトの色について

これらは、作業中のサイト全体で使用される色です。通常は、コンポーネントに接続されています。たとえば、ある色はセクション背景に、別の色はテキストに、といった具合です。
表示されるサイトの色の数は、選択したテンプレート、またはゼロから構築するかによって異なります。ただし、サイトの色を追加、管理、変更して、スムーズなデザイン体験を提供することは可能です。

サイトの色を編集する

「サイトスタイル」パネルからサイトの色をカスタマイズし、デザインニーズに合わせてクライアントのブランディングを強化しましょう。
重要:
色を変更すると、更新している色の要素にすぐに影響します。たとえば、以前に追加したおすすめパーツ、またはこの色を使用したパーツなどです。

サイトの色を編集する方法:

  1. エディタ左側の「サイトスタイル をクリックします。
  2. 」タブを選択します。
  3. 調整したい色をクリックします。
  4. 以下のオプションから、範囲の中央の色を選ぶ方法を選択します:
    • カーソルを使用してピッカーから新しい色を選択します。
    • HEX、RGB、または HSB 情報を入力します。
    • スポイト をクリックして、画面上の任意の場所から新しい色を選択します。
  5. 適用」をクリックします。
パネルで色が変更されています。新しい色合いが選択され、カーソルが「適用」ボタンをクリックしています。

サイトの色を管理する

サイトの色を管理することで、デザインプロセスをできるだけスムーズに行うことができます。色の名前を変更して見つけやすくしたり、色を置き換えてサイトに素早く変更を加えることができます。

サイトの色を管理する方法:

  1. エディタ左側の「サイトスタイル をクリックします。
  2. 」タブを選択します。
  3. 該当する色にマウスオーバーし、「その他のアクション」アイコン undefined をクリックします。
  4. 実行する内容を選択します:
    • 色の名前を変更する:
      1. 名前を変更」をクリックします。
      2. 新しい色の名前を入力します。
    • 削除 / 置き換える:
      1. 削除」をクリックします。
      2. ピッカーから代替色を選択します。
      3. 適用」をクリックします。
パネルの「その他のアクション」メニューが開いています。カーソルが「名前を変更」オプションをクリックしています。
色を削除 / 変更できない場合:
  • 特定の色合いは、Wix アプリやサイト上の要素のデフォルトの色として使用されるため、「削除」オプションはグレー表示されます。ただし、パネル内で色合いをクリックして変更することは可能です。
  • デフォルトの色として設定されていない色合いはサイト全体で引き続き使用されている場合があるため、色を変更するように求められます。

要素にサイトの色を適用する

色はカテゴリーに割り当てられているので、「要素を追加」パネル内の一部のおすすめ要素(例:おすすめテキスト要素)に自動的に適用されます。「要素設定パネル」を使用してキャンバス上の要素にサイトの色を適用することもできます。

要素にサイトの色を適用する方法:

  1. 該当する要素を選択します。
  2. エディタ右上の「要素設定パネルを開く」アイコン  をクリックします。
  3. デザイン」下のカラーボックスをクリックして、ピッカーを開きます。
Wix Studio エディタの「要素設定パネルを開く」アイコンのスクリーンショット。
  1. テーマカラー」から色合いを選択して適用します。
ベクター要素の要素設定パネルが開いています。カラーボックスの 1つが開いており、テーマカラーが適用されています。
参考:
要素に複数の色が含まれている場合は、カラーボックスをクリックして各色合いをカスタマイズできます。

お役に立ちましたか?

|