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

WordPressの画像にテキストを追加したいですか？写真の上に重ねて表示される魅力的なタイトルや引用文は、コンテンツを際立たせることができます。これはテキストオーバーレイと呼ばれ、画像をより魅力的にするための優れた方法です。

これらのテキストオーバーレイを作成する方法を疑問に思っていた方は、特別なデザインソフトウェアやスキルが必要だと思っているかもしれません。良いニュースです。必要ありません！

あらゆる種類の方法をテストし、WordPress内で直接画像にテキストを追加するいくつかの簡単な方法を見つけました。デザインの経験は不要で、追加のソフトウェアを購入する必要もありません。

方法を学ぶ準備はできましたか？ WordPress で画像の上にテキストを追加する 3 つの簡単な方法をご紹介します。このガイドを終える頃には、自信を持ってウェブサイト用のプロフェッショナルなテキストオーバーレイを作成できるようになります。

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

画像はWordPressサイトの魅力を大幅に高め、視覚的に面白くすると同時に、長いテキストセクションを区切るのに役立ちます。

ただし、画像だけでは全体像を伝えきれない場合もあります。そのような場合は、テキストオーバーレイを追加することで、画像がコンテンツに関連している理由を視聴者が理解するのに役立つ追加のコンテキストを提供できます。

WordPressブログまたはオンラインストアのどちらを運営していても、テキストオーバーレイは通常の画像を目を引くヘッダーやバナーに変えることができます。

この投稿では、WordPressで画像の上にテキストを追加する3つの初心者向けの簡単な方法を紹介します。特定のメソッドに直接ジャンプしたい場合は、以下のリンクを使用できます。

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

WordPressで画像の上にテキストを追加する1つの方法は、カバーブロックを使用することです。このブロックを使用して、任意の画像を表示し、その上にテキストを入力できます。これにより、カバーブロックはヒーロー画像、ヘッダー、バナーの作成に最適です。

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

「カバー」と入力して、表示されたら正しいブロックを選択できるようになりました。

ここで、デフォルトのカバーブロックを選択できます。

プレースホルダー画像とテキストのテンプレートオプションを選択することもできます。2番目のオプションでは、既存の画像とテキストを自分のものに置き換えるだけです。

デフォルトの画像を置き換えるには、画像をクリックして選択します。完了したら、「置き換え」ボタンをクリックします。

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

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

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

画像を選択した後、ブロック設定を使用して、興味深く目を引く効果を作成できます。

例えば、訪問者がページをスクロールしても画像を固定したり、画像にカラーオーバーレイを追加したりできます。

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

画像の外観に満足したら、テキストを追加する準備ができました。

デフォルトでは、カバーブロックには、画像の上にテキストを追加できる見出しブロックと段落ブロックが含まれています。

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

画像の上にテキストを追加する場合は、すべての訪問者にとって読みやすいテキストであることを確認してください。テキストと背景のコントラストが高いと、誰もがコンテンツをより簡単に読み取ることができます。詳細については、WordPressサイトのアクセシビリティを向上させる方法に関するガイドを参照してください。

それでも、読みやすくするためにテキストをスタイル設定したい場合があります。

見出しブロックを使用している場合は、さまざまな見出しスタイルを試して、最も読みやすいものを見つけることもできます。

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

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

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

通常、大きなテキストの方が読みやすいです。

テキストを大きくするには、「サイズ」の横にあるフィールドをクリックし、このフィールドに大きい数値を入力してください。

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

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

カバーブロックは、バナーやヘッダーを作成するのに最適です。ただし、標準のWordPress画像ブロックの上にテキストを追加することもできます。

まず、ページまたは投稿に画像ブロックを追加する必要があります。これを行うには、WordPressブロックエディターのプラス「+ブロックを追加」ボタンをクリックするだけです。

次に「画像」と入力し、投稿に追加する適切なブロックを選択できます。

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

画像を選択した後、上記と同じプロセスに従って、フォーカルポイントを変更したり、オーバーレイを追加したり、不透明度を変更したりできます。

また、さまざまな「固定背景」および「繰り返し背景」スライダーを試して、画像ブロックに最適なものを確認することもできます。

画像の外観に満足したら、「画像の上にテキストを追加」ボタンをクリックするだけです。

