要約：WordPressで画像に文字を追加する方法
WordPressで画像に文字を追加する最も簡単な方法は、カバーブロックで簡単なオーバーレイを作成するか、SeedProdの高度なギャラリーでスタイル設定されたホバーテキストを使用することです。どちらもサイト内で直接機能し、Photoshopやコード、ダウンロードする外部アプリは不要です。
- カバーブロック（プラグイン不要）：ブロックエディターでカバーブロックを追加し、画像を選択して、画像の上に直接テキストを入力します。
- SeedProd 高度なギャラリー：ページに高度なギャラリーブロックをドラッグし、ホバーテキストをオンにして、各写真の上にタイトルまたはキャプションを表示します。
- SeedProd セクション：背景画像とオーバーレイテキストを備えた、すぐに使えるCTA（Call to Action）セクションをワンクリックで配置します。
- 画像の背後に文字：グループブロックを重ねるか、カバーブロックをレイヤー化して、被写体の背後に文字があるように見せます。
- 読みやすくする：オーバーレイを追加して写真を暗くしたり、コントラストの高いテキストを使用したり、テキストを画像の邪魔な部分から離したりします。
セールを強調したり、CTAを追加したり、写真をより魅力的にしたいですか？WordPressで画像に文字を追加することは、それを実現する最も簡単な方法であり、Photoshopや別のオンラインツールなしでサイト内で全体を完了できます。数回のクリックで、普通の写真をバナー、ヒーローヘッダー、またはミニ広告に変えることができます。
このガイドでは、WordPressのブロックエディターから、よりデザインコントロールが可能なドラッグ＆ドロップビルダーまで、WordPressで画像に文字を重ねるための3つの簡単な方法を説明します。
WordPressで画像に文字を追加する理由
画像に文字を追加すると、より便利になります。製品の特徴を強調したり、バナーにCTAを追加したり、写真に直接ラベルを配置して、訪問者が何を見ているのかすぐに理解できるようにすることができます。
これらすべてにPhotoshopやグラフィックデザインのスキルは必要ありません。WordPressには、サイト内で直接テキストオーバーレイを追加するためのいくつかの組み込み方法があり、それが以下の3つの方法です。
WordPressで画像に文字を追加する方法
以下に、WordPressで画像に文字を追加する3つの異なる方法を紹介します。まずWordPressプラグインから始め、次にWordPressブロックエディターでテキストオーバーレイを作成する方法を示します。
方法1. SeedProdギャラリーブロックを使用して画像に文字を追加する
最初に紹介するプラグインは、WordPress向けの最高のウェブサイトビルダーであるSeedProdです。SeedProdを使用すると、コードに触れることなくブロックを配置するだけで、テキストオーバーレイ画像を視覚的に構築できます。
完全なウェブサイトキットまたはランディングページテンプレートから開始し、WordPressブロックでデザインをカスタマイズできます。たとえば、ギャラリーブロックを使用すると、カラーオーバーレイをオンにして、ホバー時に写真のタイトル、説明、キャプションを表示できます。
SeedProdで画像の上にテキストを追加する方法については、以下のガイドに従ってください。
ステップ1. SeedProdのインストールと有効化
まず、以下のボタンをクリックしてSeedProdアカウントを作成し、プラグインファイルをコンピューターにダウンロードしてください。
次に、アカウントダッシュボード内で、**ダウンロード**タブをクリックし、SeedProdライセンスキーをコピーします。
次に、プラグインの.zipファイルをWordPressウェブサイトにアップロードします。この手順にヘルプが必要な場合は、WordPressプラグインのインストールと有効化に関するこれらの指示に従ってください。
SeedProdを有効化した後、WordPress管理エリアから**SeedProd » 設定**に移動し、先ほどコピーしたライセンスキーを貼り付けます。
次に、**キーの検証**ボタンをクリックし、次のステップに進みます。
ステップ2：新しいWordPressレイアウトを作成する
このステップでは、SeedProdで作成したいWordPressレイアウトの種類を決定する必要があります。完全なウェブサイトキットのいずれかを使用してWordPressテーマをゼロから構築するか、スタンドアロンのランディングページを作成するためにランディングページテンプレートを選択できます。
テーマビルダーオプションは、既存のWordPressテーマを完全に置き換えたい場合に最適です。ページを作成またはカスタマイズするだけで現在のテーマを維持したい場合は、ランディングページビルダーの方が適しています。
どちらのルートにもチュートリアルがあります。WordPressテーマを作成するにはこのガイドに従うか、SeedProdでWordPressにランディングページを作成するにはこれらの手順に従ってください。WordPressテーマを作成するまたはWordPressでランディングページを作成する。
どちらのチュートリアルでも、既製のテンプレートの選択と基本的なレイアウトの設定について説明します。このガイドでは、テーマビルダーオプションを選択します。
デザインのテンプレートを選択したら、それを編集してカスタマイズを追加できます。この場合、Photography ポートフォリオテーマを使用しており、ポートフォリオページをカスタマイズする予定です。
ポートフォリオページを編集するには、[ページ] » [すべてのページ]に移動し、目的のページを見つけて、SeedProdで編集リンクをクリックします。
ステップ3.ギャラリーブロックの埋め込みとカスタマイズ
デザインを開くと、以下の例のようなレイアウトが表示されます。
右側には、リアルタイムでクリックして編集できるページのライブプレビューがあります。左側には、デザインにドラッグアンドドロップできるWordPressブロックとセクションがあります。
要素にカーソルを合わせてゴミ箱アイコンをクリックして削除することもできます。テンプレートに含まれていたギャラリーブロックは、高度なギャラリーに置き換えるため、削除します。
SeedProdの高機能ギャラリーブロックを使用すると、オーバーレイの色、フォント、配置、およびホバー時に表示されるキャプションテキストを設定できます。ポートフォリオの画像の上にテキストを追加するために使用しますので、高機能ギャラリーブロックを見つけてページにドラッグします。
ブロック設定は左側のサイドバーで開きます。このパネル内で、最初に「タイプ」ドロップダウンメニューから「シングル」または「複数」を選択します。
「複数」オプションを使用すると、フィルターを使用して複数のギャラリーをページに追加でき、各ギャラリーを表示するためにクリックできます。「シングル」オプションは、フィルターなしで1つのギャラリーのみを表示します。
ギャラリータイプを選択したら、写真の追加を開始できます。ギャラリー画像を追加ボタンをクリックし、コンピューターまたはWordPressメディアライブラリから画像を選択します。
JPEG/JPG、PNG、GIF、その他のファイルタイプを含む、任意の写真を vă addできます。
写真のアップロードが完了したら、設定メニューを開き、列数、間隔、アスペクト比、画像サイズ、リンクを選択できます。
以下では、各写真にカーソルを合わせたときに表示するテキストを選択できます。どちらのオプションでも、以下を表示できます。
- タイトル
- キャプション
- 代替テキスト
- 説明
これは、画像キャプションがホバー時に表示される場合の表示方法です。
キャプションが読みにくい場合は、オーバーレイの背景色を調整し、テキストのフォント、テキストの配置、テキストのスタイルを編集できます。
「高度」タブには、シャドウ、境界線、間隔、モバイル表示スタイルなど、他の多くのカスタマイズオプションがあります。
デバイスの可視性を使用すると、Androidタブレット、iPhone、Apple iPad、Mac iOSラップトップ、Microsoftデスクトップなどの異なるデバイスサイズで特定の要素を表示または非表示にできます。
デザインに満足したら、右上隅の[保存]ボタンをクリックして変更を保存することを忘れないでください。
ステップ4.変更を公開する
これで、WordPressのカスタマイズをウェブサイトで公開するだけです。ランディングページを作成している場合は、[Save]ドロップダウンメニューの[Publish]をクリックします。
SeedProdのテーマビルダーを使用している場合は、[SeedProd » Theme Builder]に移動し、[Enable SeedProd Theme]トグルをオンにする必要があります。
これで、ページをプレビューして、画像テキストオーバーレイが機能していることを確認できます。
方法2. SeedProdセクションを使用して画像に文字を追加する
WordPressで画像の上にテキストを追加するもう1つの方法は、SeedProdの既製のセクションを使用することです。SeedProdのドラッグアンドドロップエディターでテンプレートを編集すると、画面の左側に[Sections]タブが表示されます。
そのタブをクリックすると、ヘッダー、フッター、ヒーロー、コールトゥアクション、機能、FAQのさまざまなセクションが表示されます。これらは、すぐに使用できるレイアウトのWordPressブロックのコレクションであり、ワンクリックでページに追加できます。
コールトゥアクションボタン付きの画像を表示したい場合は、コールトゥアクションライブラリからセクションを選択し、プラスアイコンをクリックして埋め込みます。
セクションはデザインの下部に表示され、必要に応じてカスタマイズできます。
この場合、背景画像を、背景を暗くするためのオーバーレイ色を追加し、見出しテキストとコールトゥアクションボタンをカスタマイズしました。
完了したら、変更を保存して公開することを忘れないでください。その後、ウェブサイトでデザインをライブでプレビューできます。
方法3. WordPressカバーブロックを使用して画像に文字を追加する
次の方法では、プラグインなしでWordPressの画像の上にテキストを追加する方法を示します。WordPressのカバーブロックを使用して、任意の画像を表示し、その上にテキストを入力できます。
この方法では、前の方法ほど多くのカスタマイズオプションはありません。それでも、WordPressプラグインをウェブサイトに追加したくない場合に、画像にテキストを追加する便利な方法です。
カバーブロックを投稿またはページに追加するには、WordPressブロックエディターのプラス（+）アイコンをクリックします。次に、「Cover」と入力し、表示されたらカバーブロックを選択します。
次に、「アップロード」または「メディアライブラリ」ボタンをクリックして、カバーの画像を選択します。
画像を選択したら、写真に直接入力して、見出しや説明を追加できます。
右側のパネルで、背景を固定または繰り返し表示するように設定することで、背景画像をカスタマイズできます。プレビュー上のマーカーをドラッグして、画像のフォーカスを変更することもできます。
[Overlay Settings]パネルでは、画像にカラーまたはグラデーションのオーバーレイを選択できます。同じパネルで、オーバーレイの不透明度、パディング、および寸法を設定できます。
オーバーレイテキストをクリックするとテキストツールが開かれ、テキストの色と背景色を変更したり、さまざまなフォントスタイルを試したりできます。
文字の大文字と小文字、文字間隔、フォントサイズを変更することで、このラベル効果を作成できます。
カバーブロックの外観に満足したら、ページを発行または更新できます。ウェブサイトにアクセスすると、画像の上にテキストが表示されます。
画像上の文字を読みやすくするにはどうすればよいですか？
画像上の読みやすいテキストの秘訣はコントラストです。そのため、単語が背後の写真と競合することはありません。忙しい、または明るい画像は、オーバーレイテキストが消える最も一般的な理由であり、いくつかの小さな調整で修正できます。
- コントラストの高いテキストを使用する：暗い写真に明るいテキスト、または明るい写真に暗いテキストは、一目で判読できます。
- 背景を暗くするオーバーレイを追加する：半透明のカラーレイヤーは、ヒーローセクションの背後にある背景画像を暗くするのと同じ方法で、忙しい画像を落ち着かせます。
- デバイスに合わせてフォントサイズを調整する：デスクトップでうまく読めるテキストは、モバイルでは小さすぎて読めなくなる可能性があるため、公開前に両方を確認してください。
- 写真の忙しい領域を避ける：詳細な被写体ではなく、空、壁、または影の穏やかな部分に単語を配置します。
WordPressで画像の背後に文字を追加するにはどうすればよいですか？
画像の背後にテキストを追加することは、単語が被写体の背後に配置され、写真がそれをオーバーラップしているように見えるレイヤーデザイン効果です。WordPressには単一の「テキストを画像の後ろに」ボタンはありませんが、オーバーラップするブロックでその外観を偽装できます。
最も簡単な方法は、カバーブロックを使用することです。大きな見出しをオーバーレイテキストとして設定し、オーバーレイ設定で画像の不透明度を下げることで、テキストが写真の上に重なるのではなく、写真の後ろにあるように見せます。
より強力な効果を得るには、グループブロックを重ねて使用します。1つのグループに見出しを配置し、別のグループに透明な背景（PNG切り抜き）の画像を入れてから、ネガティブマージンまたはパディングを使用して、画像をテキストの一部にかぶせるように引き寄せます。
WordPressで画像に合わせて文字を回り込ませるにはどうすればよいですか？
画像にテキストを回り込ませるということは、段落が画像の上下で止まるのではなく、写真の横に流れるということです。WordPressのブロックエディターは、コード不要で、画像の配置機能でこれを処理します。
まず画像ブロックを追加し、それを選択して、ブロックツールバーから「左揃え」または「右揃え」を選択します。画像の後ろのブロックに段落を入力すると、テキストが開いている側に回り込みます。
画像は適度な幅に保ち、テキストが横に並ぶスペースを確保します。狭いモバイル画面では、WordPressは自動的に回り込んだテキストを画像の下にドロップするため、レイアウトは読みやすさを保ちます。
WordPress画像への文字追加に関するFAQ
プラグインなしでWordPressの画像の上にテキストを追加するにはどうすればよいですか？
WordPressに組み込まれているカバーブロックを使用します。ブロックエディターにカバーブロックを追加し、画像を選択して、写真の上に直接テキストを入力します。その後、右側のパネルでオーバーレイカラーを設定し、テキストスタイルを調整できます。
WordPressの画像の後ろにテキストを追加するにはどうすればよいですか？
WordPressには単一のボタンはありませんので、ブロックを重ねてレイヤードルックを演出します。見出しをカバーブロックのオーバーレイテキストとして設定し、画像の不透明度を下げるか、2つのグループブロックを積み重ねて、ネガティブマージンで画像をテキストの一部にかぶせるように引き寄せます。
WordPressで画像にテキストを回り込ませるにはどうすればよいですか？
画像ブロックを追加し、それを選択して、ブロックツールバーで左揃えまたは右揃えを選択します。画像の後ろのブロックに段落を入力すると、テキストが開いている側に流れます。モバイルでは、WordPressは自動的にテキストを画像のしたにドロップします。
ごちゃごちゃした画像の上にテキストを読みやすくするにはどうすればよいですか？
半透明のオーバーレイを追加して写真を暗くし、コントラストの高いテキストを使用して単語を目立たせます。テキストを画像の一番落ち着いた部分（空や無地の壁など）の上に配置し、公開前にモバイルでのフォントサイズを確認してください。
今日から画像の上にテキストを追加しましょう
これで、簡単なカバーブロックのオーバーレイから完全にスタイル設定されたSeedProdギャラリーまで、WordPressのあらゆる画像の上にテキストを追加できるようになりました。必要なデザインコントロールの量に合わせて方法を選択すれば、数分で公開できます。
以下のWordPressチュートリアルも役立つかもしれません。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
