2026年7月23日

WordPressのCSS color-mix()関数を使う方法

テーマ・デザイン

はじめに

CSSのcolor-mix()関数を使用することで、Webサイト上で色を合成したり、グラデーションを作成することができます。WordPressテーマを開発する際には、これにより視覚的な魅力を高めることができます。

症状・背景

この記事が必要になる主な場面:

カスタムテーマで豊かな色合いのグラデーションや合成色を使用したい場合
CSSだけで複雑なグラフィック効果を作成したいとき
ユーザーインターフェース(UI)をより洗練させたいとき

手順・設定方法

ステップ1: カスタムスタイルシートに`color-mix()`関数を追加する

# WordPressテーマディレクトリ内のstyle.cssファイルを開きます。
nano themes/your-theme-name/style.css

# 以下のように新しいルールを追加します。この例では、青と橙の色を混合しています。
.custom-gradient {
	background: color-mix(in srgb, blue 50%, orange 50%);
}

ステップ2: グラデーション効果を作成する

# 色を線形グラデーションに変換します。以下は、青から橙への線形グラデーションです。
.linear-gradient {
	background: linear-gradient(to right, color-mix(in srgb, blue 50%, orange 50%) 0%, color-mix(in srgb, orange 60%, red 40%) 100%);
}

ステップ3: `color-mix()`と他機能の組み合わせ

# CSS変数を使用して色を定義し、`color-mix()`で合成します。
:root {
	--primary-color-blue: blue;
	--secondary-color-orange: orange;
}

# 合成した色を背景色として使用します。
.combined-colors {
	background: color-mix(in srgb, var(--primary-color-blue) 70%, var(--secondary-color-orange) 30%);
}

ステップ4: 色の透明度を調整

# 合成した色に透明度(alpha値)を適用します。
.transparent-combined-colors {
	background: rgba(color-mix(in srgb, var(--primary-color-blue), var(--secondary-color-orange)), 0.7);
}

注意事項

color-mix()は一部の古いブラウザではサポートされていない可能性があるため、対応するCSSのバックアップやフォールバックを用意すること。
カスタムスタイルシートの変更後は必ずテスト環境で動作確認を行うこと。
色の混合には視覚的な感性が必要であり、適切な色合いを得るまで試行錯誤が必要となる場合がある。

まとめ

1. color-mix()関数: CSSで2つの色を合成するための関数。

2. 線形グラデーション: 2つ以上の色からなるグラデーション効果を作成します。

3. CSS変数: 色の設定値を一元管理し、使い回すことができます。

4. 透明度(alpha値): 合成した色に透明度を適用することで、奥行きや複雑さを演出できます。

Post Views: 9