新テーマ「ストークSE」をリリースしました!

画像の色を簡単変更!画像ブロックのデュオトーンフィルターが面白い!

WordPress 5.8より、画像カバーなどのブロックで設定した写真にデュオトーンを適用できる、デュオトーンフィルターが使えるようになりました。

WordPress 5.8以上であれば、すぐに試すことができる機能なのでご紹介します。

ja.wordpress.org

この記事で解説している内容は、WordPress5.8時点のものとなります。今後のバージョンアップによっては、仕様が変更なる可能性もございます。

デュオトーンとは

デュオトーン(ダブルトーンよも呼びます)とは、2つの色を組み合わせて表現されたデザインのことで、デザインの手法として多くのWebサイトや広告にも取り入れられています。

一般的にコントラストの強い2色が使用されることが多く、インパクトのあるビジュアルを作成するのに役立ちます。

通常、このような加工にはPhotoshopなどの画像加工ソフトが必要でしたが、WordPress5.8ではエディタから簡単に施すことができます。

デュオトーンフィルターの使い方

デュオトーンフィルターは、画像ブロックカバーブロックで使用できます。

画像ブロックまたはカバーブロックのツールバーの「デュオトーンフィルターを適用」をクリックすると設定パネルが開きます。

デュオトーンフィルター

デフォルトで用意されているデュオトーンパレットを選択するだけで適用できます。

ハイライトの色を変更して、独自の組み合わせを適用することも可能です。

色の組み合わせに悩んでしまう場合は、下記のようにテーマに使用しているカラーを選択すれば、サイトの色合いと違和感なく溶け込むようにできます。

影:テーマカラー1(水色)/ ハイライト:テーマカラー2(白)を設定

カバーブロックで使用する場合

カバーブロックでは、画像だけではなく動画にもデュオトーンフィルターを適用できます。

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フィードや画像検索などでは、フィルターなしの通常の画像が表示されるようです。


画像加工の技術がなくても、このような機能をエディタで簡単に使えるのは嬉しいですね。

デュオトーンフィルターを使えば、何気ない写真でもお洒落に見せることができるので、ビジュアルにこだわるページを作るときに活用できそうです。

NEWモデル

STORK SE

よりコンテンツに集中させるテーマ
STORK SE(ストークSE)

STORK SEはシングルカラム(1カラム)に特化したテーマなので、より訴求力の高いページやブログ記事を作成するのに向いています。

究極のモバイルファーストテーマ
STORK19(ストーク19)

ブログを書くのが楽しくなる仕掛けや機能がたっぷり!STORK19は読む人も書く人も快適なWordPressテーマです。