Webサイトで写真を文字の形に切り抜いて表示させたい場合、通常は Photoshop などで画像を文字型のパスで切り抜き加工し取り込むと思います。でもその方法だと、ちょっと文言を変えたいと思ったら再度、加工からやり直しになりますよね。でも、Divi Builder だとその場で文字列を変えるだけで、すぐにその文字型に写真を切り取った様に表示できるんです。今回はその方法を解説します。

ワードプレス Diviの使い方7
写真を文字の形に切り抜く方法

1.写真を「行( Row )」のカラムの背景に設定する

行( Row )の設定の編集には、

緑色「⚙(歯車)」をクリックします。
行設定の「コンテンツ」タブの「背景」をクリックします。

カラム1の背景に画像を設定したいので、 カラム1の背景までスクロールして、

背景画像のタブをクリックし、「+( Add Background Image )」をクリックします。

メディアライブラリが表示されるので、文字の形に切り抜きたい画像を選択し、「画像をアップロードする」をクリックします。

カラム1の背景に画像が設定されます。「✔(チェックマーク)」をクリックして承認します。

2.「行( Row )」にテキストモジュールを追加する

続いて、背景画像を設定した行( Row )のカラムに、テキストモジュールを追加します。灰色の「+(新たなモジュールを追加)」をクリックします。

「テキストモジュール」をクリックして新規追加します。

3.テキストを編集する

テキストモジュールが追加されるので、「コンテンツ」タブの「テキスト」で文字列を編集します。

今回は大きく「❤❤Gallery❤❤」と書き込むことにします。

4.テキストのデザイン設定を変更する

「デザイン」タブの「テキスト」をクリックします。
「黒」●をクリックして、テキストカラーを黒にします。
文字が大きい方がわかりやすいので、文字サイズを 120px に変更します。
行の高さは1行(1em)にする。
文字が太い方がわかりやすいので、Font Weight を Bold にします。

5.テキストモジュールの背景を白にする

テキストモジュールの「コンテンツ」タブの「背景」をクリックします。
背景の塗りつぶしで「+( Add Background Color )」をクリックします。
白丸をクリックして白を選択します。

6.テキストモジュールの Filters の Blend Mode をスクリーンに変更する

テキストモジュールの「デザイン」タブを開き、

Filters をクリックし開きます。
Blend Mode を「スクリーン」に変更します。
「✔(チェックマーク)」をクリックして承認します。

テキストの形に画像が切り抜かれました。

テキストの文字を変更すると瞬時に切り抜きの画像も変化します。

7.サイズや余白を調整する

もし、文字がかけていたり、背景が欠けているようであれば、

行の「サイズ」、あるいは、テキストモジュールの「サイズ」を調整します。

他の行とかぶっている場合は、「余白」を調整しましょう。

8.枠線を追加する

枠線を追加して、さらに画像の見えている範囲を増やしてみましょう。

テキストモジュールの「デザイン」タブの「境界」をクリックします。
「ボーダー幅」を 20px にしてみましょう。

枠線は入ったのですが、文字列が折り返してしまいました。

9.テキストの間隔を再調整する

テキストモジュールの「デザイン」>「文字間隔」を調整します。バーは一番左で0を指示していますが実は、マイナスも設定できます。

 0px の下矢印をクリックしてマイナスの値を設定しましょう。

マイナスを設定すると文字の間隔が狭まります。

文字間が狭くなり1行の範囲に収まるようになりました。

これで完成でも良いのですが、さらに見栄えをよくするために少し調整します。

10.さらに見栄えをよくするのに「 Shadow 」を使う

白抜きとしているところにもうっすらと後ろの画像を表示させ、さらに見栄えをよくしましょう。「 Text Shadow 」と「 Box Shadow 」を利用すると便利です。

1)Text Shadow を追加する

テキストモジュールの「デザイン」タブの「 Text Shadow 」の左記アイコンをクリックします。

2)Box Shadow を追加する

テキストモジュールの「デザイン」タブの「 Box Shadow 」の左記アイコンをクリックします。

内部の領域がうっすらと透けて見えるように理ました。

今回はこれで完成としましょう。

あるいは、テキストモジュールの上下のボーダー幅をもう少し増やして、こんな感じでも良いかもしれません。

あるいは、やっぱり文字はハートだなって思ったとしたら、テキストモジュールの「コンテンツ」のテキストを編集するだけですぐに反映されます。

Divi では、こういった変更をその場で目で見ながら確認しながら行えます。しかも元の画像データを編集しているわけではないので、こういった編集を繰り返しても画質の劣化もありません。本当に便利です。皆さんもぜひいろいろ試してみて楽しんでください。

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

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

Divi-lesson9-logo

Divi レッスン9 テーマのオプションのおすすめ設定

Divi でサイトを作成したら、ぜひオプション設定も変更しましょう。Divi...
divi-lesson5-3-youtube-logo01

DiviでYouTubeを表示する Diviの使い方5の3

Divi は YouTube 動画も簡単にサイトに設置できるように作られています。今回はその設置方法を図解したいと思います。Diviの使い方5の3 Divi で YouTube を表示する...

Diviの使い方10 モジュールの利用1 画像 と 広告

今回は Divi の各種モジュールのうちから、画像モジュールと広告モジュールについて図解したいと思います。画像モジュールと広告モジュール Diviの使い方10-1...

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

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

ワードプレス Diviの使い方4 背景設定と新機能 Dividers

Divi は Web ページの背景を編集過程をリアルタイムに確認しながら編集することができます。背景の設定はセクション、行、モジュールのそれぞれで設定できます。さらに、セクションの背景では新たに「...

Diviの使い方10-2 ギャラリーモジュールの利用方法

今回は Divi の各種モジュールのうちから、ギャラリーモジュールについて図解したいと思います。 Diviの使い方10-2 ギャラリーモジュールの利用方法...

Pin It on Pinterest