元気いっぱいの9・7・4歳の3人の子どもたち。 なんでそうする。なんでそうなる。 笑えるトホホな行動を集めていきます。
 この絵のように、クリックすると動く絵の作り方を紹介しま〜す。  まず、動く絵を作っちゃおう♪の記事を参考に、『Giam』というフリーソフトを使います。  使い方は前に書いたけど、 ■のどちらかに、画像ファイルをドラッグ＆ドロップ。 この中に持っていって入れちゃいます。 変更したいコマを選び、■のところでそのコマを表示したい時間を指定。 100で1秒間 表示されます。 ■はプレビュー。 どんな風に動くか確認。 で、今回は■の 繰り返しセット をしません。 チェックボックスをクリックして、チェックを外します。  これで、表示されると1回だけ動く絵になったので 『ファイル』 → 『名前をつけて保存』 または フロッピーマークのボタンで保存。 <img src="最初に表示する画像URL" onClick="this.src='動く絵のURL'"> これで、クリックするたびに動く絵を表示。 クリックするたびに1回だけ動いてくれます。＾＾ |
↓このランキングボタン とか 一昨日の記事の『動く一太』のように、動く絵を作っちゃいましょう♪
 まず、無料でダウンロードできる『Giam』というソフトをインストールします。 ソフト作者（古溝 剛さん）のページの下の方、インストーラ版ダウンロードからダウンロード。 giam207.exe ができるので、それをダブルクリックするとインストールできます。＾＾ で、インストールすると、ショートカットができますね。 開いてみると、こんなの↓  このピンクの○のどちらかに、好きな画像ファイルをドラッグ＆ドロップするだけでOKです。＾＾ JPEG （写真で使う拡張子） GIF （イラストでよく使う拡張子） BMP （windowsのペイントで使う拡張子） どの画像ファイルでもOK♪ 例えば、この3つのファイルを入れてみます。
 ファイル名は連番にしておくと、まとめて入れても順番に並んでくれます。 1つずつだと、後で入れた画像が前に入ります。 上のハサミマークで切り取ったり、並び替えもOK♪ ピンクの○のところを押すと、プレビュー。 今の動きが分かります。＾＾  調整はこちら。 ピンクの□のところが調整したいコマです。（今は全部選んでます） ピンクの○のウエイトで、1コマの時間を指定。 1/100秒単位で指定できます。（今は100で1秒です） これで、『ファイル』 → 『名前をつけて保存』 または フロッピーマークのボタンで保存。 お好きな名前でどうぞ。＾＾  ↑こんなのが出てきますが、そのまま『OK』でいいです。 で、こんなのができました。↓  こうやって書くと長いけど、画像をここに入れて、時間の調整だけで完成♪ 他にも、背景の絵を固定したりいろいろできるんだけどね。  |
ブログ記事の小技で紹介したタグを
簡単に作れるものを作ってみました。 ここに入れるとうまく動かなかったので、他のファイルを作ってここにはめてみました。 直接そのファイルを見るなら waza.html をクリックしてください。 『表示する文字』に好きな言葉を入れ、文字サイズや色などを選んでください。 『表示例』を見て、気に入ったら下のタグをコピー。 自分のブログに貼れます。＾＾ さーて、確認はしたけど、ちゃんと動くかな。  よかったら使ってやってくださいませ〜。  |
好評だったので、第3弾いっちゃいま〜す♪
小技集をまとめて見るならここをクリック。 赤字部分を好きなように変えてください。＾＾  触ると写真が変わります。 ムクドリの子育て。＾＾おうち日和のかぁかぁさんのところで紹介されていたワザです。＾＾ <img src="最初の画像URL" onMouseOver="this.src='触った時の画像URL'" onMouseOut="this.src='最初の画像URL'"> ↑改行されているように見えるけど、空白は半角だけです。 字などを横に並べたい。いろいろ方法はあるけど、とりあえず表の作り方で。
枠線をつけてみると、こんな感じ。
<table> <tr> <td>1-1</td> <td>1-2</td> </tr> <tr> <td>2-1</td> <td>2-2</td> </tr> </table> ちょっとややこしいけど、こうなってます。 <table> と </table>・・・この挟んだ部分が表。 <tr> と </tr>・・・この挟んだ部分が1つの段。 <td> と </td>・・・この挟んだ部分が1マス。 段や列は増やしたり減らしたりOK♪ ＜＞の外は、空白ありでも なしでも 改行してもOKです。＾＾ クリックするとメッセージを表示↓この絵をクリックすると・・  <img src="画像URL" onClick="alert('好きな言葉')"> 好きな言葉は、半角の\nを入れると改行できます。＾＾ ん〜、どんなワザを載せればいいか悩みます。（＞＜） ↓いつも応援ありがとうございます♪ |
昨日の点滅はIE（インターネットエクスプローラー）では点滅しませんね。
 ブラウザとかバージョンによって、効き目なしとか見え方が違うのがあるんですけど、難しい。（＞＜） 他の方法で点滅させるには、ちょっと長くなるのでパスしときます。 さて、今日はちょっとお遊び♪ onMouseOver (カーソルが上に乗ったら) onMouseOut （カーソルが離れたら） を使ってみます。 この四角を触ってみて。<div style="○○" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='transparent'">と</div>で挟めばOK。 style="○○"は、周りの四角の指定。昨日書いたので省略。 "this.style.backgroundColor='yellow'" この、スタイルの、背景の色＝「黄色」 の意味。 transparent は、透明です。 ＝の後ろは" "で挟むけど、" "の中で同じものを使えないので、色の名前には ' 'を使っています。＾＾ 下の絵も触ってみて。 う〜ん・・アップにすると粗いわ。 これは画像に onMouseOver と onMouseOut をつけてみました。＾＾ <img src="**"> (**は画像のURL) 画像はこんな感じで書かれています。 他にもいろいろついてたりしますけど。 <img src="**" onMouseOver="this.style.width='200px'" onMouseOut="this.style.width='68px'"> 半角だけ空白を入れて書いていきます。 "this.style.width='200px'" この、スタイルの、横幅＝「200ｐｘ」 と、してみました。＾＾ カーソルが離れると、元の68ｐｘを指定しています。 <img〜の最後が/>なら、/より前に入れます。 下の赤い字を触ってみて。ここね♪ <span style="color:#FF0000" onMouseOver="this.style.fontSize='400%'" onMouseOut="this.style.fontSize='100%'">ここね♪</span> "this.style.fontSize='400%'" この、スタイルの、文字の大きさ＝「400％」 こんなこともできます。＾＾ <marquee><span style="font-size:large;" onMouseOver="this.innerHTML='きゃー！逃げろ！'" onMouseOut="this.innerHTML='ふう・・'">触ってみて♪</span></marquee> "this.innerHTML='きゃー！逃げろ！'" この、中身＝「きゃー！逃げろ！」 文字の色を変えるなら、this.style.color="#000000"。 いろいろ遊べます♪ ↓いつも応援ありがとうございます♪ |
