前回は文字の形に画像を切り抜いて表示させましたが、今回はイラストの形にグラデーション画像を切り抜いてみましょう。Divi Builder 上で画像の切り抜きを設置すると、いつでも色を変更できるので便利です。
Divi レッスン 7の2
イラストの形にグラデーション画像を表示する
１．イラストを用意する
切り抜きの型となるイラストを用意しましょう。今回はこのPNG画像を利用することにします。フリーイラストをダウンロードするのも良いでしょう。用意するのは黒に塗りつぶした画像です。
２．行( Row )に画像モジュールを追加する
 | 灰色「＋（モジュールの追加）」をクリックします。 |
 | 「画像」モジュールを追加します。 |
３．型とする画像を変更する
 | 画像モジュールの「コンテンツ」＞「画像」をクリックします。 |
画像をクリックして、メディアライブラリを呼び出します。設定したい画像を選択して、「画像をアップロードする」をクリックします。
 | 画像がアップロードされます。 |
 | 「✔（チェックマーク）」をクリックして確定します。 |
４．行のカラム１の背景にグラデーションを追加する
 | 緑色「⚙（歯車）」の行の設定をクリックします。 |
 | 行の設定の「コンテンツ」タブの「背景」をクリックします。。 |
 | コンテンツのカラム１の背景の「＋（ Add Background Gradient ）」をクリックします。 |
 | 「色を選択」をクリックしてグラデーションとしたい２色を選びます。※後でも変更できます。 |
グラデーションのタイプ、方向、開始位置、終了位置を、画面を見ながら調整します。※もちろん後でもいつでも変更できます。
| 「✔（チェックマーク）」をクリックして確定します。 |
５．画像モジュールの背景を白に設定する
今回は、イラスト画像の部分にだけグラデーションを表示したいので、画像モジュールの背景は全部白にします。
 | 灰色「⚙（歯車）」のモジュールの設定をクリックします。 |
| 画像モジュールの設定で「コンテンツ」タブの「背景」をクリックします。 |
 | 背景の左記の塗りつぶしのアイコンをクリックし、「＋（Add Background Color）」をクリックします。 |
 | カラー選択のパネルが表示されるので「白」をクリックします。 |
| 「✔（チェックマーク）」をクリックして確定します。 |
６．モジュールのデザインの Filters の Blend Mode を「スクリーン」に変更する
 | 画像モジュールの設定で「デザイン」タブの「 Filters 」をクリックします。 |
「 Blend Mode 」を「スクリーン」に変更すると、下記のようにイラスト部分がグラデーションに置き換わります。「✔（チェックマーク）」をクリックして承認します。
これで完成ですが、色の変更を後でしたいと思ったとき用に補足します。
補足．色を変更する
| 緑色「⚙（歯車）」の行の設定をクリックします。 |
| 行の設定の「コンテンツ」タブの「背景」をクリックします。。 |
 | コンテンツのカラム１の背景の画像上をクリックします。 |
| 「色を選択」をクリックしてグラデーションとしたい２色を選びます。※後でも変更できます。 |
グラデーションのタイプ、方向、開始位置、終了位置を、画面を見ながら調整します。
こんな形で色はいつでも自由に変えられます。
今回はイラストの形に切り抜いたグラデーションをサイトに設置する方法でした。また次回もどうぞよろしくお願いします。
ワードプレス Divi レッスン Diviの使い方図解
写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。
