HTMLで画像に画像を重ねました

ホームページの更新をちょっと行いました、自分の為のメモに何をしたか書きたいと思います。

またHTMLをやられている方の参考にも

https://www.sawasaki.biz/html/main.html

こちらのページなのですが、もともとは手間を省いて

画像加工ソフトで作った画像を背景として

inside.jpg

これですね

画像編集ソフトでもともとは5つのレイヤーを重ねて、一つの背景として表示しておりました

お知らせの本文以外はこのフォントが使いたかったため、文字は画像にしてあります。

そしてお知らせの下に

<p style="position: relative;">

<span class="blue" style="position: absolute; top: 465px; left: 435px; width: 420px;">
ここにお知らせの内容<br><br>
</span>
<img src="../img/inside.jpg" width="960" height="582" alt="inside"/>
</p>

としていました。

しかし、ある思い付きから画像を分けることに(^^)/

初めはそこまで考えてはいませんでしたが・・・そのまま分けた方が早いやんということで

画像を

とPNGの画像に分け

同じように

<p style="position: relative;">
<span style="position: absolute; top: 40px; left: 17px; ">
<img src="../img/description.png" />
</span>
<span style="position: absolute; top: 428px; left: 370px; ">
<img src="../img/notice.png" />
</span>
<span class="blue" style="position: absolute; top: 465px; left: 435px; width: 420px;">
ここにお知らせの内容<br><br>
</span>
<img src="../img/inside.jpg" width="960" height="582" alt="inside"/>
</p>

position: relativeをつかい画像をもう一度配置しなおします。

これで見た目は同じですが、より便利にこのページを編集することが出来るようになりました。

この記事は続きます