ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

ワードプレス 画像をデュオトーンにする方法【デュオトーンフィルター】

ワードプレスのversion5.8から、画像ブロックおよびカバーブロックでデュオトーンフォルターが使えるようになりました。

デュアルトーンフィルターをかけることで、画像を簡単にデュオトーンに加工することができます。

本記事でわかること

・デュアルトーンフィルターとは何かを知る
・画像ブロックでデュアルトーンフィルターを使う方法
・デュアルトーンフィルターを適用した画像の出来栄え
・カバーブロックでデュアルトーンフィルターを使う方法

目次

デュオトーンとは

2つの色で画像などを表現する方法をデュオトーン(ダブルトーンとも呼ぶ)と言います。

例えば、spotifyのwebサイトのヘッダーは有名です。

spotifyのヘッダー画像
Spotify.com/jp/より

画像を2色だけで表現すると、ポップでカジュアルな印象を与えることができます。

ワードプレスversion5.8では、画像ブロックやカバーブロックでアップロードした画像をデュオトーン化する”デュオトーンフィルター”が使えるようになりました。

画像ブロックでデュアルトーンフィルターをかける方法

  1. 画像ブロックで画像を配置する
  2. ブロック内ツールバーで”デュオトーンフィルターを適用”をクリック
  3. デュオトーンを選択(または色を自分で設定)する

①画像ブロックに画像を配置

画像ブロックでの画像の挿入方法については、次の記事の”画像を挿入する”を参照ください。


②ツールバー内の”デュオフィルターを適用”をクリック

画像ブロックでデュオトーンフィルターを適用

③好きなデュオトーンを選択

好きなデュオトーンを選択

または、自分でデュオトーンの組み合わせ(影とハイライトの組み合わせ)を決めることもできます。
下記はデュオトーンの影を決める場合。ハイライトの場合も同様です。

影を自分で入力

以上で画像にデュオトーンが適用されます。

選んだデュオトーンと画像の見映えを以下に紹介しますので参考にしてください。

ダークグレースケール

ダークグレースケール

グレースケール

グレースケール

紫と黄色

紫と黄色

青と赤

青と赤

ミッドナイト

ミッドナイト

マゼンタと黄色

マゼンタと黄色

紫と緑

紫と緑

青とオレンジ

青とオレンジ

カバーブロックでデュオトーンフォルターをかける方法

カバーブロックでもデュオトーンフィルターを使う方法は画像ブロックと同じです。

ただし、カバーブロックの場合は、デフォルトでカラーオーバーレイがかかって邪魔なので、オーバーレイの不透明度をゼロにしてからデュオトーンをかけるのがよいでしょう。

①カバーブロックで画像を挿入しテキストをかさねておく

カバーブロックの基本的な使い方は次の記事を参照ください。

画像にテキストを重ねました。
カラーオーバーレイがかかった状態です。

カバーブロックで画像の上にテキストを置いた状態

②オーバーレイの不透明度をゼロとする

オーバーレイの不透明度をゼロとする

③カバーブロックにデュオフィルターを適用

カバーブロックにデュオフィルターを適用

以上で完成です。

カバーブロックにデュオフィルター適用後のweb表示

カバーブロックでデュオフィルター適用後の出来上がり

まとめ

画像ブロックおよびカバーブロックで画像にデュオトーンフィルターを適用する方法としては、

  1. 画像ブロックで画像を配置する
  2. ブロック内ツールバーで”デュオトーンフィルターを適用”をクリック
  3. デュオトーンを選択(または色を自分で設定)する

ただし、カバーブロックについてはデフォルトでカラーオーバーレイがかかっているので、オーバーレイ不透明度をゼロにしておくのがよいでしょう。

このほか、ワードプレスversion5.8で導入された新機能はこちらです。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる