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-lesson8-3-logo

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

今回はサイトの色を変える方法を解説します。Divi では複数の方法で色を変えることができます。Divi の使い方8 外観のカスタマイズ3 色を変える方法...
divi-tips-before-after-images-logo

Diviチップス Before + After Images のインストール

ワードプレス(WordPress)で作成している Web サイトで、写真や画像の分割比較表示をしたくなった場合に、便利なプラグインとして「TwentyTwenty」があります。...
divi-tips-sns-monarch-logo

ワードプレス Divi MONARCH インストールと設定

Divi を開発している Elegant Themes にはSNSとの連携をより容易にすることができるプラグイン MONARCH もあります。Divi を購入していると...
divi-lesson5-3-youtube-logo01

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

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

Diviのモジュールの使い方6 アクションの呼び出しとボタン

今回は Diviの各種モジュールのうちから「アクションの呼び出し」と「ボタンモジュール」の使い方について、Divi初心者向けに図解したいと思います。Diviの使い方10...

Pin It on Pinterest