マーキー
う~ん、自分で作るのも難しいけど、説明するのはもっと難しい。 (うまくできるかなぁ~)
昨日のマーキー画像は背景画像に夜空の月、魔女を透過してマーキーで動かし、その上に雲とカボチャのの画像を重ねたものです。画像は下の4枚です。魔女は別々のものですが、便宜上背景画像に貼り付けました。d0048312_219391.gif
左の画像は縮小してあります。
背景画像はJPGです。(何でもいいです)500×700です。
黒色だけでも良かったのですが、月フォントもあったので。
繰り返したくなかったし、余分なタグも書きたくなかったので大きめのサイズにしました。

紫魔女のサイズは200×200ですが、HTMLで100×100にしました。
エンボス魔女も透過してあります。背景画像の上に飛ばす時は周りを透過しないと四角い枠をつけたまま飛ぶことになります。周りが背景色と同じ場合はその限りではありません。

d0048312_2110760.gif
上に重ねる画像も周りを透過します。透過した部分を魔女が飛びます。
透過をする時は透過する色を画像で使用していない色にし、jtrimやPhotoEditorの透過アイコンでクリックします。
透過アイコンです 透過アイコン

透過した画像は必ずgifで保存します。

下のタグはエキサイトブログで使用できる普通のタグです。gooブログでは特殊なタグを使うのでこのまま使うことは出来ません。
昨日のソースです。数値は画像によって違いますのでそれぞれ直します。

<div style="background-image:url(背景画像のURL)"><MARQUEE scrollAmount=5 behavior=alternate width="600"><MARQUEE scrollAmount=5
direction=up behavior=alternate width="100" height="200">マーキーで動かす透過画像1</MARQUEE>
<MARQUEE scrollAmount=7 direction=down behavior=alternate width="200" height="300">マーキーで動かす透過画像2</MARQUEE></marquee>
<div style="margin-top:-400px">上に重ねる透過画像</div></div>

さて、最初にこれをやったのは、ある、gooブログでビルと木の間をたしか、バスと飛行機が走っている画像を見たときです。(だいぶ前なのではっきりと覚えていません)
その方はtableタグを使って作成なさっていました。
このエキサイトブログではtableタグが使えないのでdivタグを使って工夫しました。
その時の画像です。2008年5月20日
そこで、これをgooブログで出来ないかと、がんばってみました。(gooブログはややこしくてずいぶん前にやめてしまいましたが、まだ残っていたのでためしてみました。
gooブログ・マーキーです。
できましたね。最初、「<」がちょろちょろ出るので困り果てました。

d0048312_21531486.jpg
背景画像はバラの写真です。
飛行機と手前に重ねる画像は透過gif画像です。
手前の画像は飛行機が通る部分以外を塗りつぶし、透過しました。

一番右側のバラだけ飛行機が手前を飛んでいます。これはなぜかというと、私のgooブログの横幅が600なのに対し、画像が500だからです。背景画像は余った分、リピートしていますので、左側のバラが右側に出てきたのです。一方、上に重ねる画像も500pxなので100px分右側が空いています。
この失敗画像のおかげで、どうなっているかが良くわかります。
重ねる画像の上余白をマイナスにしているのはマーキー(飛行機)の分だけ下に下がるので飛行機の分、上に上げて、画像をぴったり合わせるためです。
(飛行機も実際は別に作って透過しておきます)




gooブログで書いたタグです。


<div style="background-image:url(背景画像のURL)"><span style="font-size:0px;"><<marquee><img src="飛行機画像のURL"><</marquee></span><div style="margin-top:-186px"><img src="重ねる画像のURL"></div></div>

「gooブログ マーキー」で検索したら出てきたマーキー画像のソースを見て参考にさせていただきました。 gooブログで教えて下さっているサイトを見たほうが早いと思います

マーキータグについてはあちこちで説明がありますので検索してください。
makoさんのところにも説明があります。

23日訂正:肝心のマイナス(-)が抜けていました。
widthを指定すれば右側に余分な画像が出ませんでした。 10月23日 goo画像

<div style="background-image:url(背景画像のURL);width:500px"><span
style="font-size:0px;"><<marquee><img
src="飛行機画像のURL"><</marquee></span><div
style="margin-top:-186px"><img src="重ねる画像のURL"></div></div>
[PR]
by mmi331 | 2009-10-21 22:48 | 画像加工 | Comments(0)
<< CD 書き込みが~~~ 期日前投票 ・ ハロウィンマー... >>