「ロールオーバー」解説しましょ。 [Koto]
またまた「ロールオーバー」のおはなし。
前回の記事から挑戦してみたいというコメントを沢山いただきましたので、
ここはひとつ、画像付きで「ロールオーバー」作成方法を紹介してみましょう。
なるべく、むずかしい専門用語などは使わずに解説してみようと思っているので
良かったら参考に作ってみてはいかがでしょうか。
（偉そうに言っているが最近覚えたばかり・・・スイマセン）
１．用意するものはこの2点だけ。↓
・作って遊びたい写真を2枚
これは、いつも記事を作るページのフォームにアップロードしておく
ここで、画像を記事に貼り付けておけば写真のファイル名が確認できる
（最初に表示する写真×1枚、ポインタを重ねたときに表示する写真×1枚）
※画像のファイル名 ：本来は画像のURLという。URLとは、「（主に）http://www」で始まるアドレスのこと。
・作成するための指示フォーム
↓このページに行き、下に表示したフォームをコピーして、作成中の記事に貼り付ける。
【簡単ロールオーバー】
http://www3.ocn.ne.jp/~uri-o313/yumesato/tag/4/rollover.htm
↑この中に★、■、▲という記号を発見してもらえただろうか。
この記号のある場所に、それぞれ画像をはめ込めばロールオーバーは完成する。
記号の場所は画像の目的別になっているので、順番や見え方をよく考えてから貼り付けよう。
★＝最初に表示する画像
■＝マウスポインタを重ねた時の画像
▲＝マウスポインタが離れた後の画像（基本的に【★画像】と同じで良い）
２．素材が揃ったところで早速、貼り付けしてみましょう。
今回、私が用意したサンプル写真は、こちらの2枚。
こちらが最初に表示しておく写真 （これを【画像★】とする）
この写真を選択してファイル名を確認するとこのように表示される。【画像★】
上のファイル名の中で必要な部分は1部分しかない。水色の部分は削除して、残っている部分だけを使う。【画像★】
そしてこちらが、マウスポインタを重ねたときに表示する写真 （これを【画像■】とする）
この写真を選択してファイル名を確認するとこのように表示される。【画像■】
同じく水色の部分は削除し、残っている部分だけを使う。【画像■】
ここで、余計なものが入っていたり、欠けていたりすると失敗してしまうので
ちょっと慎重にいきましょう！
なお、【画像▲】は、【画像★】と同様なのでコピーして使いましょう。
それでは、各箇所に抜き出したファイル名を貼って見よう、
【画像★】は★のところ、【画像■】は■のところというふうに。
※フォームにある記号はあくまで目印なので、画像のファイル名を貼り付けたら削除しておくこと。
↓貼り付けが完了するとこの様な表示になる。（よーく見てほしい）
貼り付けしたところだけ、赤い線を引いてみた。このようになっている。
ここまでくればもう完成！。おめでとうございます。
プレビューしてみましょう！
そして、こちらが完成した画像。マウスポインタを重ねると・・・
さて、いかがでしょう？
うまく出来そうな気がしてくるでしょう。（笑）
ちなみに、今回作成しているブログはso-netのもので、もしかすると他のブログでは同じように
出来ない可能性もあるでしょう。
こんなおもしろい「ロールオーバー」でたくさん遊んでみていただきたい。
それでは、今日はここまで。
【ちょっと言わせて・・・】
以前、書いた記事の追記をしたいと思う。
薬害肝炎訴訟原告の福田衣里子さんが次期衆院選長崎２区に民主党公認として
立候補することを正式に表明した。いやーついにきたか。
揶揄や批判する方もたくさんいらっしゃると思うが、
私は今回の立候補に肯定的だ。
弱者切捨ての悪政を、少しでも変える原動力にそして
国民が政治離れをしている現状を、転換させるきっかけになってくれれば良いと思う。
彼女はまだ政治の素人。だからこそ望みもあるのではないだろうか。
勝手な意見で恐縮だが・・・
http://www.unicef.or.jp/code-p/index.htm
http://www.unicef.or.jp/special/0705/index.html
前回の記事から挑戦してみたいというコメントを沢山いただきましたので、
ここはひとつ、画像付きで「ロールオーバー」作成方法を紹介してみましょう。
なるべく、むずかしい専門用語などは使わずに解説してみようと思っているので
良かったら参考に作ってみてはいかがでしょうか。
（偉そうに言っているが最近覚えたばかり・・・スイマセン）
１．用意するものはこの2点だけ。↓
・作って遊びたい写真を2枚
これは、いつも記事を作るページのフォームにアップロードしておく
ここで、画像を記事に貼り付けておけば写真のファイル名が確認できる
（最初に表示する写真×1枚、ポインタを重ねたときに表示する写真×1枚）
※画像のファイル名 ：本来は画像のURLという。URLとは、「（主に）http://www」で始まるアドレスのこと。
・作成するための指示フォーム
↓このページに行き、下に表示したフォームをコピーして、作成中の記事に貼り付ける。
【簡単ロールオーバー】
http://www3.ocn.ne.jp/~uri-o313/yumesato/tag/4/rollover.htm
↑この中に★、■、▲という記号を発見してもらえただろうか。
この記号のある場所に、それぞれ画像をはめ込めばロールオーバーは完成する。
記号の場所は画像の目的別になっているので、順番や見え方をよく考えてから貼り付けよう。
★＝最初に表示する画像
■＝マウスポインタを重ねた時の画像
▲＝マウスポインタが離れた後の画像（基本的に【★画像】と同じで良い）
２．素材が揃ったところで早速、貼り付けしてみましょう。
今回、私が用意したサンプル写真は、こちらの2枚。
こちらが最初に表示しておく写真 （これを【画像★】とする）
この写真を選択してファイル名を確認するとこのように表示される。【画像★】
上のファイル名の中で必要な部分は1部分しかない。水色の部分は削除して、残っている部分だけを使う。【画像★】
そしてこちらが、マウスポインタを重ねたときに表示する写真 （これを【画像■】とする）
この写真を選択してファイル名を確認するとこのように表示される。【画像■】
同じく水色の部分は削除し、残っている部分だけを使う。【画像■】
ここで、余計なものが入っていたり、欠けていたりすると失敗してしまうので
ちょっと慎重にいきましょう！
なお、【画像▲】は、【画像★】と同様なのでコピーして使いましょう。
それでは、各箇所に抜き出したファイル名を貼って見よう、
【画像★】は★のところ、【画像■】は■のところというふうに。
※フォームにある記号はあくまで目印なので、画像のファイル名を貼り付けたら削除しておくこと。
↓貼り付けが完了するとこの様な表示になる。（よーく見てほしい）
貼り付けしたところだけ、赤い線を引いてみた。このようになっている。
ここまでくればもう完成！。おめでとうございます。
プレビューしてみましょう！
そして、こちらが完成した画像。マウスポインタを重ねると・・・
さて、いかがでしょう？
うまく出来そうな気がしてくるでしょう。（笑）
ちなみに、今回作成しているブログはso-netのもので、もしかすると他のブログでは同じように
出来ない可能性もあるでしょう。
こんなおもしろい「ロールオーバー」でたくさん遊んでみていただきたい。
それでは、今日はここまで。
【ちょっと言わせて・・・】
以前、書いた記事の追記をしたいと思う。
薬害肝炎訴訟原告の福田衣里子さんが次期衆院選長崎２区に民主党公認として
立候補することを正式に表明した。いやーついにきたか。
揶揄や批判する方もたくさんいらっしゃると思うが、
私は今回の立候補に肯定的だ。
弱者切捨ての悪政を、少しでも変える原動力にそして
国民が政治離れをしている現状を、転換させるきっかけになってくれれば良いと思う。
彼女はまだ政治の素人。だからこそ望みもあるのではないだろうか。
勝手な意見で恐縮だが・・・
http://www.unicef.or.jp/code-p/index.htm
http://www.unicef.or.jp/special/0705/index.html
まだまだPC初心者で、深く遊べるところまで行って
ませんが、これ参考にして、遊んでみますｗ
by ラブ (2008-09-20 13:55)
全身丸見えの、とりあえず隠れたバナナくんがとってもキュートですね！ (´▽｀)
by ふじくろ (2008-09-20 14:10)
ふじくろさん、いつもありがとうございます。
そうなんですよ。とりあえずってところが微笑ましいでしょ。（笑）
ラブさん、
コメントありがとうございます。これからもよろしくお願いします。
PCは使えば使うほど覚えますよ。
by f-design (2008-09-20 14:25)
いろいろ使えそうですね＾＾
楽しみにしています。
by Urban_Wolf (2008-09-20 18:44)
前回のレビューのロールオーバーは試したのですが失敗に終わりましたが今回のレビューで何がダメだったのかが解り、完璧です。ありがとうございますm(__)m
早速、遊んでみますのでよろしくねん(^_-)-☆
by vivian (2008-09-20 19:08)
こんばんわ☆
ロールオーバー成功しました。
ありがとうございました＾＾
早速使わせてもらってます♪
by qoo2qoo (2008-09-20 23:35)
初めまして。
この方法、今度ぜひ使ってみたいです。
サンプルに選んだ写真、nice!です ^^
by mau-mauu (2008-09-21 05:07)
わかりやすい解説で嬉しいです♪
今度やってみます。
by ぎーこ (2008-09-21 09:40)
mau-mauuさん、ぎーこさんコメントありがとうございます。楽しいブログ作りにお役立て下さい。他の方も成功したとのご報告を頂いております。私も初心者ですがなんとかなりましたので、やってみてください。また、よかったら遊びに来てくださいね。
by f-design (2008-09-21 09:55)
説明よくわかりました。
出来たらまた記事にしたいと思います。
by chi- (2008-09-21 18:44)
ロールオーバーを試してみようと思いつつ、仕事いそがしいし、写真撮ってるし、RAW現像でピクチャースタイル研究はじめたし・・・
ピクチャースタイル研究はRAW現像比較をロールオーバーで試してみたいと思います
by bebe (2008-09-22 06:55)
chi-さんこんにちは。記事を楽しみにしていますね。chiさんのブログは楽しいのでチェックしに行っちゃいます！
by f-design (2008-09-22 07:13)
bebeさん、こんにちは。RAW現像比較をロールオーバーでやるのはいいですね。見てみたいです。bebeさんのブログはほんと勉強になります。
オーディオのページも楽しいですね。昨日見ました。私もオーディオ好きでしたが、今はスペースの問題で小さいシステムを選んで鑑賞しております。
あっ、でもbebeほど詳しくないので・・・ただのミーハーです。スピーカーを見ると癒される変なヤツです（笑）
by f-design (2008-09-22 07:18)
おかげさまでロールオーバーよくわかりました
また遊びによってください
我が家のオーディオ機材は、すっかり眠りについております
by bebe (2008-09-23 19:14)
わお！！気に入っていただけて嬉しいです！
ロールオーバーのこと、よくわかりました！！
とりあえずこういうものにとても弱いのですが、頑張ってみます！
けれど、画像のURLの出し方がわからないんですよね～＾＾；；
スミマセン；；
by アーガイル (2008-10-27 09:13)
はじめまして（*^_^*）
シンプルエディタでのロールオーバーの貼り方で悩んでいました。
一発解決です(*^^)v
有難うございます☆
by La_vbl_kok (2009-06-24 22:56)