WordPressで画像の上にテキストを追加する方法（3つの方法）

WordPressで画像にテキストオーバーレイを追加する必要がある場合が多々あります。

ホームページ用に人目を引くバナーを作成するかもしれません。あるいは、アイキャッチ画像にキャッチーなタイトルをつけたいかもしれません。私たちもこのような状況に遭遇したことがありますが、テキストオーバーレイを追加することは、画像をより有益で魅力的なものにする素晴らしい方法です。

WordPressで画像の上にテキストを追加する方法をお探しですか？WordPressで画像の上にテキストを追加する簡単な方法を3つご紹介します。

WordPressで画像の上にテキストを追加するタイミング

Imagelyは、WordPressサイトをより面白く見せ、大きな段落のテキストを分割するのに役立ちます。

しかし、画像にもっと説明が必要な場合もあります。例えば、画像の上にテキストを追加して、その画像が何を示しているのか、なぜその画像を投稿に追加したのかを説明することができます。

WordPressブログの多くは、画像の上にテキストを追加して、人目を引く有益なバナーやヘッダーを作成することもできます。

この投稿では、WordPressで画像の上にテキストを追加する初心者向けの方法を3つご紹介します。もし特定の方法にすぐに飛びつきたい場合は、以下のリンクをご利用ください：

方法1：カバーブロックを使って画像の上にテキストを追加する

WordPressで画像の上にテキストを追加する方法のひとつに、Coverブロックを使う方法があります。このブロックを使って任意の画像を表示し、その上にテキストを入力することができます。このため、Coverブロックはヒーロー画像、ヘッダー、バナーの作成に最適です。

カバーブロックをページや投稿に追加するには、Gutenbergブロックエディターでプラス「＋ブロック追加」ボタンをクリックするだけです。

これで「Cover」と入力し、適切なブロックが表示されたら選択することができる。

ここでは、初期設定のカバーブロックを選択できます。しかし、プレースホルダー画像とテキストを使ったテンプレート設定も可能です。つ目のオプションでは、既存の画像とテキストをあなた自身のものに置き換えることができます。

初期設定の画像を置き換えるには、画像をクリックして選択するだけです。そうしたら、「置換」ボタンをクリックします。

WordPressのメディアライブラリにすでにある画像を使いたい場合は、「メディアライブラリを開く」をクリックするだけです。すると、既存の画像を選ぶことができます。

新規画像をアップロードする場合は、「アップロード」をクリックしてください。

コンピューターから任意のファイルを選択するウィンドウが開きます。

画像を選んだら、ブロック設定を使って人目を引く面白い効果を作ることができます。例えば、訪問者がページをスクロールすると画像が固定されるようにしたり、画像にカラーオーバーレイを追加したりすることができます。

オーバーレイを使用する場合は、「不透明度」スライダを使って不透明度を変更できます。不透明度の設定は背景画像の透明度をコントロールします。

画像の見た目に満足したら、テキストを追加します。

初期設定では、表紙ブロックには見出しと段落ブロックがあり、画像の上にテキストを追加することができます。

テキストを追加するには、見出しブロックか段落ブロックをクリックして選択します。次に、使いたいテキストを入力します。

画像の上にテキストを追加すると、そのテキストが読みにくくなることがあります。これは、視力の弱い訪問者には特に当てはまります。さらに詳しく知りたい方は、WordPressサイトのアクセシビリティを向上させる方法をご覧ください。

とはいえ、テキストを読みやすくするために、スタイルを整えたほうがいいかもしれない。

見出しブロックを使っている場合は、さまざまな見出しスタイルを試して、どれが一番読みやすいかを確認することもできます。

対照的な色を使うことで、テキストを目立たせることもできる。

別の色を選択するには、右側のメニューから「ブロック」タブを選択します。次に、「カラー」をクリックして、このセクションを展開します。

そうしたら、「テキスト」をクリックする。ポップアップが開き、ブロック内のすべてのテキストの新しい色を選択できます。

通常、文字は大きい方が読みやすい。

テキストを大きくするには、「サイズ」の隣のフィールドをクリックして、このフィールドに大きな数字を入力します。

