ブログパーツに画像を重ね合わせてフレームを付ける

ブログパーツのフォントを揃える | Moonmile Solutions Blog
http://www.moonmile.net/blog/archives/1525

の続き(あとで、目次風にまとめておく予定)。

文字の重ね合わせの時に、相対座標だけを使って、「position: relative」を使っていたのですが、

画像を使わずにCSSだけで角を丸くする方法 – [ホームページ作成] All About
http://allabout.co.jp/gm/gc/24004/

20101115_01.jpg

を見ると、親タグで「relative」を指定しておいて、子タグに「absolute」を指定すると、座標指定が楽ですね。

そんな訳で、フレーム画像を重ね合わせるときには、

<div id=”bijo-linux” style=”position: relative;“>

  <div id=”bijo-image” style=”position: absolute; top: 0px; left: 0px;”><img src=”画像” /></div>

  <div id=”bijo-frame” style=”position: absolute; top: 0px; left: 0px;”><img src=”フレーム画像” /></div>

  <div id=”bijo-clock” style=”position: absolute; top: 60px; left: 0px;”>00:00:00</div>

  <div id=”bijo-copylight” style=”position: absolute; top: 100px; left: 0px;”>00:00:00</div>

</div>

のような形で、親からの相対座標を付ければOKと。

フレームには透過PNGを使えば、こんな風にフレームをつけることができます。

<サンプル>

# 右下の白い部分は、透過されているのではなく、白になっています。
# これは、内枠を透過させて下の画像(女性の画像)を表示させるためで、、、このあたり、フレームの形には、ちょっと限界があるけど、まあ、Javascript オンリーで、簡易的なものであればこれまで出来るということで。

所詮、画像の呼び出しは、サーバーに逐一問い合わせをしているので、PHP呼出しにして加工した画像を返す、という技にすれば、フレームの問題は解決できそうです。

あるいは、Flash で作るとか。

カテゴリー: 開発, ブログパーツ パーマリンク