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

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

この記事では、WordPressの画像の上にテキストを追加する3つの簡単な方法を見つけました。ブロックエディター、プラグイン、またはカスタムコードを使用することを好むかどうか。見つけましょう！

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

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

1。注意を引く

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

2。ユーザーエクスペリエンスを強化します

画像が自分で多くの価値を提供できることは事実ですが、キャプション、引用符、その他のテキストベースのコンテンツなど、それらの上にテキストを追加すると、さらに便利になります。さらに、ユーザーは画像のコンテキストと、それがコンテンツとどのように関連するかを理解できます。

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

また、画像自体を表示するのが困難なユーザーのアクセシビリティの向上にも役立ちます。テキストの代替品を提供することにより、より広い範囲のユーザーがコンテンツにアクセスできるようにすることができます。

4。SEOのブースト

画像キャプションまたはALTテキストに関連するキーワードを追加すると、 Webサイトの検索エンジンランキングの改善に。これは、検索エンジンがこの情報を使用してWebサイトのコンテンツを理解し、ユーザーの検索クエリにどの程度関連性があるかを判断するためです。

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

1。WordPressブロックエディターを使用します

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

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

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

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

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

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

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

2。CSSを使用します

テキストを追加する画像ブロックを選択します右側のサイドバーで、 [詳細なをクリックします。

追加のCSSクラスで、画像ブロックのカスタムクラスを追加します。

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

.custom-class {position：relative; } .custom-class p {position：absolute;トップ：50％;左：50％;変換：翻訳（-50％、-50％）;フォントサイズ：24px;色：#ffffff; Text-Shadow：2px 2px 2px＃000000; } 

上記のコードでは、 「カスタムクラス」を画像ブロックに追加したカスタムクラスに置き換えますまた、好みに合わせてフォントサイズ、色、その他のスタイリングオプションをカスタマイズすることもできます。

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

完全にカスタムページのデザインを自由に作成したい場合は、ページビルダープラグインが必要になります。 WordPress Page Builderプラグインの1つはSeedProdです。これにより、Webサイト全体に任意の画像の上にテキストを追加できます。

まず、 SeedProdプラグインをインストールしてアクティブにしますアクティブ化すると、ライセンスキーを入力する必要があります。 SeedProdアカウントにログインし [ダウンロード]をクリックします。

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

SeedProd»設定ページにアクセスして、このキーをWordPress管理エリアに貼り付けることができます。

ここに来たら、先に進み、キーをライセンスキーフィールドに貼り付けます。次に、キーを確認するだけでクリックする。

SeedProd»ランディングページに移動し、 [新しいランディングページの追加]。

その後、テンプレートを選択します。選択したシードプロッドテンプレートに関係なく、テンプレートのすべての部分をカスタマイズして、ウェブサイトとブランディングに完全に合わせています。

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

テンプレートを見つけたら、マウスをその上にホバリングします。プレビューアイコンをクリックできます。

このテンプレートがどのように見えるかに満足している場合は、先に進み、[このテンプレート]ボタンを選択してください。

ページ名で、ページの名前を入力します。

ページURLのテキストを編集します。

をクリックして、[ページ]ボタンの編集を開始します。これにより、SeedProdのドラッグアンドドロップエディターのテンプレートが開きます。

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

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

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

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

これらのセクションには、プレースホルダーのテキストが上部に追加されたプレースホルダー、完全な背景画像があります。デフォルトの背景画像とテキストを独自のコンテンツに置き換えるだけです。

左側のメニューの

[セクション]タブをクリックします次に、ヒーローをクリックして、ページに追加できる既製のヒーローセクションをすべて表示します。

先に進んで、このヒーローセクションをデザインに追加するには、このセクションを選択してください。

テンプレートのストックを独自の画像に置き換える場合は、

ストック画像をクリックして選択しますホバー背景画像のプレビューは、ゴミ箱が表示されるまでです。その後、先に進み、このアイコンをクリックしてプレースホルダー画像を削除できます。

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

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

クリックしてテキストブロックを選択します。次にテキスト領域、使用するテキストを入力するだけです。

SeedProdのヒーローテンプレートには、行動を促すボタンなどの追加のコンテンツがあります。

このコンテンツを変更する場合は、クリックしてブロックを選択し、SeedProdの左側のメニューに変更を加えます。

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

これを行うには、クリックしてブロックを選択し、 [ゴミ]アイコンをクリックします。

ページのデザインに満足している場合は、 [保存]ボタンをクリックしてください。

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

結論

これは、WordPressの画像の上にテキストを追加する3つの方法のすべてです。簡単ですよね？スキルレベルとデザインの好みに最適なアプローチを選択してください。

WP Media Folderを使用してProのようにメディアファイルを整理、最適化、管理します。乱雑なライブラリに別れを告げるのにふさわしい時期です！