カバーブロックの見た目に満足したら、通常通りページを公開または更新します。これでWordPressサイトにアクセスすると、画像の上にテキストが表示されます。

方法2：画像ブロックを使って画像の上にテキストを追加する

カバーブロックは、バナーやヘッダーを作成するのに適しています。しかし、標準のWordPressイメージブロックの上にテキストを追加することもできます。

まず、ページや投稿にImageブロックを追加します。これを行うには、WordPressのブロックエディターでプラス「+ブロックを追加」ボタンをクリックするだけです。

その後、「Image」と入力し、適切なブロックを選択して投稿に追加することができます。

コンピューターから画像をアップロードするか、「メディアライブラリ」をクリックしてWordPressのメディアライブラリから画像を選択します。

画像を選択したら、上記と同じ手順でフォーカルポイントを変更したり、オーバーレイを追加したり、不透明度を変更したりできます。

また、「固定背景」と「繰り返し背景」のスライダーを試して、あなたのImageブロックに最適なものを見つけることもできます。

画像の見た目に満足したら、「画像の上にテキストを追加」ボタンをクリックします。

テキストを入力するエリアが追加されます。

画像によっては、訪問者がオーバーレイテキストを読むのに苦労するかもしれません。この場合、テキストを太字にしたり、色を変えたりすることが有効です。

文字を大きくすることもできる。

これを行うには、右側のメニューで「サイズ」セクションを見つけます。そして数字をクリックして文字を大きくしたり小さくしたりすることができます。

テキストと画像の見栄えに満足したら、サイトをプレビューしてください。その後、’下書き保存’、’更新’、または’公開’をクリックして変更を保存します。

WordPressのブロックテーマを使用している場合、WordPressフルサイトエディター（FSE）を使用して、テーマのどの部分でも画像の上にテキストを追加する方法1と2を使用できます。

FSEの詳細については、WordPressフルサイト編集の完全初心者ガイドをご覧ください。

方法3：画像の上にテキストを配置したカスタムページレイアウトを作成する。

WordPressにビルトインされているブロックは、WordPressで画像の上にテキストを追加する手軽で簡単な方法です。しかし、完全にカスタムしたページデザインを自由に作りたいのであれば、ページビルダープラグインが必要だ。

SeedProdは、市場で最高のWordPressページビルダープラグインです。このプラグインを使用すると、サイト全体の任意の画像の上にテキストを追加することができます。

詳しくはSeedProdのレビューをご覧ください。

まず、SeedProdプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化した後、SeedProdライセンスキーを入力する必要があります。このキーはSeedProdアカウントにログインすることで取得できます。次に、「ダウンロード」タブをクリックします。

それができたら、「ライセンス・キー」セクションにあるキーをコピーしてください。

このキーをWordPressの管理エリアに貼り付け、SeedProd ” 設定ページに移動します。

ライセンス・キー」フィールドにキーを貼り付けます。

その後、「Verify Key」をクリックするだけです。

その後、SeedProd“ランディングページに向かい、「新規ランディングページを追加」をクリックします。

次の作業は、あなたのページの出発点となるテンプレートの選択です。どのSeedProdテンプレートを選んでも、あなたのサイトとブランディングに完璧に合うようにテンプレートのあらゆる部分をカスタマイズすることができます。

真っ白なキャンバスから始めたい場合は、「Blank Template」をクリックしてください。

すべての画像で、より多くの購読者キャンペーンを獲得するのに最適なTasty Squeeze Pageテンプレートを使用しています。

使いたいテンプレートが見つかったら、マウスオーバーしてください。プレビュー」アイコンをクリックします。

テンプレートのプレビューが表示されます。

このテンプレートでよろしければ、「このテンプレートを選択」ボタンをクリックしてください。

ページ名」フィールドに、ページの名前を入力する。

初期設定では、SeedProdはこの名前をページのURLとして使用します。この自動的に作成されたURLを変更したい場合は、’ページURL’フィールドのテキストを編集してください。

