スタイルを使用してサイトの色を変更する

選択する色は、サイトデザインの主要な部分となります。このガイドでは、サイトのカラーパレットを管理する方法について説明します。

サイトエディター対応のテーマをサイトに使用している場合、「スタイル」を使用してサイトの色を変更できます。サイトでサイトエディターが使用されているかどうかを簡単に確認するには、ダッシュボードの「外観」でチェックします。ここにエディターが表示されている場合、次の手順でサイトの色を変更できます。

サイトのカラーパレットは、サイト全体で使用されるデフォルトの色を設定します。特定の要素の色を指定することもできますが、カラーパレットを定義するとサイト全体で一貫した配色が可能になります。

ここでは、テーマ、デフォルト、カスタムの色を編集できます。

• テーマ: テーマを作成するときにテーマのデザイナーが設定した色。テーマのデザイン全体で使用されます。
• デフォルト: ページと投稿を編集するときにブロックの色設定に表示される色。
• カスタム: カラーパレットで使用する追加の色を定義して名前を付けます。

テーマカラーを更新するには、以下の手順を実行してください。

1. 「パレット」の下のボックス内をクリックします。

2. 「テーマ」の横にある3つのドットをクリックし、「詳細を表示」を選択してパレットの色領域のリストを展開します。
3. 各テーマは独自の色領域を定義します。この例では、「メイン」、「サブ」、「前景」、「背景」、「ターシャリ」から色を選択して、その色を編集できます。

4. ポップアップ表示されるカラーピッカーを使用して任意の色を選択します。
5. 「完了」をクリックして選択した色を設定します。
6. 右上の「保存」をクリックして変更を保存します。

サイトのパレットに複数のカスタムカラーを追加することもできます。これらを保存すると、ブロックの色設定から選択できるようになります。

カスタムカラーを追加するには、次の追加手順を実行してください。

1. 「カスタム」で、「+」ボタンをクリックします。
2. カラーピッカーから色を選択するか、 HEX 、 RGB 、 HSL のいずれかの色の値を入力します。
3. 色の名前をクリックし (デフォルトは「色1」)、新しい色の名前を入力します。
4. 「完了」をクリックします。

これらの手順は次の動画で実演されています。

「パレット」のすぐ下の色設定に、サイトのさまざまな要素の色を編集するオプションが表示されます。これらの要素は次のとおりです。

• テキスト: サイト全体の通常の基本テキスト (リンク、キャプション、ボタンテキスト、見出しを除く) に使用する色を選択します。
• 背景: サイトの背景に無地またはグラデーションを選択します。サイトの背景をカスタマイズする方法の詳細については、こちらのガイドを参照してください。
• リンク: サイトのすべてのリンクの色を選択します。ここでは、すべてのリンクに表示される「デフォルト」の色と、リンクの上にカーソルを置いたときに表示される「マウスオーバー」の色を選択できます。

• キャプション: 画像ブロックのキャプションで使用するテキストの色を選択します。
• ボタン: ボタンブロックで使用する色を設定します。テキストの色を選択し、ボタンの背景に無地またはグラデーションを設定できます。
  • 現在、ボタンのマウスオーバーの色指定は利用できません。CSS コードを使用してボタンにマウスオーバーの色を適用することはできます。
• 見出し: サイト全体の見出しブロックの色を設定します。テキストの色を選択し、見出しの背景に無地またはグラデーションを設定できます。
  • 見出しレベル (H1～ H6) ごとに異なる色を選択するには、「色」の横にある3つのドットをクリックしてオプションを展開し、任意の見出しレベルをクリックします。見出しレベルの横にチェックマークが表示されたら、オプションを閉じてその見出しレベルの色設定にアクセスします。

すべての要素ではなく特定のテキストの色のみを上書きする場合は、その特定の投稿またはページの、個々のブロックの色設定内で別の色を設定できます。