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

 

 

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

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

記事のTOPに文字付きの画像を表示させたいなぁと思った時に使える、簡単な方法の紹介です。

画像の上に文字を書いた画像って、画像編集ソフトで作成しないと出来ないと思っていませんか?

そんなことないんです。

画像加工ソフトを持っていなかったり、使えなかい方でも出来る方法の紹介です(^^♪

というか画像加工ソフトを持っていても、この方法の方が、作成が楽です(笑)

私は画像編集ソフト使わなくなりました。

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

上の画像の様に画像の上に手書き風の文字を表示させると、まるで画像編集してあるようですよね( ̄▽ ̄;)

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

そして、注意です。

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

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

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%;”>

<p style=”text-align: center;”>こちらに文字を記入します</p>

</div></div>


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

<p style=”text-align: center;”>こちらに文字を記入します</p>

text-align: center;

文字を中央揃えにする指定です。

text-align: left;

文字を左寄せにしたい時は、このコードに変更してください。

text-align: right;

文字を右寄せにしたい時は、このコードに変更してください。

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

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

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

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

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

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

最後にもう1つ。

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

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

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

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

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

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

 

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

 

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

そら

プログラマーとして働いていたが結婚後を機に田舎に戻り、独学でHTML・Perlを勉強し自宅でWEBの仕事をはじめるも、アレルギー児の子育てで断念。子供の手が離れたのを機にWorldpressの勉強をしながらブログをはじめました。

 そらのまなびぶろぐ について 


そらのまなびぶろぐでは、wordpressの有料テーマ【THE THOR(ザ・トール)】を使用して収益化ブログの作り方を初心者向けに紹介しています。エディタの使い方、アドセンス申請に必要なページの書き方&作り方、ブログの装飾の方法までを紹介しています。