入力した情報に満足したら、「保存してページの編集を開始する」ボタンをクリックしてください。これでSeedProdのドラッグ＆ドロップエディターでテンプレートが開きます。

左側のサイドバーには、ドラッグ＆ドロップでページに追加できるブロックやセクションがすべて表示されます。

ブランクテンプレートを使用していない限り、SeedProdページにはすでにいくつかのブロックとセクションがあります。これらのコンテンツを編集するには、ブロックやセクションをクリックして選択するだけです。

SeedProdの左側のメニューには、このブロックやセクションをカスタマイズするための設定がすべて表示されます。以下の画像のように、見出しブロックをクリックすると、このブロックに表示されるテキストを変更することができます。

画像の上にテキストを追加する最も簡単な方法は、SeedProdの既製のHeroセクションのいずれかを使用することです。

これらのセクションには、プレースホルダーの全幅の背景画像があり、その上にプレースホルダーのテキストが追加されています。初期設定の背景画像とテキストをあなたのコンテンツに置き換えるだけです。

まずは、SeedProdの左メニューにある「セクション」タブをクリックしてください。

次に「ヒーロー」をクリックすると、ページに追加できる既製のヒーローセクションがすべて表示されます。

これらのセクションテンプレートをプレビューするには、テンプレートにマウスオーバーし、虫眼鏡アイコンをクリックするだけです。

このヒーロー・セクションをデザインに追加するには、「このセクションを選択」をクリックします。

次に、テンプレートのストック画像を自分の画像に置き換えます。そのためには、ストック画像をクリックして選択するだけです。

次に、SeedProdの左メニューで、ゴミ箱アイコンが表示されるまで「背景画像」プレビューにマウスオーバーします。

このアイコンをクリックすると、プレースホルダー画像が削除されます。

次に、「自分の画像を使う」をクリックします。すると、WordPressのメディアライブラリから画像を選ぶか、ストック画像を使用することができます。

SeedProdでは、何千ものロイヤリティフリーのストック画像に簡単にアクセスできます。SeedProdのストックイメージライブラリをご覧になるには、「ストックイメージを使用する」をクリックしてください。

検索バーに、お探しのイメージを表す単語やフレーズを入力し、「検索」ボタンをクリックします。

SeedProdは、検索キーワードに一致するストックイメージをすべて表示します。

デザインに加えたい画像を見つけたら、クリックするだけ。

画像を追加したら、プレースホルダー・テキストを置き換える準備ができました。

これを行うには、テキストブロックをクリックして選択します。次に、「テキスト」エリアに使用したいテキストを入力します。

SeedProdの一部のヒーローテンプレートには、コールトゥアクションボタンなどの追加コンテンツがあります。

このコンテンツを変更したいですか？その場合は、クリックしてブロックを選択し、SeedProdの左側のメニューで変更してください。

もう一つのオプションは、ヒーローテンプレートからブロックを削除することです。

これを行うには、クリックしてブロックを選択し、ゴミ箱内のアイコンをクリックするだけです。

ページのデザインに満足したら、「保存」ボタンをクリックしてください。

ここから、ページを公開するか、テンプレートとして保存するかを選択できます。

SeedProdでカスタムページレイアウトを作成する詳細については、WordPressでランディングページを作成する方法のガイドをご覧ください。

WordPressで画像とファイルを管理するボーナスのヒント

画像にテキストを追加することは、サイトをより良く見せるための一つの方法に過ぎません。画像をもっと活用したいですか？簡単なガイドをご覧ください：

• WordPressで画像を簡単に遅延ロードする方法
• WordPressの投稿とページに複数のギャラリーを追加する方法
• WordPressで注目コンテンツスライダーを正しく追加する方法
• WordPressで画像の周りに枠線を追加する方法
• WordPress投稿サムネイルのトリミングと編集方法
• WordPressでインタラクティブな360度画像を簡単に追加する方法

WordPressで画像の上にテキストを追加する方法について、この投稿がお役に立てれば幸いです。また、アイキャッチ画像を一括編集する方法や、WordPressのスライダープラグインのエキスパートが選ぶベストプラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.