前回は文字の形に画像を切り抜いて表示させましたが、今回はイラストの形にグラデーション画像を切り抜いてみましょう。Divi Builder 上で画像の切り抜きを設置すると、いつでも色を変更できるので便利です。

Divi レッスン 7の2
イラストの形にグラデーション画像を表示する

1.イラストを用意する

切り抜きの型となるイラストを用意しましょう。今回はこのPNG画像を利用することにします。フリーイラストをダウンロードするのも良いでしょう。用意するのは黒に塗りつぶした画像です。

2.行( Row )に画像モジュールを追加する

灰色「+(モジュールの追加)」をクリックします。
「画像」モジュールを追加します。

3.型とする画像を変更する

画像モジュールの「コンテンツ」>「画像」をクリックします。

画像をクリックして、メディアライブラリを呼び出します。設定したい画像を選択して、「画像をアップロードする」をクリックします。

画像がアップロードされます。
「✔(チェックマーク)」をクリックして確定します。

4.行のカラム1の背景にグラデーションを追加する

緑色「⚙(歯車)」の行の設定をクリックします。
行の設定の「コンテンツ」タブの「背景」をクリックします。。
コンテンツのカラム1の背景の「+( Add Background Gradient )」をクリックします。
「色を選択」をクリックしてグラデーションとしたい2色を選びます。※後でも変更できます。

グラデーションのタイプ、方向、開始位置、終了位置を、画面を見ながら調整します。※もちろん後でもいつでも変更できます。

「✔(チェックマーク)」をクリックして確定します。

5.画像モジュールの背景を白に設定する

今回は、イラスト画像の部分にだけグラデーションを表示したいので、画像モジュールの背景は全部白にします。

灰色「⚙(歯車)」のモジュールの設定をクリックします。
画像モジュールの設定で「コンテンツ」タブの「背景」をクリックします。
背景の左記の塗りつぶしのアイコンをクリックし、「+(Add Background Color)」をクリックします。
カラー選択のパネルが表示されるので「白」をクリックします。
「✔(チェックマーク)」をクリックして確定します。

6.モジュールのデザインの Filters の Blend Mode を「スクリーン」に変更する

画像モジュールの設定で「デザイン」タブの「 Filters 」をクリックします。

「 Blend Mode 」を「スクリーン」に変更すると、下記のようにイラスト部分がグラデーションに置き換わります。「✔(チェックマーク)」をクリックして承認します。

これで完成ですが、色の変更を後でしたいと思ったとき用に補足します。

補足.色を変更する

緑色「⚙(歯車)」の行の設定をクリックします。
行の設定の「コンテンツ」タブの「背景」をクリックします。。
コンテンツのカラム1の背景の画像上をクリックします。
「色を選択」をクリックしてグラデーションとしたい2色を選びます。※後でも変更できます。

グラデーションのタイプ、方向、開始位置、終了位置を、画面を見ながら調整します。

こんな形で色はいつでも自由に変えられます。

今回はイラストの形に切り抜いたグラデーションをサイトに設置する方法でした。また次回もどうぞよろしくお願いします。

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

divi-lesson3-3-logo

ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成3

今回は Divi のレイアウトライブラリを使ったサイト( Webページ...

Diviの使い方10-5 お問い合わせフォームモジュールの利用方法

今回は Divi の各種モジュールのうちから、お問い合わせフォームモジュール(Contact Form)について図解したいと思います。 Diviの使い方10-5...
divi-lesson3-2-logo

ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成2

今回は Divi を使ったサイト( Webページ )作成練習の続きとして、サイトに写真ギャラリーと、自己紹介と、連絡先情報のページを追加で作成します。ワードプレス Divi の使い方3...
divi-lesson8-3-logo

ワードプレス Diviの使い方8 外観のカスタマイズ3 色を変える方法

今回はサイトの色を変える方法を解説します。Divi では複数の方法で色を変えることができます。Divi の使い方8 外観のカスタマイズ3 色を変える方法 4.カラースキームでサイト全体の色を変える...
divi-reference2-logo

ワードプレス Divi リファレンス2 テーマのオプションの設定方法

Divi では専用のオプションメニューを利用して様々な設定を行えるようになっています。今回はその「テーマのオプション」の設定方法について図解します。Diviの使い方9...

Pin It on Pinterest