WordPress 5.8より、画像やカバーなどのブロックで設定した写真にデュオトーンを適用できる、デュオトーンフィルターが使えるようになりました。
WordPress 5.8以上であれば、すぐに試すことができる機能なのでご紹介します。
この記事で解説している内容は、WordPress5.8時点のものとなります。今後のバージョンアップによっては、仕様が変更なる可能性もございます。
デュオトーンとは
デュオトーン（ダブルトーンよも呼びます）とは、2つの色を組み合わせて表現されたデザインのことで、デザインの手法として多くのWebサイトや広告にも取り入れられています。
一般的にコントラストの強い2色が使用されることが多く、インパクトのあるビジュアルを作成するのに役立ちます。
通常、このような加工にはPhotoshopなどの画像加工ソフトが必要でしたが、WordPress5.8ではエディタから簡単に施すことができます。
デュオトーンフィルターの使い方
デュオトーンフィルターは、画像ブロックとカバーブロックで使用できます。
画像ブロックまたはカバーブロックのツールバーの「デュオトーンフィルターを適用」をクリックすると設定パネルが開きます。
デフォルトで用意されているデュオトーンパレットを選択するだけで適用できます。
影とハイライトの色を変更して、独自の組み合わせを適用することも可能です。
色の組み合わせに悩んでしまう場合は、下記のようにテーマに使用しているカラーを選択すれば、サイトの色合いと違和感なく溶け込むようにできます。
カバーブロックで使用する場合
カバーブロックでは、画像だけではなく動画にもデュオトーンフィルターを適用できます。
DUOTONE
Duotone is a halftone reproduction of an image using the superimposition of one contrasting color halftone over another color halftone.
ただ、カバーブロックではオーバーレイ（画像や動画の上に透過して色を被せる）が設定されているので、その状態でデュオトーンフィルターを適用しても効果が判りづらいです。
カバーブロックでデュオトーンを明確にしたい場合は、オーバーレイの不透明度を下げるなどしてみてください。（0にするなど）
【補足】デュオトーンフィルターが適用される範囲
エディタでデュオトーンフィルターを適用しても、メディアライブラリの画像や動画には影響はありません。（エディタとプレビューのみに反映されます）
デュオトーンはメディアライブラリの画像を上書きしてしますか ?
メディアライブラリの画像や動画が変更されることはありません。デュオトーン効果は、SVG フィルターと CSS のフィルター属性を使って動作するため、ライブラリ内の画像や動画が変更されることはありません。このことは、メディアライブラリに存在しないリンク先の画像にフィルターを適用できることを意味します。一方で、RSS フィードや画像の URL を直接使用する場所では、フィルターが表示されないことを意味します。
ja.wordpress.org
WordPressにアップロードしていない外部参照の画像にも適用できる一方、RSSフィードや画像検索などでは、フィルターなしの通常の画像が表示されるようです。
画像加工の技術がなくても、このような機能をエディタで簡単に使えるのは嬉しいですね。
デュオトーンフィルターを使えば、何気ない写真でもお洒落に見せることができるので、ビジュアルにこだわるページを作るときに活用できそうです。
や
