画像の上に文字を重ねるのに
画像編集ソフトはいらない
知っているのと
知らないのとでは
大違い♪
記事のTOPに文字付きの画像を表示させたいなぁと思った時に使える、簡単な方法の紹介です。
画像の上に文字を書いた画像って、画像編集ソフトで作成しないと出来ないと思っていませんか？
そんなことないんです。
画像加工ソフトを持っていなかったり、使えない方でも出来るコピペで出来る簡単な方法の紹介です(^^♪
というか画像加工ソフトを持っていても、コピペで出来るこの方法の方が楽です(笑)
私は「クリスタ」で画像をよく編集していたのですが、今ではほとんどクリスタを使わなくなりました(￣▽￣;)
この記事では、画像編集ソフトを使用しないで、画像の中に文字を表示させる方法を紹介しています。
上の画像の様に画像の上に手書き風の文字を表示させると、まるで画像編集してあるように見えませんか？(￣▽￣;)
初心者向けという事で、仕組みを詳しく説明ではなく、簡単にコピペで使用できるようになっています。
そして、注意です。
ここではブロックエディタではなくクラシックエディタを使用した簡単な画像の装飾方法から紹介していきます♪
ブロックエディタでの使用法は記事後半になります(￣▽￣;)
この記事ではプラグインもつかいません。
CSSもつかいません。
クラシックエディタの場合は「テキスト」エディタと「ビジュアル」エディタの切り替えが出来ればOKです。
CSSを使えば簡単にできますが、「CSSを使うのはちょっと敷居が高いよ」という方におすすめかなっと♪
基本操作は、下の画像の赤丸で囲った「テキスト」エディタをクリックして
私のコピペ文を張り付けた後に
「ビジュアル」をクリックして「ビジュアル」エディタに戻って、文章を加工して終了です♪
この動作は変わりません。
ワードプレス【wordpress】上に文字を重ねる画像を準備
ここではこの画像を使って説明していきます。
何もない所で、使いたい画像を追加して表示させてください。
画面右上の手「テキスト」をクリックしてください。
その追加した画像の <img と書かれている行をコピペしてきてほしいのです。
これを①とします。
もし枠線を付けるのなら、付けてからコピペしてください。
【wordpress】画像を枠線で囲んで装飾
こちらの記事で紹介していますので、よろしければどうぞ♪
>>>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】画像の上に文字を重ねる♪ブロックエディタ編
ただいま工事中です。
少々お待ちくださいませ(￣▽￣;)
【wordpress】画像の上に文字を重ねる♪コピペOKで画僧編集ソフトはいらない？ まとめ
改行したときに、画像から文字が脱落するかもしれません。
そんな時は、取り消しボタンをクリックしてから、シフト+エンターキーで改行してみてください。
画像の切り抜きも、枠で囲むことも、画像編集ソフトを使わなくなって、すごく時間短縮になりました。
画像編集って時間がかかりますよね(;^_^A
皆さんの時間短縮につながれば幸いです♪
最後にもう１つ。
HTMLでコードを追加するだけでも画像の上に文字を表示させることが出来ます。
段落の背景に画像を表示させて使用する方法です。
この方法は下の記事で紹介しています♪
>>>ブログ装飾しましょ♪囲み枠＆トリミング
この記事は、画像加工や囲み枠についての記事をまとめて紹介+追加方法の記事になります。
HTMLのみで画像を枠で囲む方法は追加情報として記載しました(^^♪