絞れば、出てくる、アイディア。

【Elementor】画像の上に文字を表示させる方法

【Elementor】画像の上に文字を表示させる方法

Elementorで画像の上に文字やボタンなどを表示させる方法を紹介します。

コンテナの「背景」や、「背景オーバーレイ」という機能を使うことで、画像を背景に設定してその上に文字を重ねたり、目立たせたい部分の色だけを変えたりする事ができます。
また、背景の透明度など細かい設定も可能です。

では、早速ご紹介します!

Elementorで画像の上に文字を表示させる方法

今回は、↑こちらのような「画像+文字+ボタン」を作ってみます。

1. コンテナの背景画像を設定する

コンテナを配置します。画像の上の文字やボタンを縦に並べたい時は、「↓方向」を選択します。

「Justfy Content」「Align Items」をそれぞれ左から2番目に設定します。 

↑画像の上の文字やボタンをに並べたい時は、「→方向」を選択します。

Elementorのコンテナ並べ方こちら↓の記事で詳しく紹介しています!

画面左の「コンテナを編集」で「スタイル」をクリックします。背景という箇所に「画像」と表示されている部分があるので、プラスボタンをクリックして画像を設定します。

↑画面左の「コンテナを編集」「スタイル」をクリックします。
背景という箇所に「画像」と表示されている部分があるので、プラスボタンをクリックして画像を設定します。

画像を設定したら、画像のサイズを調整します。(設定する画像の元サイズによって異なります) 今回は、1200x525ピクセルの画像で、サイズをMedium Largeに設定しました。また、位置を「中央/中央」に設定します。

↑画像を設定したら、画像のサイズを調整します。(設定する画像の元サイズによって異なります)
今回は、1200×525ピクセルの画像で、サイズをMedium Largeに設定しました。

また、位置を「中央/中央」に設定します。

この段階では、画像の縦幅が狭いままですが、縦の高さはこの後調整するので問題ありません。

もう一度、コンテナを編集の「レイアウト」に戻り、「最小の高さ」でコンテナの縦幅を調整します。

↑もう一度、コンテナを編集の「レイアウト」に戻り、「最小の高さ」でコンテナの縦幅を調整します。今回は高さを300pxに設定しました。

2. 画像の上に文字やボタンを設定する

コンテナの背景に画像を設定したら、文字やボタンを配置していきます。

今回は、Elementorのロゴと、文字(テキスト)そしてボタンを画像の上に配置します。

コンテナの上に画像をドラッグして配置します。

↑コンテナの上に画像をドラッグして配置します。
※ロゴなどの画像を配置する場合は、背景が透過している画像を使用するのがおすすめです。(PNG形式)

「配置」の箇所で画像の高さを調整します。

見出しとボタンも同じようにドラッグして配置していきます。

見出しボタンも同じようにドラッグして配置していきます。
文字の色やサイズは画面左の「見出しを編集」または「ボタンを編集」の下の「スタイル」をクリックして調整できます。

最後に、背景画像の色を薄くして文字やボタンを見やすいように調整します。「コンテナ」を選択した状態で、「スタイル」から「背景オーバーレイ」をクリックします。 Background Typeは左側の筆マークをクリックします。色を白にして、不透明度を0.5〜0.7くらいの間で調整します。

↑最後に、背景画像の色を薄くして文字やボタンを見やすいように調整します。

「コンテナ」を選択した状態で、「スタイル」から「背景オーバーレイ」をクリックします。
Background Typeは左側の筆マークをクリックします。を白にして、不透明度を0.5〜0.7くらいの間で調整します。

画像の上に文字やボタンを配置する事ができました!

3. 画像の上に文字を表示させた方がいい理由

ブログやウェブサイトに箇条書きのリストなどを載せたい場合に、今回紹介した「画像の上に文字を重ねて表示させる」方が良い理由は、ズバリ「SEO対策」にも関係しています。

Googleのクローラー(ページ内容を分析するロボット)は、画像の中に表示されている情報は基本的に読み込む事ができません。

画像の上に文字を表示させた方が良い理由

  • SEO対策になる
  • 文字がはっきり見やすい
  • 画像を作る必要がない

↑画像の上に文字を表示
(今回紹介した方法)

↑文字を載せた画像を配置
(画像を作って、それを配置)

左は、今回紹介した方法で画像の上に文字を表示させたものです。
画像の上のテキストがしっかりと「記事の内容」としてGoogleに認識されるので、SEO対策になります。

また、一度画像として作ってしまうと修正したい時に画像自体を作り直さなければならなかったり、画像の解像度次第では画像上の文字が見にくくなってしまったりする事もあります。

画像の上に文字を表示させる事で、ブログやウェブサイトをより高品質にすることができます!

 

まとめ🍋

今回の記事では、Elementorで画像の上に文字やボタンを重ねて表示させる方法を紹介しました。
ぜひこの方法を活用してみてください!