画像の上に文字を重ねて書く方法ご希望の方が居られるようなんで
アップしてみます。
アメブロで記事を書くときに
写真を記事に貼り付けてHTMLタグ表示で見ると
①
<a href="https://stat.ameba.jp/user_images/20200418/15/enaji2/03/26/j/o0800053314745414929.jpg"><img src="https://stat.ameba.jp/user_images/20200418/15/enaji2/03/26/j/o0800053314745414929.jpg" alt="1" border="0" /></a>
上のような感じになっています。
その写真のタグの下に、下記②の文字の下<p style のところから
７行下の </p> までをコピーして自分の記事のHTML表示の所で、貼り付ける。タグ非表示のところ出はダメです。
②
<p style="position: relative;">
<img src="https://stat.ameba.jp/user_images/20200418/15/enaji2/03/26/j/t02200147_0800053314745414929.jpg" alt="1" border="0" />
<span style="position: absolute; top: 0px; left: 30px; width: 145px;">
<font size="3"><b><font color="#FFFFFF">
ジャーマンアイリス
</font></b></font>
</span></p>
ここの上までをコピー
①の赤部分をコピーして②の赤部分と取り換える
青の文字を好みの文言に交換
top: 0px; left: 30px; width: 145px 文字の位置
font size="3" フォントの位置
font color="#FFFFFF" FFFFFFは白 白だとバックが白のところでは分からないので他の色でやった後しろにした方が良い。
こんな感じでやると下記のようになると思います。
ファイヤーフォックスで書いていますが、一応クローム・Egg・Braveで
正常に表示するのは一応確認しています。
ジャーマンアイリス
ジャーマンアイリス
GIFアニメに文字を入れてみました。 これだと画像に文字入れしてもあまり変化ないので
灯篭GIFアニメ
ちょっと色が悪くて見づらいかもしれませんが、下の画像と分離された感じがしませんか。
灯篭GIFアニメ