Elementorで画像の上に文字を乗せたいけど、どうやるの？
画像ウィジェットを使ってもうまくいかない…。いい感じに文字を乗せる方法を教えて下さい
本記事ではこんな疑問にお答えします。
サイトを作る際には、メインビジュアルに文字と画像の組み合わせのデザインをよく作ると思いますが、Elementorにはそうした素材が用意されていません。
なので自分で作る必要があります。
といっても作業手順はめちゃくちゃ簡単。2分でできます。
この記事を書いているぼくは、現役のWebエンジニア。
Elementor使用歴は2年くらいで、これまでお客さんのサイトをElementorで制作してきました。
わかりやすく解説できると思うので、ぜひ参考にどうぞ。
- Elementorで画像の上に文字を乗せる方法がわかる
- Elementorでサイトのメインビジュアルの作り方がわかる
- 画像の上に文字を乗せたあと、いい感じのデザインにする方法がわかる
目次
Elementorで画像の上に文字を乗せる方法
さっそく手順の解説です。ざっと解説すると以下の通り。
- セクションの編集画面で背景に画像を追加する
- 高さを調整し、画像を表示
- 見出しウィジェットやテキストエディターを挿入する
詳しく解説します。
STEP1：セクションの編集画面で背景に画像を設定する
まずは、Elementorの編集画面でセクションを追加し、スタイルタブをクリックしましょう。
クリックしたら、「背景」という項目をクリックしましょう。
すると画像のような設定画面が表示されるので、左のアイコンをクリックします。
プラスボタンにカーソルを持っていき、クリックすると画像の選択画面に移ります。
これで好きな画像を設定すればOKです。
STEP2：セクションの高さを指定しよう
画像は表示されましたが、これだと高さがないので画像が見えません。なので高さを指定してあげます。
作業手順
図上のように、セクションの編集画面で左の設定タブをクリック。
レイアウト項目の「高さ」を最小の高さに選択しましょう。
選択したら、高さの指定ができるようになります。適当に450px〜600pxくらいで設定しましょう。
これで表示されました。
ただ、背景が繰り返しで表示されていたり、思うような位置になっていないので、微調整してやります。
STEP3：背景画像の位置やサイズを調整する
さきほどのセクション編集画面に戻り、画像追加した下の項目を見てください。
「位置」「添付」「繰り返し」「サイズ」がデフォルトになっていると思うので、これを下記のような設定に変えます。
「何をやっているの？」と思われるかもなので、それぞれ説明します。
- 位置 ⇨ 画像の表示位置のこと。中央には画像のどこの部分を表示しますか？って意味。今回はど真ん中に設定
- 添付 ⇨ 画像の表示方法の設定。基本的にはデフォルトでOK。長いので説明省略
- 繰り返し ⇨ 画像を繰り返して表示するかの設定。画像サイズが小さいと、セクション領域に収まるまで繰り返し表示される。基本は「なし」でOK
- サイズ ⇨ 表示サイズの設定。カバーだとセクション領域いっぱいに広がってくれる。メインビジュアルなどの場合はカバーを設定することが多い
STEP4：見出しウィジェットやテキストエディターを挿入する
あとはウィジェット編集画面から、見出しかテキストエディターをドラッグ＆ドロップすればOKです。
これで画像の上に文字を乗せることができました。
応用編：文字がはっきり見えるようにしよう
画像の上に文字を乗せることはできましたが、このままだと文字の色と画像の色がかぶってしまいよく見えませんね。
画像に加工をしてから挿入する、という手もありますが二度手間です。
そういうときには、「背景オーバーレイ」を使用しましょう。
オーバーレイを訳すと「覆う」。つまり、意味そのままに背景画像の上に覆いをかけることです。
そのまま重ねると何も見えなくなってしまうので、不透明度を設定することができます。
今回は文字を見やすくするべく、暗めの色を重ねようとしています。
背景オーバーレイを設定してみよう
同じくセクションの編集画面から、背景項目下の「背景オーバーレイ」を開きます。
上記のような画面が出てくるので、重ねる色を設定しましょう。今回は文字が白なので黒っぽい色を選択。
するとこんな感じで、文字の視認性が高まりました。
その下の「不透明度」を高めると、色を濃くしたり薄くしたりできます。
応用編2：画像をスライドショーで表示させてみよう
メインビジュアルで多くの情報を表示させたいときには、スライドショーが役に立ちます。
背景画像においても設定が可能ですので、アレンジにぜひ。やり方を解説します。
さきほどと同じ「背景」項目を選択して、「背景タイプ」一番右のスライドショーをクリックします。
あとは先程のやり方で好きな画像を選択して表示させましょう。
簡単ですね。
応用編3：文字の位置を調整しよう
次に文字の位置を調整する方法を説明します。
テキストの配置位置で調整する（ざっくりでいい人向け）
左や右、ちょっと上に寄せたいだけならこちらの方法で調整がおすすめ。
作業手順
こういう感じにしたい場合。
セクションの設定画面で、コンテンツの幅をお好みの広さに設定します。
「コンテンツの幅ってなに？」の方は下の図を参照。
コンテンツの幅とは、要はセクションの全体幅と思ってもらえればわかりやすいです。
セクションの中のカラムはどれくらいの幅で表示させますか？という意味ですね。
設定したら、見出しウィジェット（テキストエディター）の配置を右、左に選択するだけ。
単純な形ならこれでOKです。
あとはマージンを調整して、少し上にずらしたり下にずらしたりするとよいでしょう。
上にずらしたいなら、見出しウィジェットまたはカラムのマージン下の値を増やします。
下にずらしたいなら、見出しウィジェットまたはカラムのマージン上の値を増やします。
文字を絶対要素にして移動させる（細かく調整したい人向け）
細かい微調整を行うなら、「絶対配置」にすることをおすすめします。
「絶対配置」とは、親要素のセクションを相対値として、配置方法を自由自在に設定できる方法です。
作業手順
文字ウィジェットの編集画面を開き、「高度な設定」タブを選択。
「配置」の項目を開き、
- 「幅」をインライン（AUTO）
- 「位置」を絶対
上記のように指定します。
そうすると、水平方向やオフセットなどの設定項目が現れます。あとは好きな指定をしてあげると、上下左右に動かすことができます。
もしくは、要素をドラッグ＆ドロップで移動させることも可能です。
- 水平方向 ⇨ 左右の位置を調整する
- 垂直方向 ⇨ 上下の位置を調整する
値の指定は、なるべく%（パーセンテージ）で指定しましょう。
px単位でしてしまうと、レスポンシブ表示の際に崩れる原因となります。パーセンテージ指定なら、画面幅に応じて臨機応変に位置が変化してくれます。（とはいえ調整は必要）
Elementorで画像の上に文字を乗せる方法は「簡単」でした
というわけで、うまくできたでしょうか。
今回は、Elementorで画像の上に文字を乗せる方法を解説しました。
「どうしてもうまくいかない！」って方は、お問い合わせいただけたら見ます。
今回は以上です。
