ワードプレス 画像をデュオトーンにする方法【デュオトーンフィルター】
ワードプレスのversion5.8から、画像ブロックおよびカバーブロックでデュオトーンフォルターが使えるようになりました。
デュアルトーンフィルターをかけることで、画像を簡単にデュオトーンに加工することができます。
・デュアルトーンフィルターとは何かを知る
・画像ブロックでデュアルトーンフィルターを使う方法
・デュアルトーンフィルターを適用した画像の出来栄え
・カバーブロックでデュアルトーンフィルターを使う方法
デュオトーンとは
2つの色で画像などを表現する方法をデュオトーン（ダブルトーンとも呼ぶ）と言います。
例えば、spotifyのwebサイトのヘッダーは有名です。
画像を2色だけで表現すると、ポップでカジュアルな印象を与えることができます。
ワードプレスversion5.8では、画像ブロックやカバーブロックでアップロードした画像をデュオトーン化する”デュオトーンフィルター”が使えるようになりました。
画像ブロックでデュアルトーンフィルターをかける方法
- 画像ブロックで画像を配置する
- ブロック内ツールバーで”デュオトーンフィルターを適用”をクリック
- デュオトーンを選択（または色を自分で設定）する
①画像ブロックに画像を配置
画像ブロックでの画像の挿入方法については、次の記事の”画像を挿入する”を参照ください。
https://web-children.com/2019/08/26/posting-by-gutenbergbloc...
②ツールバー内の”デュオフィルターを適用”をクリック
③好きなデュオトーンを選択
または、自分でデュオトーンの組み合わせ（影とハイライトの組み合わせ）を決めることもできます。
下記はデュオトーンの影を決める場合。ハイライトの場合も同様です。
以上で画像にデュオトーンが適用されます。
選んだデュオトーンと画像の見映えを以下に紹介しますので参考にしてください。
ダークグレースケール
グレースケール
紫と黄色
青と赤
ミッドナイト
マゼンタと黄色
紫と緑
青とオレンジ
カバーブロックでデュオトーンフォルターをかける方法
カバーブロックでもデュオトーンフィルターを使う方法は画像ブロックと同じです。
ただし、カバーブロックの場合は、デフォルトでカラーオーバーレイがかかって邪魔なので、オーバーレイの不透明度をゼロにしてからデュオトーンをかけるのがよいでしょう。
①カバーブロックで画像を挿入しテキストをかさねておく
カバーブロックの基本的な使い方は次の記事を参照ください。
画像にテキストを重ねました。
カラーオーバーレイがかかった状態です。
②オーバーレイの不透明度をゼロとする
③カバーブロックにデュオフィルターを適用
以上で完成です。
カバーブロックにデュオフィルター適用後のweb表示
まとめ
画像ブロックおよびカバーブロックで画像にデュオトーンフィルターを適用する方法としては、
- 画像ブロックで画像を配置する
- ブロック内ツールバーで”デュオトーンフィルターを適用”をクリック
- デュオトーンを選択（または色を自分で設定）する
ただし、カバーブロックについてはデフォルトでカラーオーバーレイがかかっているので、オーバーレイ不透明度をゼロにしておくのがよいでしょう。
このほか、ワードプレスversion5.8で導入された新機能はこちらです。
