コピペOK【画像加工】画像に文字を重ねる♪画僧編集ソフトはいらない?

【wordpress】画像の上に文字を書く


画像の上に文字を重ねるのに
画像編集ソフトはいらない

知っているのと
知らないのとでは
大違いなんです♪

この画像、どうやって作成したと思いますか?

画像の上に文字を書いた画像を作成したい時、画像編集ソフトで作成していませんか?

文字が書いてある画像を表示させたいなぁという時、画像編集ソフトを立ち上げ、画像を加工して、画像をアップロードしてという作業をしていると思います。

時間がかかりますよね(;^_^A

実は、画像の上に文字を表示させて枠線を付けるのに画像編集ソフトは必要ありません(;^_^A

この記事では、画像編集ソフトを使用しないで、画像の中に文字を表示させる方法を紹介しています。

初心者向けという事で、仕組みを詳しく説明ではなく、簡単にコピペで使用できるようになっています。

そして、注意です。

ここではブロックエディタではなくクラシックエディタを使用した簡単な画像の装飾方法を紹介しています(^^)

この記事ではプラグインもつかいません。

CSSもつかいません。

「テキスト」エディタと「ビジュアル」エディタの切り替えが出来ればOKです。

CSSを使えば簡単にできますが、「CSSを使うのはちょっと敷居が高いよ」という方におすすめかなっと♪

基本操作は、下の画像の赤丸で囲った「テキスト」エディタをクリックして

私のコピペ文を張り付けた後に

「ビジュアル」をクリックして「ビジュアル」エディタに戻って、文章を加工して終了です♪

この動作は変わりません。

【wordpress】上に文字を書くための画像を準備

ここではこの画像を使って説明していきます。

何もない所で、使いたい画像を追加して表示させてください。

画面右上の手「テキスト」をクリックしてください。

その追加した画像の <img  と書かれている行をコピペしてきてほしいのです。

これを①とします。

もし枠線を付けるのなら、付けてからコピペしてください。

【wordpress】上に文字を書く前の画像

【wordpress】画像を枠線で囲んで装飾

こちらの記事で紹介していますので、よろしければどうぞ♪

>>>wordpress画像を囲み枠で装飾♪画像編集ソフトはいらない?

【wordpress】画像の上に文字を書くコピペ文の説明

<div style=”position: relative; display: inline-block;”>

この行の下から指定してある物が、一つのブロックとして扱われると設定しています。

親要素に当たります。

<div style=”position: absolute; top: 0px; left: 20px;”>
top: 0%;

画像の一番上から表示と指定しています。

数字を大きくすると、文字の表示位置が下がっていきます。

0でも記述しないとダメなんです(-_-;)

left: 20px;

右にどれだけ空間を開けて文字を表示させるかを指定しています。

数字を大きくすると、文字の表示位置が右にづれていきます。

こちらも0でも記述した方が無難です( ̄▽ ̄;)

【wordpress】画像の上に文字を書く例とコピペ文

文字が小さくて見ずらいですね(;^_^A

文字を記入するときは、通常通り、文字サイズや文字色など変更して書き込んでください。

【wordpress】画像の上に文字を書くコピペ文

ここに文字を書いてください

コピペ文はこれを張り付けただけではダメです。

①を2行目にはりつけて、初めて完成します。

*******コピペ文*********************************************

<div style=”position: relative; display: inline-block;”>

<div style=”position: absolute; top: 0%; left: 10%;”>

こちらに文字を記入します</div>
</div>

**********************************************************

☆【wordpress】画像の上に文字を表示♪の注意

 

【wordpress】文字揃えボタンは無視されます( ノД`)シクシク…

表示場所の指示の文字列を追加すれば、できるのですが・・・・

一番簡単なのは、空白で文字の位置を自分の好みの場所に設置することかなと思います。

コメントに希望をいただければ、文字列右寄せ~や中央よせ~の例とコピペ文を追加します。

【wordpress】画像の上に文字を表示♪コピペOKで画僧編集ソフトはいらない? まとめ

改行したときに、画像から文字が脱落するかもしれません。

そんな時は、取り消しボタンをクリックしてから、シフト+エンターキーで改行してみてください。

画像の切り抜きも、枠で囲むことも、画像編集ソフトを使わなくなって、すごく時間短縮になりました。

画像編集って時間がかかりますよね(;^_^A

皆さんの時間短縮につながれば幸いです♪

最後にもう1つ。

HTMLでコードを追加するだけでも画像の上に文字を表示させることが出来ます。

段落の背景に画像を表示させて使用する方法です。

この方法は下の記事で紹介しています♪

>>>ブログ装飾しましょ♪囲み枠&トリミング

この記事は、画像加工や囲み枠についての記事をまとめて紹介+追加方法の記事になります。

 HTMLのみで画像を枠で囲む方法は追加情報として記載しました(^^♪

 

/Decoration/TOOL/そらのまなびぶろぐ/THE THOR/AFEREIT/

 

NO IMAGE
最新情報をチェックしよう!