う~ん、自分で作るのも難しいけど、説明するのはもっと難しい。 (うまくできるかなぁ~)
昨日のマーキー画像は背景画像に夜空の月、魔女を透過してマーキーで動かし、その上に雲とカボチャのの画像を重ねたものです。画像は下の4枚です。魔女は別々のものですが、便宜上背景画像に貼り付けました。 左の画像は縮小してあります。 背景画像はJPGです。(何でもいいです)500×700です。 黒色だけでも良かったのですが、月フォントもあったので。 繰り返したくなかったし、余分なタグも書きたくなかったので大きめのサイズにしました。 紫魔女のサイズは200×200ですが、HTMLで100×100にしました。 エンボス魔女も透過してあります。背景画像の上に飛ばす時は周りを透過しないと四角い枠をつけたまま飛ぶことになります。周りが背景色と同じ場合はその限りではありません。 上に重ねる画像も周りを透過します。透過した部分を魔女が飛びます。 透過をする時は透過する色を画像で使用していない色にし、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ブログ・マーキーです。 できましたね。最初、「<」がちょろちょろ出るので困り果てました。 背景画像はバラの写真です。 飛行機と手前に重ねる画像は透過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>
by mmi331
| 2009-10-21 22:48
| 画像加工
|
Comments(0)
|
Google
リンク集
メモ帳です
フォロー中のブログ
カテゴリ
全体 画像加工 音楽 ワード・エクセル ブログ html・css パソコン・周辺機器 デジカメ メール ソフト ページめくり 野菜と花 おでかけ ワード絵 加工手順 金魚 エラーとトラブル エクセル画 動画 手作り 未分類 以前の記事
検索
タグ
JTrim~2(276)
JTrim(260) JTrim~3(250) gifアニメ(231) オートシェイプ(227) ピクトベア(227) 見所・写真(141) ソフト(113) ペイント(100) ワード(99) CSS・HTML(85) パソコン(69) パソコントラブル(69) PhotoScape(59) マーキー(49) PhotoFiltre(35) トールペイント(31) フォント(30) 加工手順(20) 音楽(18) 最新のコメント
ブログパーツ
ファン
記事ランキング
ブログジャンル
画像一覧
|
ファン申請 |
||