サポートに戻る コンテンツとメディア 色設定

色設定

WordPress エディターの多数のブロックには、コンテンツの色を制御する色設定があります。このガイドではこれらの色設定について説明します。

色設定にアクセスする

色設定は次に使用できます。

ブロックをクリックすると、右のサイドバーにブロック設定が表示されます。サイドバーが表示されない場合、右上の 「設定」アイコンをクリックして設定を表示させます。このアイコンは、幅の異なる2つの列から成る正方形のアイコンです。

黒の背景で、下に「設定」というツールチップが表示されたエディターの設定アイコン。
「設定」アイコンをクリックするとブロック設定が開く

ブロック設定内で、色設定をすぐに見つけることができます。他のブロックでは、色設定は「スタイル」タブにあります。右側の画像は「スタイル」タブの下にある色設定が含まれるカラムブロックを示しており、円形のアイコンをクリックするとアクセスできます。

すべてのブロックに色設定が含まれているわけではありません。利用可能な色設定は、テーマとブロックの種類によって異なります。

「スタイル」タブの下に表示される「色」が含まれるカラムブロックの設定。
カラムブロックの色設定の例

無地を選択する

カラーピッカーを使用すると、テキスト、背景、リンクなど、ブロックのさまざまな要素の色を選択できます。以下の説明のように、対応する番号の付いた各セクションをクリックします。

カラーピッカーを使用してブロックエディターのテキストまたはリンクのカスタムカラーを設定する方法。
  1. カラーサークルをクリックしてカラーピッカーを開きます。
  2. 既存の色のいずれかのドットをクリックして、カラーパレットから事前定義された色のオプションを選択します。「スタイル」を使用して、ここに表示される色を選択できます。
  3. ボックスエリアをクリックしてカスタムカラーを設定します。
  4. 使用したいカスタムカラーコードがすでにある場合は、それをボックスエリアに貼り付けることができます。上記の他のオプションのいずれかを使用して別の色を選択すると、このコードは自動的に更新されます。
  5. ドロップダウンアイコンをクリックして、別のカラープロフィールを選択します。HexRGBHSL から選択できます。
  6. 円形のアイコンをクリックして左右にドラッグし、選択した色の不透明度または透明度を増減します。
  7. 円形のアイコンをクリックして左右にドラッグし、別の色を選択します。
  8. 円形のアイコンをクリックしてボックスエリア内の任意の場所にドラッグし、現在の色の別の色合いを選択します。
  9. クリックして現在のカラーコードをクリップボードにコピーします。
  10. 3つのドットをクリックし、「リセット」をクリックすると、選択したカラーオプションを元に戻します。これにより、色がテーマのデフォルトの色に戻ります。

選択した色をリセットするには、色選択エリアの右下にある「クリア」ボタンをクリックします。

グラデーションを選択する

グラデーションでは、2つ以上の色を選択して徐々に混ぜ合わせることができます。以下の説明のように、対応する番号の付いた各セクションをクリックします。

カラーピッカーを使用してブロックエディターの背景のカスタムカラーを設定する方法。
  1. カラーサークルをクリックしてカラーピッカーを開きます。
  2. クリックして背景に「無地」を設定します。これは、上で説明したテキストまたはリンクの色と同じように機能します。
  3. クリックして背景に「グラデーション」を設定します。
  4. 既存の色のいずれかのドットをクリックして、カラーパレットから事前定義されたグラデーションを選択します。「スタイル」を使用して、ここに表示される色を変更できます。
  5. ボックスエリア内のいずれかの円形アイコンをクリックして、グラデーションに含めるカスタムカラーを選択します。ボックス内の他のセクションをクリックして、色を追加することもできます。
  6. ドロップダウンアイコンをクリックして、グラデーションの「タイプ」を選択します。「線形」「放射状」から選択できます。
    • 線形: 直線状に2つの色の間にグラデーションを作成します。
    • 放射状: 中心から始まり境界に移動します。
  7. ボックス内の数値を編集して、グラデーションの「角度」のカスタム値を選択します。これは、線形グラデーション「タイプ」を選択した場合にのみ表示されます。
  8. 円内の小さな色付きの点をクリックしてドラッグし、グラデーションの「角度」を調整します。これにより、上記の7で説明した「角度」ボックスの値が自動的に置き換えられます。

選択した色をリセットするには、色選択エリアの右下にある「クリア」ボタンをクリックします。

デュオトーンフィルターを選択する

デュオトーンフィルターオプションは、画像ブロックやカバーブロックなどの画像ブロックに適用できる2トーンカラーのエフェクトです。白黒写真のようなものですが、任意の色の組み合わせを選択できます。 

開始するには、ツールバーまたはブロック設定で「デュオトーンフィルター」ボタンを選択し、例から色を選択するか、自分で色を設定します。

エディターで画像をクリックし、複数のデュオトーンフィルターを適用してどのように見えるかを確認する方法を示した GIF。

自分の色を設定するには、次のようにカラーバー内のドットを選択します。

カラーバーでカスタムカラーを設定するために、デュオトーンフィルター設定のクリックする場所を示したスクリーンショット。

デュオトーンフィルターを削除するには、色選択エリアの右下にある「クリア」ボタンをクリックします。

Copied to clipboard!