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 に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。