Google chrome（グーグル ク...
続きを読む
Elementorで画像の上に文字やボタンなどを表示させる方法を紹介します。
コンテナの「背景」や、「背景オーバーレイ」という機能を使うことで、画像を背景に設定してその上に文字を重ねたり、目立たせたい部分の色だけを変えたりする事ができます。
また、背景の透明度など細かい設定も可能です。
では、早速ご紹介します！
今回は、↑こちらのような「画像＋文字＋ボタン」を作ってみます。
↑コンテナを配置します。画像の上の文字やボタンを縦に並べたい時は、「↓方向」を選択します。
「Justfy Content」と「Align Items」をそれぞれ左から２番目に設定します。
↑画像の上の文字やボタンを横に並べたい時は、「→方向」を選択します。
↑画面左の「コンテナを編集」で「スタイル」をクリックします。
背景という箇所に「画像」と表示されている部分があるので、プラスボタンをクリックして画像を設定します。
↑画像を設定したら、画像のサイズを調整します。（設定する画像の元サイズによって異なります）
今回は、1200×525ピクセルの画像で、サイズをMedium Largeに設定しました。
また、位置を「中央/中央」に設定します。
この段階では、画像の縦幅が狭いままですが、縦の高さはこの後調整するので問題ありません。
↑もう一度、コンテナを編集の「レイアウト」に戻り、「最小の高さ」でコンテナの縦幅を調整します。今回は高さを300pxに設定しました。
コンテナの背景に画像を設定したら、文字やボタンを配置していきます。
今回は、Elementorのロゴと、文字（テキスト）そしてボタンを画像の上に配置します。
↑コンテナの上に画像をドラッグして配置します。
※ロゴなどの画像を配置する場合は、背景が透過している画像を使用するのがおすすめです。（PNG形式）
「配置」の箇所で画像の幅や高さを調整します。
↑見出しとボタンも同じようにドラッグして配置していきます。
文字の色やサイズは画面左の「見出しを編集」または「ボタンを編集」の下の「スタイル」をクリックして調整できます。
↑最後に、背景画像の色を薄くして文字やボタンを見やすいように調整します。
「コンテナ」を選択した状態で、「スタイル」から「背景オーバーレイ」をクリックします。
Background Typeは左側の筆マークをクリックします。色を白にして、不透明度を0.5〜0.7くらいの間で調整します。
↑画像の上に文字やボタンを配置する事ができました！
ブログやウェブサイトに表や箇条書きのリストなどを載せたい場合に、今回紹介した「画像の上に文字を重ねて表示させる」方が良い理由は、ズバリ「SEO対策」にも関係しています。
Googleのクローラー（ページ内容を分析するロボット）は、画像の中に表示されている情報は基本的に読み込む事ができません。
↑画像の上に文字を表示
（今回紹介した方法）
↑文字を載せた画像を配置
（画像を作って、それを配置）
左は、今回紹介した方法で画像の上に文字を表示させたものです。
画像の上のテキストがしっかりと「記事の内容」としてGoogleに認識されるので、SEO対策になります。
また、一度画像として作ってしまうと修正したい時に画像自体を作り直さなければならなかったり、画像の解像度次第では画像上の文字が見にくくなってしまったりする事もあります。
画像の上に文字を表示させる事で、ブログやウェブサイトをより高品質にすることができます！
今回の記事では、Elementorで画像の上に文字やボタンを重ねて表示させる方法を紹介しました。
ぜひこの方法を活用してみてください！
2025-03-22
Saturday
20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。
自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。
“ネコとレモンのWEBマーケ＆デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋
Google chrome（グーグル ク...
続きを読む
WEBマーケティングスクールを検討されて...
続きを読む
