画像の上に文字を書いた画像って、画像編集ソフトで作成しないと出来ないと思っていませんか？
そんなことないんです。
ブロックエディタだとブロックの背景に画像を表示させていますので文字を簡単に表示できるのです。
私は最近気づいてこの記事の修正をしていますｗｗｗ。
ただこの方法だと、ブロックいっぱいに画像が大きく表示されますので、画像サイズを変更しないで文字を上に書きたい場合は、記事後半のクラシックエディタ編を参考にしてみてください♪
またもや使う私のイラスト（笑）
右よせMサイズ文字
中央よせLサイズ文字
左よせXLサイズ文字
上の画像の様に画像の上に手書き風の文字を表示させると、まるで画像編集してあるように見えませんか？(￣▽￣;)
この記事では、画像編集ソフトを使用しないで、画像の中に文字を表示させる方法を紹介しています。
クラシックエディタを使用している方や、画像サイズを変えないで文字を上に書きたい方向けに記事後半でコードをコピペする方法の紹介もしています(^ ^)
【wordpress】画像の上に文字を重ねる♪ブロックエディタ編
画像を選択して表示させます。
画像をクリックするとメニューが表示されます。
赤の矢印のアイコンが文字入力になります。
普通にテキストの入力の時と同じように書いていけます。
文字のサイズは「S.M.L.XL」の中から選択してもいいですし、XLの上あたりにある丸に線を刺してあるアイコンをクリックして、自分でサイズをカスタマイズもできます。
＜ PR ＞
画面右側のお花タブ（設定）中の＜メディア設定＞
固定背景
スクロールしても、この画像は固定されているので動きませんwww。
繰り返し背景
文字〜
画面右側の白黒丸（スタイル）の＜メディア設定＞
デフォルトでオーバーレイの不透明度は５０％になっているみたいですね。
上の画像ではそのまま５０％にしてあります。
バンディングを縦も横も「６」変更にしてみました。
使用している画像が小さくなっているのわかりますか？
【wordpress】画像の上に文字を重ねる♪クラシックエディタ編
初心者向けという事で、仕組みを詳しく説明ではなく、簡単にコピペで使用できるようになっています。
この記事ではプラグインもつかいません。
CSSもつかいません。
クラシックエディタの場合は「テキスト」エディタと「ビジュアル」エディタの切り替えが出来ればOKです。
CSSを使えば簡単にできますが、「CSSを使うのはちょっと敷居が高いよ」という方におすすめかなっと♪
基本操作は、下の画像の赤丸で囲った「テキスト」エディタをクリックして
私のコピペ文を張り付けた後に
「ビジュアル」をクリックして「ビジュアル」エディタに戻って、文章を加工して終了です♪
この動作は変わりません。
クラシックブロックで作業してみてください♪
＜ PR ＞
ワードプレス【wordpress】上に文字を重ねる画像を準備
ここではこの画像を使って説明していきます。
何もない所で、使いたい画像を追加して表示させてください。
画面右上の手「テキスト」をクリックしてください。
その追加した画像の <img と書かれている行をコピペしてきてほしいのです。
これを①とします。
もし枠線を付けるのなら、付けてからコピペしてください。
【wordpress】画像を枠線で囲んで装飾
こちらの記事で紹介していますので、よろしければどうぞ♪
【wordpress】画像の上に文字を書くコピペ文の説明
この行の下から指定してある物が、一つのブロックとして扱われると設定しています。
親要素に当たります。
top: 0%;
画像の一番上から表示と指定しています。
数字を大きくすると、文字の表示位置が下がっていきます。
0でも記述しないとダメなんです(-_-;)
left: 20px;
右にどれだけ空間を開けて文字を表示させるかを指定しています。
数字を大きくすると、文字の表示位置が右にづれていきます。
こちらも0でも記述した方が無難です(￣▽￣;)
【wordpress】画像の上に文字を重ねるためのコピペ文
文字が小さくて見ずらいですね(;^_^A
文字を記入するときは、通常通り、文字サイズや文字色など変更して書き込んでください。
ここに文字を書いてください
コピペ文はこれを張り付けただけではダメです。
下のコピペ文の①の部分に、<img から始まら始まる画像のアドレスが来るようにコピペしてくだい。
*******コピペ文*********************************************
<div style=”position: relative; display: inline-block;”>
①
<div style=”position: absolute; top: 0%; left: 10%;”>
<p style=”text-align: center;”>こちらに文字を記入します</p>
</div></div>
☆【wordpress】画像の上に文字を重ねる♪文字の部分のコピペ文説明
text-align: center;
文字を中央揃えにする指定です。
text-align: left;
文字を左寄せにしたい時は、このコードに変更してください。
text-align: right;
文字を右寄せにしたい時は、このコードに変更してください。
改行したときに、画像から文字が脱落するかもしれません。
そんな時は、取り消しボタンをクリックしてから、シフト+エンターキーで改行してみてください。
【wordpress】画像の上に文字を重ねる♪コピペOKで画僧編集ソフトはいらない？ まとめ
この記事を読んでいる方は、どちらのエディタをつかっているのかな？
私はTHE THORでブロックエディタを使って記事を描くようになって、画像の切り抜きも、枠で囲むことも、画像編集ソフトを使わなくなって、すごく時間短縮になりました。
画像編集って時間がかかりますよね(;^_^A
皆さんの時間短縮につながれば幸いです♪
最後にもう１つ。
HTMLでコードを追加するだけでも画像の上に文字を表示させることが出来ます。
段落の背景に画像を表示させて使用する方法です。
これはブロックエディタでしようした方法になります。
クラシックエディタでの、この方法は下の記事で紹介しています♪
この記事は、画像加工や囲み枠についての記事をまとめて紹介+追加方法の記事になります。
HTMLのみで画像を枠で囲む方法は追加情報として記載しました(^^♪