これにより、テキストを入力できる領域が追加されます。

画像によっては、訪問者がオーバーレイテキストを読みにくい場合があります。ここでは、テキストを太字にするか、上記と同じプロセスに従って色を変更すると役立つ場合があります。

テキストを大きくすることもできます。

これを行うには、右側のメニューにある「サイズ」セクションを見つけます。次に、さまざまな数字をクリックして、テキストを大きくしたり小さくしたりできます。

テキストと画像の表示方法に満足したら、ウェブサイトをプレビューします。次に、「下書き保存」、「更新」、または「公開」をクリックして変更を保存します。

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

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

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

WordPressの組み込みブロックは、WordPressで画像を重ねてテキストをすばやく簡単に追加する方法です。ただし、完全にカスタムなページデザインを作成する自由が必要な場合は、ページビルダープラグインが必要になります。

SeedProdは、市場で最高のWordPressページビルダープラグインです。これにより、ウェブサイト全体で任意の画像の上にテキストを追加できます。

詳細については、SeedProdレビューをすべてお読みください。

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

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

これが完了したら、「ライセンスキー」セクションのキーをコピーできます。

このキーを WordPress 管理画面の SeedProd » 設定 ページに貼り付けることができます。

ここに来たら、「ライセンスキー」フィールドにキーを貼り付けてください。

次に、「キーを検証」をクリックするだけです。

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

この最初のステップは、画像の上にテキストを追加できるようになる前に必要です。

次のタスクは、ページの開始点となるテンプレートを選択することです。

どのSeedProdテンプレートを選択しても、テンプレートのすべての部分をカスタマイズして、ウェブサイトとブランディングに完全に適合させることができます。空白のキャンバスから始めたい場合は、「空白のテンプレート」をクリックできます。

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

使用したいテンプレートを見つけたら、その上にマウスカーソルを合わせます。「プレビュー」アイコンをクリックできます。

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

このテンプレートの外観に満足したら、「このテンプレートを選択」ボタンをクリックしてください。

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

デフォルトでは、SeedProdはこの名前をページのURLとして使用します。この自動生成されたURLを変更したい場合は、「ページURL」フィールドのテキストを編集するだけです。

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

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

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

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

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

これらのセクションには、プレースホルダー、全幅の背景画像、およびその上にいくつかのプレースホルダーテキストが追加されています。デフォルトの背景画像とテキストを独自のコンテンツに置き換えるだけです。

開始するには、SeedProd の左側メニューにある「セクション」タブをクリックします。

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

これらのセクションテンプレートのいずれかをプレビューするには、テンプレートにカーソルを合わせ、虫眼鏡アイコンをクリックするだけです。

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

次に、テンプレートのストック画像を独自の画像に置き換えたいでしょう。これを行うには、ストック画像をクリックして選択するだけです。

次に、SeedProd の左側のメニューで、「背景画像」プレビューにカーソルを合わせると、ゴミ箱アイコンが表示されます。

このアイコンをクリックして、プレースホルダー画像を削除できます。

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

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

検索バーに、探している画像を表す単語またはフレーズを入力し、「検索」ボタンをクリックします。

SeedProdには、検索語句に一致するすべてのストック画像が表示されます。

デザインに追加したい画像を見つけたら、それをクリックするだけです。

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

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

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

このコンテンツを変更したいですか？ブロックを選択してクリックし、SeedProdの左側メニューで変更を行います。

他の選択肢としては、ヒーローテンプレートからブロックを削除することです。

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

ページのデザインに満足したら、「保存」ボタンをクリックできます。

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

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

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

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

• WordPressで画像を簡単に遅延読み込みする方法
• WordPress の投稿やページに複数のギャラリーを追加する方法
• WordPressで注目のコンテンツスライダーを適切に追加する方法
• WordPressで画像の周りに境界線を追加する方法
• WordPressの投稿サムネイルをトリミングおよび編集する方法
• WordPressでインタラクティブな360度画像を簡単に追加する方法

この記事がWordPressで画像の上にテキストを追加する方法を学ぶのに役立ったことを願っています。また、アイキャッチ画像を一括編集する方法に関するガイドや、おすすめのWordPressスライダープラグインもご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。