セールを強調したい、行動喚起を追加したい、または写真をより魅力的にしたいですか？WordPressで画像にテキストを追加するのは、それを実現する最も簡単な方法です。数回のクリックで、普通の写真をバナー、ヒーローヘッダー、またはミニ広告に変えることができます。
このガイドでは、WordPressの組み込みエディターから、よりデザインコントロールを可能にするプラグインまで、画像の上にテキストを配置するいくつかの簡単な方法を説明します。
WordPressで画像の上にテキストを追加する理由
画像の上にテキストを追加すると、それらがより便利になります。製品の特徴を強調したり、バナーに行動喚起を追加したり、訪問者が何を見ているのかすぐに理解できるように写真に直接ラベルを付けたりできます。
また、ウォーターマークの追加のようなブランディングにも便利で、追加のデザインソフトウェアなしで通常の写真をヘッダー、ヒーロー画像、またはオンライン広告に変えることができます。
良いニュースは、Photoshopやグラフィックデザインのスキルは必要ないということです。WordPressには、サイト内で直接テキストオーバーレイを追加するためのいくつかの簡単な方法が用意されています。
WordPressで画像にテキストを追加する方法
以下に、WordPressで画像の上にテキストを追加する3つの異なる方法を紹介します。まず、強力なWordPressプラグインを使用し、次にWordPressブロックエディターでテキストオーバーレイを作成する方法を説明します。
さあ、始めましょう。
方法1：SeedProdギャラリーブロックを使用して画像にテキストを追加する
最初に紹介するWordPressプラグインは、WordPress向けの最高のウェブサイトビルダーであるSeedProdです。ドラッグアンドドロップのビジュアルエディターを備えており、コードを書かずにWordPressテーマ、ランディングページ、およびサイトの柔軟なレイアウトを作成できます。
ウェブサイトキット全体またはランディングページテンプレートから開始し、WordPressブロックでデザインを視覚的にカスタマイズできます。たとえば、ギャラリーブロックを使用すると、色付きのオーバーレイを有効にし、ホバー時に写真のタイトル、説明、キャプションを表示できます。
SeedProdには、次の強力な機能も含まれています：
- 近日公開およびメンテナンスモード
- WordPressテーマビルダー
- 404およびログインページ
- 購読者管理ダッシュボード
- Eメールマーケティング連携
- ソーシャルメディア埋め込み
- ユーザーアクセス制御
- 動的テキスト置換
- ドメインマッピング
- その他多数。
SeedProdを使用して画像にテキストを追加する方法を学ぶには、以下のガイドに従ってください。
ステップ1. SeedProdのインストールと有効化
まず、以下のボタンをクリックしてSeedProdアカウントを作成し、プラグインファイルをコンピューターにダウンロードしてください。
次に、アカウントダッシュボード内で、**ダウンロード**タブをクリックし、SeedProdライセンスキーをコピーします。
次に、プラグインの.zipファイルをWordPressウェブサイトにアップロードします。この手順にヘルプが必要な場合は、WordPressプラグインのインストールと有効化に関するこれらの指示に従ってください。
SeedProdを有効化した後、WordPress管理エリアから**SeedProd » 設定**に移動し、先ほどコピーしたライセンスキーを貼り付けます。
次に、**キーの検証**ボタンをクリックし、次のステップに進みます。
ステップ2：新しいWordPressレイアウトを作成する
このステップでは、SeedProdで作成したいWordPressレイアウトの種類を決定する必要があります。フルウェブサイトキットのいずれかを使用してWordPressテーマをゼロから作成するか、スタンドアロンのランディングページを作成するためにランディングページテンプレートを選択できます。
テーマビルダーオプションは、既存のWordPressテーマを完全に置き換えたい場合に最適です。ただし、ページを作成またはカスタマイズするだけで、現在のテーマを維持したい場合は、ランディングページビルダーの方が適しています。
幸いなことに、両方のソリューションに関するチュートリアルを多数用意しています。このガイドに従ってWordPressテーマを作成するか、これらの手順に従ってSeedProdでWordPressにランディングページを作成してください。
どちらのチュートリアルでも、既製のテンプレートの選択と基本的なレイアウトの設定について説明します。このガイドでは、テーマビルダーオプションを選択します。
デザインのテンプレートを選択したら、それを編集してカスタマイズを追加できます。この場合、Photography ポートフォリオテーマを使用しており、ポートフォリオページをカスタマイズする予定です。
ポートフォリオページを編集するには、[ページ] » [すべてのページ]に移動し、目的のページを見つけて、[SeedProdで編集]リンクをクリックします。
ステップ3.ギャラリーブロックの埋め込みとカスタマイズ
デザインを開くと、次のようなレイアウトが表示されます。
右側には、リアルタイムでクリックして編集できるページのライブプレビューがあります。次に、左側には、デザインにドラッグアンドドロップできるWordPressブロックとセクションがあります。
要素にカーソルを合わせてゴミ箱アイコンをクリックすることで、要素を削除することもできます。テンプレートに含まれていたギャラリーブロックは、高度なギャラリーに置き換えるため、削除します。
SeedProdの高機能ギャラリーブロックには、強力なカスタマイズオプションが用意されています。これらを使用してポートフォリオの画像にテキストを追加します。そのため、高機能ギャラリーブロックを見つけて、ページにドラッグします。
ご覧のとおり、ブロック設定は左側のサイドバーに開きます。このパネル内で、最初に「タイプ」ドロップダウンメニューから「シングル」または「複数」を選択します。
「複数」オプションを使用すると、クリックして各ギャラリーを表示できるフィルターを使用して、ページに複数のギャラリーを追加できます。一方、「シングル」オプションは、フィルターなしで1つのギャラリーのみを表示します。
ギャラリータイプを選択したら、写真の追加を開始できます。ギャラリー画像の追加ボタンをクリックして、コンピューターまたはWordPressメディアライブラリから画像を選択するだけです。
JPEG/JPG、PNG、GIF、その他のファイルタイプを含む任意の写真を追加できます。
写真のアップロードが完了したら、設定メニューを開き、列数、間隔、アスペクト比、画像サイズ、リンクを選択できます。
たとえば、 メディアファイル リンクタイプをクリックすると、各ギャラリー写真がポップアップライトボックスギャラリーで開くようになります。
次に、オーバーレイメニューをクリックし、背景オーバーレイトグルを「はい」の位置に切り替えます。
以下では、各写真にカーソルを合わせたときに表示するテキストを選択できます。どちらのオプションでも、以下を表示できます。
- タイトル
- キャプション
- 代替テキスト
- 説明
画像キャプションをホバー時に表示した場合の表示方法は次のとおりです。
キャプションが読みにくい場合は、オーバーレイの背景色を調整し、テキストのフォント、テキストの配置、テキストのスタイルを編集できます。
さらに、[高度な設定]タブには、シャドウ、境界線、間隔、モバイル表示スタイルなど、他にも多くのカスタマイズオプションがあります。
たとえば、[デバイスの表示]を使用すると、Androidタブレット、iPhone、Apple iPad、Mac iOSラップトップ、Microsoftデスクトップなど、さまざまなデバイスサイズで特定の要素を表示または非表示にできます。
デザインに満足したら、右上隅の[保存]ボタンをクリックして変更を保存することを忘れないでください。
ステップ4.変更を公開する
これで、WordPressのカスタマイズをウェブサイトで公開するだけです。ランディングページを作成している場合は、[保存]ドロップダウンメニューの[公開]をクリックするだけです。
ただし、SeedProdのテーマビルダーを使用している場合は、[SeedProd] » [テーマビルダー]に移動し、[SeedProdテーマを有効にする]トグルをオンにする必要があります。
これで、ページをプレビューして、画像テキストオーバーレイが機能していることを確認できます。
方法2：SeedProdセクションを使用して画像にテキストを追加する
WordPressで画像にテキストを追加するもう1つの方法は、SeedProdの既製のセクションを使用することです。SeedProdのページビルダーでテンプレートを編集すると、画面左側に[セクション]タブが表示されます。
そのタブをクリックすると、ヘッダー、フッター、ヒーロー、コールトゥアクション、機能、FAQのさまざまなセクションが表示されます。これらは、ワンクリックでページに追加できる、すぐに使えるレイアウトのWordPressブロックのコレクションです。
たとえば、コールトゥアクションボタン付きの画像を表示したい場合は、コールトゥアクションライブラリからセクションを選択し、プラスアイコンをクリックして埋め込みます。
セクションがデザインの下部に表示され、必要に応じてカスタマイズできます。
この場合、背景画像を、背景を暗くするためのオーバーレイ色を追加し、見出しテキストとコールトゥアクションボタンをカスタマイズしました。
完了したら、変更を保存して公開することを忘れないでください。その後、ウェブサイトでデザインをライブでプレビューできます。
方法3：WordPressカバーブロックを使用して画像の上にテキストを追加する
次の方法では、プラグインなしでWordPressの画像にテキストを追加する方法を示します。WordPressのカバーブロックを使用して、任意の画像を表示し、画像の上にテキストを入力できます。
この方法では、前の方法ほど多くのカスタマイズオプションはありませんが、WordPressプラグインをウェブサイトに追加したくない場合に画像にテキストを追加するのに役立ちます。
カバーブロックを投稿またはページに追加するには、WordPressブロックエディターのプラス（+）アイコンをクリックします。次に、「カバー」と入力し、表示されたらカバーブロックを選択します。
次に、「アップロード」または「メディアライブラリ」ボタンをクリックして、カバーの画像を選択します。
画像を選択したら、写真に直接入力して、見出しや説明を追加できます。
右側のパネルで、背景を固定または繰り返し表示するように設定することで、背景画像をカスタマイズできます。プレビュー上のマーカーをドラッグして、画像のフォーカスを変更することもできます。
さらに、オーバーレイ設定パネルで、画像にカラーまたはグラデーションのオーバーレイを選択できます。同じパネルで、オーバーレイの不透明度、パディング、および寸法を設定できます。
オーバーレイテキストをクリックするとテキストツールが開きます。ここで、テキストの色と背景色を変更したり、さまざまなフォントスタイルを試したりできます。
たとえば、文字の大文字と小文字、文字間隔、フォントサイズを変更することで、このラベル効果を作成できました。
カバーブロックの外観に満足したら、ページを発行または更新できます。ウェブサイトにアクセスすると、画像の上にテキストが表示されます。
WordPress画像へのテキスト追加に関するFAQ
この記事がWordPressで画像にテキストを追加する方法を学ぶのに役立ったことを願っています。さあ、SeedProdを自分で試してみませんか？
以下のWordPressチュートリアルも役立つかもしれません。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
