このところ天気が不安定です。毎日のように「所により雷雨」が天気予報され、「それっ、洗濯物を取り入れ」と慌てふためく家人に、以前紹介した「私の cheat sheet」が役立っています。
軽いブラウザ Kinza(※1)を最小サイズで用い、モニターの右上隅に常時表示し、ここ奈良県の雨雲の様子を見ながら「そろそろ雨が来るぞ」と監視しています。
ただ画像そのものだけをお借りしているだけでは、「我が桜井市はどこ？」となるので、桜井市を含め奈良県の主な市（ついでに山も）を小さな点で表示することにしました。
雨雲画像と同サイズの画像に点を配置し、背景を透明にしてpng画像を作り、例えば
<div style="position:relative;"><img src="お借りした雨雲画像のurl" alt="雨雲" width="100%" min-width="420px">
<p><img style="position:absolute;top:0;right:0;" src="作ったpng" alt="都市、山" width="100%" min-width="420px"></p>
</div>
とします。
作成過程でちょっと困ったのは、市の位置を知るのに Google map を使ったのですが、雨雲画像の紀伊半島の形とに無視できないずれがあることです。
市の位置をプロットした画像を自由変形でゆがめ雨雲画像にフィットさせます。まぁこのぐらいは無断拝借させていただいているのですから、我慢することでしょう。
(※1) https://www.kinza.jp/download/
