Webサイトを作っていて、「この写真、ちょっと明るすぎるな…」「サイトの雰囲気に合わせて白黒にしたいな」と思うことはありませんか？

そんな時、わざわざ画像編集ソフトを開いて加工し、WordPressにアップロードし直すのは手間ですよね。 実はElementorなら、「CSSフィルター」という機能を使うことで、画像ファイル自体を変更せずに、画面上で画像の色味やぼかしを自由自在に調整することができます！

今回は、作業効率が爆上がりするCSSフィルターの基本の使い方をご紹介します。

CSSフィルターでできること

CSSフィルターとは、アップロードした画像に対して、後からElementor 上で「色調補正」をかけられる機能です。スマートフォンの写真加工アプリでフィルターをかけるような感覚で、以下の5つの数値を調整できます。

• ぼかし (Blur)：画像をふんわりとぼかします。

• 明るさ (Brightness)：画像を明るく、または暗くします。

• コントラスト (Contrast)：明暗の差をくっきりさせます。

• 彩度 (Saturation)：色の鮮やかさを変えます。

• 色相 (Hue)：画像全体の色味（赤っぽく、青っぽくなど）をガラッと変えます。

元の画像データ自体を書き換えるわけではないので、いつでも元の状態に戻せるという大きなメリットがあります。

CSSフィルターの設定手順

⚫︎ 設定手順

1. 調整したい画像ウィジェットを選択します。

2. 左パネルの [ スタイル ] タブを開きます。

3. 「CSS フィルター」という項目を見つけ、右側の鉛筆アイコンをクリックします。

4. 5つのスライダーが表示されるので、目視で確認しながら数値を動かして調整します。

たったこれだけで、画像の印象を自由に変えることができます！

【実用例】画像をモノクロにする

コーポレートサイトのスタッフ紹介や、スタイリッシュなポートフォリオサイトでよく使われるテクニックです。バラバラの色味の写真をモノクロで統一することで、一気にプロっぽい洗練されたデザインになります。

⚫︎ 設定方法

CSSフィルターを開き、「彩度 (Saturation)」のスライダーを一番左（数値：0）にするだけです。 もし全体が暗く沈んでしまったら、「明るさ」や「コントラスト」を少し上げて微調整すると、綺麗なモノクロ写真に仕上がります。

【実用例】マウスを乗せたらカラーに！ホバーエフェクト

CSSフィルターの最大の魅力は、「ホバー（マウスを乗せた時）」と組み合わせることで、リッチなアニメーションを作れることです。

「普段はモノクロだけど、マウスを乗せるとフワッと鮮やかなカラーになる」という、よく見るあのおしゃれな動きを作ってみましょう。

⚫︎ 設定方法

1. 画像ウィジェットの [ スタイル ] タブにある「通常」を選択します。

2. CSSフィルターの「彩度」を 0（モノクロ）にします。

3. 次に、すぐ横にある「ホバー」タブに切り替えます。

4. ホバー側のCSSフィルターを開き、「彩度」を 100（または元の数値）にします。

5. すぐ下にある「トランジション期間 (Transition Duration)」を「0.3〜0.5」くらいに設定します。（※これでフワッと色が変化するようになります）

プレビュー画面で画像にマウスを乗せてみてください。魔法のように色が変化するリッチなボタンやバナーの完成です！

まとめ

• Elementor の [ スタイル ] ＞「CSSフィルター」を使えば画像加工ソフトは不要。

• 「彩度」を0にすれば、一瞬でおしゃれなモノクロ写真になる。

• 「通常」と「ホバー」で設定を変えれば、ホバーエフェクトが作れる。

サイトのトーン＆マナーを統一する上で、画像の色味合わせは非常に重要です。このCSSフィルターを使いこなして、制作スピードとデザインのクオリティを同時にアップさせましょう！