• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / WordPress / WordPressで画像の上に文字を重ねる方法

WordPressで画像の上に文字を重ねる方法

最終更新日:2021年10月6日

この記事では、WordPressで記事内に挿入した画像の上に文字を重ねる方法を解説します。

目次 非表示
1 WordPressで画像の上に文字を重ねるには?
1.1 文字の位置を変更して画像の上に持ってくる
2 WordPressで画像の上に文字を重ねる手順を画像付きで解説
2.1 Classicエディター
3 画像の上に文字を重ねるWordPressプラグインはある?

WordPressで画像の上に文字を重ねるには?

まず画像と画像の上に重ねる文字を決めます。

今回は以下の画像に「きつね」という文字を重ねてみます。

まずは画像に文字を重ねた結果をご覧ください。

きつね

考え方としては、次の2種類があるかと思います。

  1. 文字の背景として画像をしていする
  2. 文字の位置を変更して画像の上に持ってくる

汎用性の高さから2番の「文字の位置を変更して画像の上に持ってくる」がおすすめです。

画像の上に文字を重ねるための仕組みを簡単に説明します。

文字の位置を変更して画像の上に持ってくる

チェック
仕組みを理解するには、HTMLとCSSの知識が必要となります。方法だけ知りたいという方はこちらをご覧ください。

まず先ほど見せた文字を重ねた画像は、WordPressのテキストエディター上でどうなっているのかご確認ください。

<div style="position:relative;display:inline-block;">
<div><img src="https://fox-wp.com/wp-content/uploads/2020/04/fox.jpg" alt="" width="720" height="480" class="aligncenter size-full wp-image-7358" /></div>
<div style="position:absolute;top:50%;left:46%;color:white;font-size:30px;">きつね</div>
</div>

簡潔にHTMLを解説すると、次のようなものになります。

  • 1行目のコード:画像と文字を囲むためのもの
  • 2行目のコード:画像
  • 3行目のコード:文字
  • 4行目のコード:画像と文字を囲むためのもの

ポイントは、3行目のコードでpositionプロパティの値にabsoluteを指定していることです。

positionプロパティの値にabsoluteを指定することで、topプロパティやleftプロパティで自由に位置を指定することができるようになります。

コピペ用のコード

<div style="position:relative;display:inline-block;">
<div>ここにエディターの「メディアを追加」より画像を追加してください。</div>
<div style="position:absolute;top:xx%;left:xx%;color:white;font-size:xxpx;">ここに画像に重ねたい文字を入力してください。</div>
</div>
  • top:xx%;(xxを数値を変えることで画像の上部からの位置を指定できます。)
  • left:xx%;(xxを数値を変えることで画像の左端からの位置を指定できます。)
  • color:white;(画像に重ねる文字の色を指定できます。)
  • font-size:xxpx;(xxを数値を変えることで画像に重ねる文字の大きさを指定できます。)
チェック
topとleftは文字の左上が基準となります。うまく調整してください。

WordPressで画像の上に文字を重ねる手順を画像付きで解説

ここでは、GutenbergエディターとClassicエディターに分けて、画像の上に文字を重ねる手順を解説していきます。

TIPS
Gutenbergエディターは後で追記予定

Classicエディター

記事の編集画面を開いて下さい。

そして、テキストエディターを選択します。

先ほど、紹介したコピペ用のコードを貼り付けます。

「ここにエディターの「メディアを追加」より画像を追加してください。」の文字を削除します。

2行目の

と

の間にカーソルを合わせて、「メディアを追加」をクリックします。

文字を重ねたい画像を選んで、挿入してください。

先ほどのカーソルを合わせた位置に画像が挿入されたことを確認してください。

「ここに画像に重ねたい文字を入力してください。」という文字を画像に重ねたい文字に変えてください。

「top」「left」「color」「font-size」の値をお好みに合わせて、変更してください。

修正作業が終わったら、プレジューで画像に文字が重なっているか確認してください。

画像の上に文字を重ねるWordPressプラグインはある?

Bonway Image Overlayで画像の上に文字を重ねることができるみたいです。

注意
過去1年間更新されておらず、WordPressバージョン5の互換性が確認されていません。

カテゴリー:WordPress

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル
Previous Post: « WordPressのコメント欄は表示・非表示どちらにすべき?メリットとデメリットを解説
Next Post: ネームサーバーを変更せずにアクセスするレンタルサーバーを変更する方法 »

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
レビューを見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressでおすすめのバックアッププラグイン5選
  • WordPressのPHP設定を変更する方法(php.ini)
  • WordPressでおすすめの画像圧縮プラグイン5選
  • WordPressの投稿編集画面でその投稿を表示する方法
  • WordPressの管理画面に再利用ブロックの管理を追加する方法

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2023 FOXWP All rights reserved.