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

画像の上にテキストを追加することは、コンテンツやウェブサイトの視覚的な魅力を高めるための一般的な手法です。また、画像をより有益で魅力的なものにするための素晴らしい方法です。.

この記事では、WordPressで画像の上にテキストを追加する3つの簡単な方法を紹介します。ブロックエディター、プラグイン、カスタムコードのいずれを使用する場合でも、好みの方法でテキストを追加できます。詳細については、こちらをご覧ください。

画像の上部にテキストを追加することが重要な理由

メソッドに進む前に、画像の上にテキストを追加することが重要な理由を知っておく必要があります。.

1. 注意を引く

ユーザーがコンテンツをすばやくスクロールしている場合、画像を追加するだけでは注意を引き付けるのに十分ではない可能性があります。そのため、画像の上にテキストを追加して、ユーザーの注意を引き付け、メッセージをより効果的に伝える必要があります。.

2. ユーザーエクスペリエンスの向上

画像はそれ自体で多くの価値を提供できますが、キャプション、引用、またはその他のテキストベースのコンテンツなどのテキストを画像の上に重ねることで、さらに便利になります。また、ユーザーは画像のコンテキストとコンテンツとの関連性を理解できます。.

3. アクセシビリティの向上

画像自体の表示に問題があるユーザーへのアクセシビリティを向上させることもできます。代替テキストを提供することで、より幅広いユーザーにコンテンツを利用できるようにすることができます。.

4. SEOの強化

画像キャプションや代替テキストに適切なキーワードを追加することで、 ウェブサイトの検索エンジンランキングを向上させる。これは、検索エンジンがこの情報を使用してウェブサイトのコンテンツを理解し、ユーザーの検索クエリとの関連性を判断するためです。

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

1. WordPressブロックエディターを使用する

まず、画像の上にテキストを追加するページまたは投稿に移動します。.

カバー を選択 して、画像の上にテキストを書きます。

その後、画面上に表示され始めます。デフォルトの画像が表示されますが、必要に応じて画像を変更できます。.

デフォルトの画像をカスタム画像に置き換えることもできます。 置換ボタン をクリックして、画像をアップロードするか、メディアライブラリから選択します。 .

このようになります。次に、画像の上にテキストを書き込むことができます。.

テキストをダブルクリックすると、テキストの編集オプションが表示されます。 必要に応じて、サイズ、色などを調整できます。

最後に、 更新ボタンをクリックします。 新しい投稿やページを追加した場合は、公開ボタンをクリックします。

2. CSSを使用する

WordPressブロックエディターを開き、画像ブロックを選択します。 テキストを追加したい場所で、右側のサイドバーで、 詳細 タブをクリックします。

追加CSSクラス フィールドに、画像ブロックのカスタムクラスを追加します。

変更を保存 して、ページまたは投稿を公開または更新します。

.custom-class { position: relative; } .custom-class p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #ffffff; text-shadow: 2px 2px 2px #000000; } 

上記のコードで、 置き換えてください 「custom-class。フォントサイズ、色、その他のスタイル設定オプションも、お好みに合わせてカスタマイズできます。

3. WordPressプラグインを使用する

完全にカスタマイズ可能なページデザインを作成したい場合は、ページビルダープラグインが必要です。WordPressのページビルダープラグインの1つであるSeedProdを使用すると、ウェブサイト全体で任意の画像の上にテキストを追加できます。

まず、 をインストールして有効化します 。有効化後、ライセンスキーを入力する必要があります。SeedProd ログインし アカウントに クリックします を ダウンロード」 。

完了したら、 をコピーします にキー 「ライセンス 。

に移動して、WordPressの管理画面にこのキーを貼り付けてください SeedProd » 設定ページ。

ページに移動したら、 ライセンスキーの欄にキーを貼り付けてください だけです 「キーを確認」をクリックする。

に移動し SeedProd » ランディングページ 、 「新しいランディングページを追加」。

その後、テンプレートを選択します。どのSeedProdテンプレートを選択しても、テンプレートのすべての部分をカスタマイズして、Webサイトとブランディングに完全に適合させることができます。

ただし、空白のキャンバスから始めたい場合は、 空白のテンプレートをクリックします。

テンプレートを見つけたら、マウスカーソルをその上に重ねてください。すると、 プレビューアイコンをクリック。

このテンプレートのデザインが気に入ったら、「 このテンプレートを選択」ボタン。

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

自動生成されたURLを変更する場合は、 ページURL フィールドのテキストを編集します。

をクリックしてください 保存してページの編集を開始」 。すると、SeedProdのドラッグ＆ドロップエディターでテンプレートが開きます。

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

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

すると、SeedProdの左側のメニューに、そのブロックまたはセクションをカスタマイズするために使用できるすべての設定が表示されます。

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

これらのセクションには、プレースホルダーとなる全幅の背景画像と、その上に追加されたプレースホルダーテキストが含まれています。デフォルトの背景画像とテキストを、ご自身のコンテンツに置き換えるだけで済みます。

「セクション」タブをクリックしてください 左側のメニューにある

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

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

ストック画像をクリックして選択してください テンプレートのストック画像を自分の画像に置き換えたい場合は、

カーソルを合わせる 背景画像の と、ゴミ箱アイコンが表示されます。 このアイコンをクリックする 、プレースホルダー画像を削除できます。

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

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

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

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

これらのコンテンツを変更したい場合は、該当する ブロックをクリックして選択し 、SeedProdの左側のメニューで変更を行ってください。

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

これを行うには、 ブロックを選択するためにクリックします そして ゴミ箱のアイコンをクリックします。

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

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

結論

以上が、WordPressで画像の上にテキストを追加する3つの方法です。簡単でしょう？ご自身のスキルレベルやデザインの好みに合った方法をお選びください。

を使えば、メディアファイルをプロのように整理、最適化、管理できます WP Media Folder。もう、ごちゃごちゃしたライブラリとはお別れです！