HTMLで画像に画像を重ねました
ホームページの更新をちょっと行いました、自分の為のメモに何をしたか書きたいと思います。
またHTMLをやられている方の参考にも
https://www.sawasaki.biz/html/main.html
こちらのページなのですが、もともとは手間を省いて
画像加工ソフトで作った画像を背景として
これですね
画像編集ソフトでもともとは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をつかい画像をもう一度配置しなおします。
これで見た目は同じですが、より便利にこのページを編集することが出来るようになりました。
コメント