９月１日〜１０日 整理整頓
今年の秋はやけに早くやってきたようだ。
太陽のギラギラはなくなり、天は高く、風は爽やか。蝉に替わって秋の虫たちの大合唱。
人間達は海から陸へ、運動会のシーズン。そういえばまもなくシドニーオリンピックだな〜
てな事を感じつつ、９月１日トップページを秋バージョンにリニューアル。
まづ、青空の背景画像（sora.jpg）を外して、ベージュの背景色（このページの色）に、
次に、マーキーで空に飛んでた飛行船を５連結の列車に変更、その後ろにポストマンが
引っ張られるデザインにする。勿論、ポストマンには mailto のリンクを張って、捕まえ
ればメールが送れるようにしておく。・・・何となく滑稽で、いいんでないかい？
これだけではいまいち「秋の感じ」が出ない。
ＰＣ内で画像を探していたら、メールソフト Outlook の Stationeryフォルダに anabnr2.
gif というのを見つけた。もみじや稲穂みたいなのがデザインされていて、とても良い。
これを列車の上に張り付けて、紅葉した山あいを蒸気機関車が走るイメージで完成。
ＨＰのトップページはロード時間を考えると、テキストを中心にレイアウトするのが良い
のだが、これがなかなか難しい。色んな所に行ってそのようなトップページを見ると、
どうしても事務的な感じになってしまっている。
遊び感覚を持たせながら、ＨＰ全体のイメージをセンス良く表現しようとすれば、どうし
ても画像を使わざるを得ない。となると、これからは画像処理の方法を勉強しよう。
いかにして電話回線の中を速く走らせるか、「花子２」だけに頼っていてはいけないな。
リンクを張った文字の下に入る下線を消す方法を知った。
<A HREF="リンク先ファイル名" STYLE="text-decoration:none;">〜</A>
と、赤文字のタグを挿入すれば消える。これだけですっきり見やすくなった。
これまでＨＰを思いつくまま作ってきて、さてリニューアルをと思って愕然！
サーバー内は htmlや gifや jpgファイルで一杯。何が何やらさっぱり分からなくなって
いる。htmlはまだしも、画像はサーバー内では見れないので整理のしようがない。
やっぱり最初から各コーナー毎にフォルダにしてまとめてアップしとけばよかった。
しかし、初めの頃はパスの書き方が良く掴めてなくて、面倒くさいのでそのままサーバー
に放り込んでしまっていた。これが今となって更に面倒くさいことになってしまった。
全く！ 小さい頃からの性分はま〜だ直ってない。作ることだけ夢中になって周りは散ら
かり放題。よく母親に怒られたっけ。アレッ、嫁さんにも・・・。
このままではその内サーバーの容量オーバーでブザーが鳴りそう。早く何とかしないと。
９月２４日 プルダウン式クイックリンクの作成
以前「焙煎室直売」のページで JavaScript を使って注文フォームを作ろうとしたが、
失敗したことがある。（項目の"注文フォーム２"を参照）
あの時頭の中は、ジャバジャバになって、Java の文字を見るのもイヤになっていた。
しかし、この日記を書き進めるうちに見出し項目が多くなってきて、上のフレームに入り
きれなくなってきた。何とかひとまとめに出来ないかと思案の上、プルダウンメニューを
作ることにする。
普通のフォームタグの <SELECT> では動かないことは分かっていた。やっぱりもう一度
Java を勉強するしかない。
９月中旬から例によって「ホームページ辞典」とにらめっこするが、オリンピックも始っ
た事もあり、なかなか前へ進まない。やわらちゃんや野村が「金」を取ってもそれどころ
じゃなかったけど、篠原の無念の「銀」は、こっちがうまく行かないこともあり、無性に
腹が立った。思わず「あの審判はなに人で、なに者んやー！ なに見てるんだ！！」
と叫んでしまったが、あとのまつりらしい。
辞典の中で「選択されている項目を調べたい」というページがあり、セレクトタグを使っ
たサンプルがあった。これをアレンジして書いたスクリプトは以下の通り、
<HEAD>
<SCRIPT language="JavaScript">
function change(){
switch(document.form1.nikkimenu.selectedindex){
case 0:location.href="nikki2.htm#domain";break;
case 1:location.href="nikki2.htm#soft";break;
case 2:location.href="nikki2.htm#gif";break;
--＜中略＞--
}
document.form1.target="down";
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1" onClick="change()">
<SELECT NAME="nikkimenu">
<OPTION>マイドメイン</OPTION>
<OPTION>使用ソフト</OPTION>
<OPTION>ＧＩＦ画像</OPTION>
--＜中略＞--
</SELECT>
<INPUT TYPE="button" VALUE="" onClick="change()">
</FORM>
</BODY>
ココには略して３っ分しか書いていないが、実際には２５項目あったので、ふっ〜大変。
がっ、しかし、現実は甘くない！ オリンピックと一緒。
selectedindex というのに惹かれて苦労したのに・・・。
気を取り直して３日ほど色々試してもうまく行かなかったけど、２４日に<INPUT TYPE>
タグを使って「別のフレームを操作したい」というページがあった。
前述のスクリプトでは
switch(document.form1.nikkimenu.selectedindex){
case 0:location.href="nikki2.htm#domain";break;
＜中略＞
document.form1.target="down";
と、switch で、読み込み先と、値 を切り替えようとした物だったが、今度は、
parent.down.location=document.form1.nikkimenu.value;
と、いきなり読み込み先に、value で 値 を求めようという物だ。実に簡単明瞭。
value は<OPTION VALUE="リンク先">で指定すればいいわけだ。非常に気に入った。
スクリプトは以下の通り。
<HEAD>
<SCRIPT language="JavaScript">
function change(){
parent.down.location=document.form1.nikkimenu.value;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<SELECT NAME="nikkimenu">
<OPTION VALUE="nikki2.htm#domain">マイドメイン</OPTION>
<OPTION VALUE="nikki2.htm#soft">使用ソフト</OPTION>
<OPTION VALUE="nikki2.htm#gif">ＧＩＦ画像</OPTION>
＜以下略＞
</SELECT>
<INPUT TYPE="button" VALUE="" onClick="change()">
</FORM>
</BODY>
テストは大成功、しばらく拍子抜け状態。暫くして喜びがこみ上げてきた。
スクリプトはたったの２行、前回のは２８行も書いてうまく行かなかった。セレクトタグ
にこだわってしまって、ずいぶん遠回りした。もっと頭を柔らかくしないと。
更に、ボタンを省略してワンクリックでリンクできるように、 onClick="change()" を
FORM NAME タグの中に入れ込んでみた。<FORM NAME="form1" onClick="change()">
そしたら、メビウスの WIN98 ではうまく動くのだが、FMVの WIN95 ではスクリプトエラー
となって、動かないことが分かった。
仕方ないので、今のところはボタン付きの２クリックで行くしかない。
外に何か、書き方があるのかもな〜。
|