【WordPress】画像の上に文字を表示させたい!

タイトル

webページで画像の上に文字が表示されてるヤツ。
WordPressでもできないの?

にう

秒でできるよ!
一緒にやってみよう!

ちょっとステキな画像の上に
エモい文章が書かれていると、
ときめきますよね。

これ、Wordpressなら

一瞬でできます!

WordPressで画像の上にテキストを載せる方法
  1. 画像を挿入(↑の画像は全幅配置)
  2. 「画像上にテキスト追加」アイコンを押して文字を入力
  3. 文字やオーバーレイ(背景)の設定を変更する

クライアントワークをしていると意外と訊かれるのが、「webページの画像の上に文字を置きたい」。

cssを書くことを考えれば、Wordpressの瞬殺たるや!です。

作業方法のスクリーンショットを以下に貼りますので、ぜひご参照ください!

なお、わたしが使用しているWordpressのテーマは「SWELLです。

他のテーマの場合はアイコンなどが異なりますのでご了承ください。

目次

WordPressで画像の上に文字を表示させる基本動作

WordPressなら簡単に画像の上に文字を表示させることができます。

STEP
「画像上にテキスト追加」アイコンをクリック
  1. 文字を表示させたい画像をクリック
  2. 「画像上にテキスト追加」アイコンをクリック
STEP
文字を入力する

「ブロックを選択するには「/」を入力」をクリックし、文字を入力します。

STEP
必要に応じて文字の装飾などを行う

ご自身の完成イメージに沿うよう、文字の装飾などを行いましょう。

作例

以下はSWELLを使用した場合の作例です。

他のテーマで同じ設定ができるかどうかの確認はしていませんのでご了承ください。

南禅寺の水路閣

あいうえお、
かきくけこ。

ブロックのスタイルに「方眼」を選択、文字を大きくした例

南禅寺の水路閣

オーバーレイ(文字が見やすくなるように、画像の上に重ねているシート)を虹色グラデーションに

南禅寺の水路閣
STEP
サンプル

あいうえおかきくけこ

さしすせそ

STEP
サンプル

あいうえおかきくけこ

さしすせそ

オーバーレイ(文字が見やすくなるように、画像の上に重ねているシート)を緑に変更

SWELLブロックの「ステップ」を追加

画像の上に文字を配置、色々と試してみて下さい!

画像の上に文字を配置することで、webサイトを彩るほか、画像サイズや文字の装飾を工夫すれば簡易バナーが作れますね。

ぜひ、色々と試してみて下さいね。

タイトル

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

お仕事情報や備忘録をまとめました。
少しでもお役に立てれば幸いです!

目次