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; } 

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

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

完全にカスタムのページ設計を作成する自由が欲しい場合は、ページビルダープラグインが必要です。WordPressのページビルダープラグインの1つがSeedProdで、ウェブサイト全体の任意の画像の上にテキストを追加できます。

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

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

これで、SeedProd » 設定ページに移動して、

WordPress管理画面にキーを貼り付けることができます。ライセンスキーフィールドにキーを貼り付けます。「キーの確認」をクリックするだけです。

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

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

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

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

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

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

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

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

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

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

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

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

これらのセクションには、プレースホルダーのフルワイド背景画像と、その上に配置されたプレースホルダーテキストがあります。デフォルトの背景画像とテキストを自分のコンテンツに簡単に置き換えることができます。

左側のメニューでセクションタブをクリックします。

次に、ヒーローをクリック

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

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

マウスオーバー背景画像プレビューにゴミ箱アイコンが表示されるまで待ちます。その後、このアイコンをクリック

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

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

テキストブロックを選択するにはクリックします。そして、テキストエリアに、使用したいテキストを入力するだけです。

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

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

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

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

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

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

結論

WordPressで画像の上にテキストを追加する3つの方法のすべてです。簡単ですよね？自分に合ったスキルレベルとデザインの好みに合った方法を選びましょう。

さらに、WP Media Folderを使って、メディアファイルをプロのように整理、最適化、管理しましょう。混乱したライブラリに別れを告げる時が来ました！