先日から、ビオラ様のブログ（←クリック）、菜桜様のブログ（←クリック）などで、素晴らしいのを見せて貰っていました。
触発されましたよ。上の小さい画像をクリックすると、対応する大きな画像に変化させたかったのです。ランダムにクリックしてみて下さいね。変わるでしょう。やっと、やっと。
左から、アイビーゼラニューム、百日草２種、秋海棠です。
同じでなくても、近いのが出来たら嬉しいだろうなと思いました。それで、ネット検索して、ホームページ楽々講座を見つけて修正しました。http://www.salty1.com/rakuraku/index.html
上のサイトの080を元にさせて貰いました。HTMLは僅かしか分かりませんが、それでも出来ましたよ。嬉しいです～。
我流の修正です。ランダム拡大表示、お試しになりますか？。ＨＴＭＬが使えるブログなら、事前準備までは一緒で良いと思います。
Ａ）事前準備
- まず、ディスクトップ上に＜abcフォルダ＞を作って下さい。
- 上の080のソースを表示させて、＜test.html＞として、＜abcフォルダ＞に保存して下さい。
- ＜abcフォルダ＞内に＜images2フォルダ＞を作って、今回使う４つの画像ファイルを保存して下さい。
- メモ帳で＜test.html＞を開いて、あなた様の画像ファイル名に修正して下さい。
- （注意）最初に表示される大きな画像の、画像ファイル名も、忘れずに修正して上書き保存して下さい。
- ＜test.html＞をダブルクリックすると、ちゃんと表示しますか。
- OKなら、次の準備のために＜test.html＞をコピーして、＜test2.html＞を作って下さい。
Ｂ）記事作成・ブログ人用です。
- ブログ人ログイン：コントロールパネル→ファイル管理で＜images2フォルダ＞を作って画像を４枚アップします。
- ＜images2フォルダ＞の１枚目の画像を表示、ＵＲＬをコピーして、＜test2.html＞を開いて修正します。
- ＜images2フォルダ＞の２枚目、３枚目、４枚目の画像も同様にします。
- 小さなサムネイル画像は＜height="70"＞にしています。つまり、私の画像は大きさが不揃いだからです。
- 大きな画像は＜width="100%"＞にしています。これで表示幅１００％になります。％指定されると楽ですよ。
- ＨＴＭＬ編集画面にして、＜test2.html＞の＜centeｒ＞～＜/center＞間のプログラムを、コピーして貼り付けして下さい。これで小さな画像は、中央表示になります。
- 文章は適当に－－。どうそ、お試し下さいね。
＜記事の作成＞画面アイコン右から３つ目のアイコン：順序リストを初めて使いました。この機能も便利ですね～。簡単なはずのブログでもまだまだです～。
