こんにちは、ユキです＾＾
WordPressのページビルダープラグインである「Elementor」でWebサイトを作ってて、
画像の上に文字を置こうとしたけどできなくて諦めたことあるんじゃないかしら。
Elementorでどうやったら画像の上に文字が置けるか分からなくて困ってる、
っていう人が結構多いんだとか。
そこでElementorで画像の上に文字を置く方法について詳しく見ていくわね。
Elementorで画像の上に文字を置く方法
Elementorで画像の上に文字を置くには、
単純に画像の上に見出しやテキストのウィジェットを配置すれば良いのよ。
詳しいやり方は後述するけど、
画像の上に文字を置く方法としてはこれが一番簡単でポピュラーな方法ね。
それ以外にも、発想を逆転させて見出しやテキストなど文字に背景を付けることでも、
画像の上に文字を置くことができるわ。
さらに「マージン」の数値を変えることで、
見出しやテキストなどの文字を動かして画像の上に持って行くといった方法もあるのよ。
また、ちょっと変則的な方法として、画像編集ソフトを使って画像の上に文字を置いた
ものを1枚の画像として保存、それをElementorでウィジェットとして貼り付けるといった
やり方もあるのよね。
画像の上に見出しやテキストのウィジェットを配置する
まずは、Elementorで画像を上に置く方法で一番ポピュラーで一番簡単なものについて
詳しく説明していくわね。
Elementorの編集画面を開いて、
「ウィジェットをここにドラッグ」の「＋」アイコンをクリックしてセクションを追加するの。
Webサイト全体の背景として画像を配置する場合は、
配置したセクション上部にあるタブの6つ点が並んでるアイコンをクリック。
「セクションの編集」で「スタイル」を選択、「背景タイプ」を「クラシック」にして、
最後に画像を選択すれば、Webサイト全体の背景が選択した画像になるのよ。
見出しなどWebサイトの一部分として画像を配置するなら、
「セクションの編集」で「レイアウト」を選択、「高さ」を「最小の高さ」にして
好きなセクションの大きさに変更するの。
あとは背景に画像を配置する場合と同じで、「セクションの編集」で「スタイル」を選び、
「背景タイプ」を「クラシック」にして画像を選択すればOK。
次は配置された画像の上に文字を置くんだけど、
画面左側上部にある9つ点が並んだアイコンをクリックしてウィジェット一覧に戻るのね。
ウィジェット一覧の「見出し」もしくは「テキストエディター」をドラッグして画像の上まで
持って行きドロップ、文字を入力すれば画像の上に文字を置くことができるわ。
Webサイト全体の背景として配置した画像の上に文字を置く場合は、
あとで説明する方法よりもこっちの方法を使うのが簡単ね。
画像の上にボタンを置くこともできる
色んなWebサイトを見てると、画像の上に「お申し込みはこちら」みたいなボタンが
配置されてることってあるじゃない。
先の画像の上に文字を置く方法を応用すれば、
画像の上にボタンを置くことも簡単にできちゃうわ。
背景や見出しなどWebサイトの一部分として画像を配置したら、
ウィジェット一覧で「ボタン」をドラッグして画像の上に持って行ってドロップ。
「ボタンを編集」の「リンク」にURLやアンカーを入力しておけば、配置したボタンを
クリックすることで指定のページや位置にジャンプできるようになるのよ。
文字に背景を付ける
画像の上に文字を置くんじゃなくて、
逆に文字に背景を付ければ画像の上に文字を置くのと同じ効果になるのね。
まずElementorの編集画面で「ウィジェットをここにドラッグ」の「＋」アイコンを
クリックしてセクションを追加。
追加したセクションに「見出し」や「テキストエディター」のウィジェットを配置して、
文字を入力する。
次に画面左で「高度な設定」→「背景」と進んで、
「画像」のところに文字の背景にしたい画像を貼り付ける。
これで文字の背景として画像が設定されて、
画像の上に文字を置枯れた状態になる・・・と言いたいところだけど、
このままだと文字の大きさ分だけしか背景の画像が表示されないわ。
ちゃんと画像の中に文字が入ってる状態にするには、
入力した文字の上下にスペースを作ってあげないといけないのよ。
画面左の「高度な設定」からさらに「高度な設定」を選択して、「パディング」という項目の
「上」と「下」に数値を入力すると文字の背景として配置した画像が大きく表示されるの。
見出しなどWebサイトの一部として配置した画像の上に文字を置くなら、
先の方法よりもこっちの方法がおすすめよ。
文字を動かして画像の上に持って行く
「マージン」という項目の数値を変えれば、
文字を動かして画像の上に持って行くことができるのよ。
マージンっていうのは簡単に言うと空白とか隙間のことで、
文字の上下に空白や隙間を入れることで文字を動かすってこと。
例えば、Wordで入力した文字を改行すると、
文字の上に空白ができて文字が下に動いていくわよね。
これと同じようなことElementorで行って、
画像の上に文字を動かして持って行こうってわけ。
まずElementorの編集画面にセクションを追加して、
そのセクションに画像ウィジェットをドラッグして好きな画像を配置するの。
次に見出しもしくはテキストエディターのウィジェットを、
先に配置した画像の上部に配置して文字を入力するのよ。
そして画面左で「高度な設定」を選択して、
「Z-index」の項目に1000などの大きな数値を入力するわ。
Z-indexはレイヤーの優先順位を決めるもので、数値が大きい方が上に表示されるから、
画像の上に文字を置く場合は見出しやテキストのZ-indexの数値を大きくするの。
次に画像のウィジェットを選択して、画面左で高度な設定を選び、
「マージン」の項目でリンクを解除して「上」にマイナスの数値を入れる。
ただしキーボードでマイナスの数値を入力しても正数になっちゃうから、
「上」の欄にカーソルを置いてキーボードの下ボタンで数値を減らしていってね。
適当な数値を入力するよりも下ボタンで数値を減らしていった方が、
文字を置く位置が決めやすいってこともあるわよ。
見出し・テキストや画像のウィジェットを選択して、「コンテンツ」の「配置」で右寄せ・
中央・左寄せを選ぶことで大まかな位置の調整もできるわ。
画像編集ソフトで画像の上に文字を置く
先の2つはElementorで画像の上に文字を置く方法だったけど、
最後は画像編集ソフトで画像の上に文字を置いたものをElementorで使う方法よ。
画像編集ソフトって言うと大げさだけど、
Windowsに標準装備されてる「ペイント」を使えば良いだけなの。
ペイントで画像の上に見出しや説明文となる文字を書き込んで、
それを画像として保存しておくのね。
そして保存した画像をElementorの編集画面に反映させれば、
Elementorで編集しなくても画像の上に文字を置くことができるってわけ。
ただ、Elementorでできる編集をわざわざペイントを使って行い、
それをElementorに反映させるという何とも回りくどいやり方だわ。
だからおすすめはしないけど、Elementorよりペイントを使い慣れてるっていうんだったら
やってみても良いかもしれないわね。
画像編集ソフトの利用には意外なメリットも
ペイントなどの画像編集ソフトを使って画像の上に文字を置いた画像を作るのは
回りくどい方法なんだけど、意外なメリットもあるの。
実はElementorでは、無料版・有料版に関わらず、
日本語のフォントが1種類しか使えないのよ。
だからElementorで画像の上に文字を置こうとすると、
決まったフォントの文字しか置くことができないわ。
画像とフォントのイメージが合わないと、
Webサイトの全体的なバランスが何となく変になっちゃうのよねぇ。
ところがペイントなどの画像編集ソフトでは複数の日本語フォントが使えるから、
画像のイメージに合ったフォントの文字を上に置くことができるの。
ペイントなどの画像編集ソフトを使うのは回りくどい方法ではあるんだけど、
文字のフォントが変更できるという小さくないメリットも生まれるのよ。
画像の上に置いた文字の位置を調節する
Elementorで画像の上に文字が置けたのは良いけど、
文字の位置を上下左右に動かしたいってこともあるかもしれないわ。
「Positioning」という機能を使えば、
配置した画像や文字の位置を動かすことができるのよ。
画像を動かしたいなら配置した画像ウィジェット、
文字を動かしたいなら配置した見出し・テキストのウィジェットを選択。
画面左で「詳細」→「Positioning」に進んで、「位置」の項目を「絶対」にしておくの。
そうすると編集画面の画像や文字にポインタを合わせると、
ポインタが手のアイコンに変わりウィジェットをドラッグできるようになるわ。
あとは画像や文字をドラッグして好きな位置に動かしてドロップすれば、
画像の上に置いた文字の位置を調整することができるのね。
マージンやパディングの数値を変える方法もあるが・・・
画像の上に置いた文字の位置を動かすには、Positioningの機能を使う以外にも、
マージンやパディングの数値を変更する方法もあるわ。
ちなみにマージンはセクションやウィジェットの外側の空白部分のことで、
パディングはセクションやウィジェットの内側の空白部分のことなの。
かなり分かりにくいけど、例えば文字の位置を動かすのにセクションのマージンの
数値を変えると、文字を配置したセクションごと動くことになるのよ。
でもセクションのパディングの数値を変えると、セクションの位置はそのままで、
セクション内でウィジェットの位置を動かすことができるのね。
（これでも分かりにくい・・・）
実際に使ってみると文字で説明するほど面倒じゃないんだけど、
数値を変えて位置を動かすより文字そのものをドラッグして動かす方が簡単じゃない？
だからElementorの使い方に慣れてきたら、マージンやパディングの数値を変えて
セクションやウィジェットの位置を動かしてみると良いわ。
でも慣れない内は、
Positioningの機能でドラッグ&ドロップで位置を動かす方が使いやすいわね。
画像の上に置いた文字を読みやすくするには
画像の上に置いた文字が読みにくい場合には、
・背景オーバーレイ
・CSSフィルタ
・ボタンモード
なんかを使うことで読みやすくすることができるのよ。
背景として使う画像によっては、
文字をどこに配置しても背景の色と文字色が同化して読みにくいってことがあるわ。
だからと言って読みやすさにこだわった文字色にすると、文字が悪目立ちして、
ページ全体のイメージを壊しちゃうこともあったりするの。
そこで背景オーバーレイなどを使って、
背景の画像の色と同化することなく文字を読みやすくすることができるのよ。
背景オーバーレイの設定
画像の上に置いた文字を読みやすくする背景オーバーレイを設定するには、
まず背景の画像ウィジェットを配置してるセクションを選択するの。
セクション上部のタブにある6つの点のアイコンをクリックして「セクションを編集」を開き、
「スタイル」→「オーバーレイ」に進むのよ。
「背景タイプ」を「クラシック」にして、「色」で背景の画像に乗せる薄紙の色を決めてね。
オーバーレイの色は「色」をクリックすることで現れるカラーピッカーで選ぶんだけど、
黒とか赤といった原色だけじゃなくて中間色も選べるわ。
最後に「不透明度」で背景の画像がどの程度透けて見えるかを調整すれば、
オーバーレイが設定されて背景画像の上に置いた文字が読みやすくなるの。
ちなみに不透明度は0から1の間を0.01刻みで調整するんだけど、
0に近いほどオーバーレイの色が強くなって背景の画像が見えにくくなるのね。
反対に、1に近いほどオーバーレイの色が薄くなって背景の画像が
ハッキリ見えるようになるのよ。
不透明度を0にすると背景の画像を設定した意味が無くなるし、
1にするとオーバーレイを設定した意味が無くなっちゃうわ。
だから背景の画像が見えつつも文字が読みやすくなるように、
不透明度は0.2～0.3の間ぐらいで調整するのが良いんじゃないかしら。
背景オーバーレイを使えば2枚の画像を合成することも可能
余談だけど、
Elementorで背景オーバーレイの機能を使うと2枚の画像を合成することも可能なのよ。
まずElementorの編集画面にセクションを追加して、
セクションに画像ウィジェットを配置、背景となる画像を貼り付けるの。
そして画像ウィジェットを配置してるセクションを選択して、
上部タブの6点アイコンをクリックして、「セクションを編集」を開くのね。
「スタイル」から「背景オーバレイ」を選んで、
「画像」の項目に背景に設定した画像とは別の画像を貼り付けるのよ。
あとは「不透明度」を調整することで、
背景の画像にうっすら2枚の目の画像が重なるように合成することができるわ。
2枚の画像を重ねるように合成するのって、
通常は「Photoshop」など有料のソフトウェアやアプリを使わないと
できなかったりするんだけど、Elementorなら無料でできるの。
CSSフィルタの設定
CSSフィルタを使って画像の上に置いた文字を読みやすくするには、背景となる画像を
設定して「セクションを編集」を開くところまでは先の背景オーバーレイの時と同じよ。
「セクションを編集」を開き、「スタイル」から「CSSフィルタ」を選ぶと
・ぼかし
・明るさ
・コントラスト
・彩度
・Hue（色相）
の数値が変更できるわ。
あとはそれぞれの数値を色々と変更して、背景の画像を残しつつ、
画像の上に置いた文字を読みやすくなるように調整すればOK。
少し明るさを抑えたり、色相を変えたりすることで、
画像の色と文字色が同化せずに文字が読みやすくなるのね。
画像の上に置いた文字を読みやすくするだけだったら、
ぼかしやコントラストの数値は変える必要は無いと思うわ。
ボタンモードの設定
次に「ボタンモード」なんだけど、これも「セクションを編集」を開くところまでは
背景オーバーレイとCSSフィルタと同じ。
「セクションを編集」を開いたら、「スタイル」から「ボタンモード」を選び
・Multiply
・Screen
・Overlay
・Darken
・Lighten
・Color Dodge
・Saturation
・Color
・Difference
・Exclusion
・Hue
・Luminosity
の13項目を選択して画像の色・明るさ・色相なんかを変更するのよ。
簡単に言うと、CSSフィルタで数値を色々と変更する作業をボタン1つでできるのが
ボタンモードといった感じだわ。
画像の上に置いた文字を読みやすくするためだったら、
・Screen
・Overlay
・Lighten
ぐらいが適してるんじゃないかしら。
それぞれの違いを文字で説明するのは難しいから、実際にボタンモードを使って、
13項目の違いを自分の目で確かめてみてね。
ちなみに日本語版のElementorでボタンモードになってる機能、
実は英語版のElementorだと「Blend Mode」になってるのよ。
実際にボタンモードは2つの要素をどう重ねるかを決めるためのモードだから、
ボタンじゃなくて「混ぜ合わせる」という意味があるブレンドが正しいわ。
（要するに日本語版の翻訳ミス）
画像の上に置く文字のフォントを変えるには
Elementorで画像の上に文字を置けるんだから、
どうせなら文字のフォントを画像に合ったものに変更したいわよね。
Elementorで使える日本語フォントは1つなんだけど、
実は使えるフォントを増やすことができるのよ。
日本語フォントを増やすには
・カスタムフォント機能
・フォントが追加できるプラグイン
のいずれかを使うわ。
ただし「カスタムフォント機能」が使えるのは有料版のElementorProだけで、
無料版のElementorだとカスタムフォント機能は使えないの。
またフォントを追加できるプラグインでは、WordPressで使える日本語フォントを
増やせるけど、Elementor自体で使える日本語フォントは増やせないから注意してね。
カスタムフォント機能を使って日本語のフォントを増やす
ElementorProのカスタムフォント機能を使う方法だけど、まず「Googleフォント」など
日本語のフォントを提供してるサイトでフォントファイルをダウンロードするのよ。
ダウンロードしたフォントファイルを解凍して、
フォルダの中に拡張子が「.ttf」「.woff」「.woff2」のファイルがあるか確認。
もしこれらの拡張子のファイルがない場合は、ファイルの拡張子が変更できる
サイトなんかを利用してファイルの拡張子を変更しておいてね。
次にElementorProのダッシュボードで「CustomFonts」を選択して、
画面右側の「Add New」をクリック。
「Add New Font」の入力欄に任意のフォント名を入力して「ADD FONT VARIATION」を
押すと、利用できるフォントファイルの一覧が表示されるわ。
一覧から拡張子が「.ttf」「.woff」「.woff2」のファイルを選んで「UPLOAD」をクリック、
最後に画面右上の「公開」をクリックすればOK。
これでダウンロードした日本語フォントがElementorProで使えるようになるのよ。
同じ手順を繰り返せば、
1種類だけじゃなくて2種類以上の日本語フォントを追加することもできるわ。
日本語フォントが追加できるプラグインを使う
有料版のElementorProではカスタムフォント機能を使って日本語フォントが増やせる
けど、無料版のElementorではフォントが追加できるプラグインを使うしかないわ。
Elementorをインストールした時と同じように、
WordPressの管理画面で「プラグイン」→「新規追加」へ進み
・Japanese font for WordPress
・Google Fonts Typography
といった日本語フォントが追加できるプラグインを検索するのよ。
そしてヒットしたプラグインの「今すぐインストール」をクリック、
インストールが完了したら「有効化」をクリックして準備は完了。
これで、Elementorで使える日本語フォントは増えないものの、
WordPressで使える日本語フォントが増えたわ。
だからElementorでWebサイトを作り上げて、最後にWordPressの編集画面で
Webサイト内の文字のフォントだけ変更すれば良いのよ。
ちょっと面倒だけど、無料版のElementorで日本語フォントを増やしたいなら
この方法を使うしかないのよねぇ・・・。
フォントが追加できるプラグインを提供しているレンタルサーバーもある
WordPressで作ったWebサイトを公開するのにレンタルサーバーを利用するけど、
レンタルサーバーの中にはWordPressで使える日本語フォントを増やせるプラグインを
提供してるところもあるのよ。
日本語のフォントが追加できるプラグインを提供してるレンタルサーバーは
・エックスサーバー
・さくらのレンタルサーバー
・お名前.comレンタルサーバー
の3つで、いずれも「モリサワフォント」という日本語フォントが使えるようになるわ。
もちろんそれぞれのレンタルサーバーのユーザーのみが利用できるプラグインだから、
これからElementorを使おうと考えてるなら先の3つからレンタルサーバーを選ぶのが
おすすめね。
導入方法と使い方は先の「Japanese font for WordPress」と全く同じで、
あくまでWordPressで使える日本語フォントを増やせるプラグインだから注意するのよ。
まとめ
Elementorで画像の上に文字を置く方法について詳しく説明したわ。
いくつか方法を紹介したけど、基本的には画像ウィジェットの上に見出しやテキストの
ウィジェットをドラッグ&ドロップで配置するだけで良いのね。
単に画像の上に文字を置くだけじゃなくて、
背景オーバーレイなどを使って文字を読みやすくしましょう。
また使える日本語フォントを増やして、画像と文字のフォントを合わせてあげると、
Webサイトの質が1段も2段もアップするに違いないわよ。
