無料ブログはココログ

« Acronis true Image V9の復元(リストア)性能について | トップページ | WindowsXPからWindows Vistaを見ようとすると見えない(LAN接続において) »

2008年3月31日 (月)

ホームページビルダーで、小さなウインドウあるいは「小窓」の作り方について

ホームページビルダーで、小さなウインドウというか「小窓」を作る必要があり、ウェブで作り方を探したところ、下記のサイトが大変参考になりました。ここで私自身の覚え書きのために、また私自身の補足を加え、図入の作り方を掲載します。

ホームページ・ビルダー使い方。ホームページ・ビルダーの裏技・小技&テクニック。リンク先を小さいウィンドウの設定方法。
http://keiriman.net/shoshinsha-jissen/link5.html

1.まずhtmlファイルの中で、「小窓」を出したい「文字列」を選択して右クリックします。表示されたメニューから「リンクの挿入(L)」を選択します。ここの場合はタチツボスミレという文字列に「小窓」を付けることにします。
リンクの「属性」ダイアログの「ファイルへ」タブを選択して「ファイル名(N)」の欄に「Javascript:void(0)」と入力します。下図



2.入力後、その下にある「イベント(E)」ボタンをクリックし、「イベントの編集」ダイアログを表示します。下図。



3.「イベントの編集」ダイアログの「イベント(V)」から「OnClick」を選択し、「アクション(C)」の「ウィンドウ」項目をダブルクリックします。



4.さらに、「新しいウィンドウを開き、指定したURLへジャンプします」をダブルクリックし、「パラメータの指定」ダイアログを表示させます。



5.「パラメータの指定」ダイアログの「参照(B)」ボタンをクリックし、小さいウィンドウで開くhtmlページを選択し、OKボタンをクリックします(あらかじめ、「小窓」用のhtmlファイルを作っておきます。ここではタチツボスミレの画像を作りました)



6. 「イベントの編集」画面で「イベント」と「アクション」の各欄が、上の操作の通り設定されているか確認し、「OK」ボタンを押します。



7.リンクの「属性」ダイアログも「OK」ボタンをクリックして閉じてください。
「プレビュー」画面で、タチツボスミレのところをクリックしますと、通常のリンクのようにリンク先が新しい「小さいウィンドウ」で開かれればひとまず設定は完了ということになります。ただここではまだ「ウインドウサイズ」は大きいままです。




8.タチツボスミレと書いてあるhtmlファイル(小窓のhtmlファイルではなくリンク元のhtmlファイルです)の、「HTML ソース」画面を開けてください。
・ <head>内に → window.open(url,'_blank') ←というスクリプトが作成されていますので見つけてください。



9.この場所に「半角英数」で修正します。
・window.open(url,'_blank','width=300,height=450') と修正してください。
 ※ 数字は、画像のサイズに合わせると良いようです。
・修正が完了したら「プレビュー」画面で見る前に保存して下さい。保存する前に確認をするとスクリプトエラーになってしまい正常に作動しません。



10.プレビュー画面で、タチツボスミレの文字列をクリックしますと、小さくなったウインドウで、タチツボスミレの画像が出ます。一応これで完成です。戻るときは、小さいウインドウの右上にある×印をクリックすればよいのですが、ちょっと凝った作り方としまして、「閉じる」ボタンを付けてみることにします。



11.「ウィンドウを閉じるボタンを設置する」設定について
「小窓」のhtmlファイルの画面を表示させます。画像の下でカーソルを点滅させます。挿入→フォームと入力部品→プッシュボタン→一般ボタンを選択して下さい。



12.プッシュボタンの「属性」ダイアログが表示されたら「ボタンに表示するラベル(L)」欄にボタン上に表示される名前を入力します(「閉じる」など)。そして「イベント(E)」ボタンをクリックします。



13.「イベントの編集」ダイアログが出ます。「イベントの編集」ダイアログの「イベント(V)」欄で「OnClick」を選択します。「スクリプト(R)」欄に
「window.close()」と半角英数で入力後、「登録(A)」ボタンをクリックします。登録内容が確認できたら「OK」ボタンを押します。



14.「小窓」htmlの画像の下に、「閉じる」ボタンが出来ています。「中央揃え」をクリックしますと、画像の遥か右に「閉じる」ボタンが表示されますが、問題ありません。



15.タチツボスミレという文字列のあるほうの「HTMLソース」を開きます。赤矢印のところが先程は、height=450となっていましたが、「閉じる」ボタンが見えるようにするため、height=520にしてみました。保存します。


16.タチツボスミレと書いてある画面のプレビュー画面を出して、タチツボスミレの文字列をクリックしますと、「閉じる」ボタンが中央に配置されたタチツボスミレの画像が出て完成です。「閉じる」ボタンを押してみて戻るかどうか確認してみましょう。

2009年7月19日追記

上記のようなやりかたで作成した小窓がウェブ上でクリックしても開かなくなってしまいました。
考えられることは、パソコンを買い換えてデータを新パソコンに移した後に起こったことなので、それが原因ではないか、ということです。

このページのスクリプトでエラーが発生しました。
エラー  ')'がありません

というもので、下図が出ました。

Error_3  

例によって、ウェブ上を検索しましたら、「ソースを見て、JavaScriptで書かれているところを削除して、新しく書き換えればよい」との記事を発見し、その通りやりましたら直りました。
下の図が問題の箇所です。これを削除して、新たに上に書いた通りやり直しましたらうまくいきました。

Java_script_no_kasyo

« Acronis true Image V9の復元(リストア)性能について | トップページ | WindowsXPからWindows Vistaを見ようとすると見えない(LAN接続において) »

パソコン・インターネット」カテゴリの記事

コメント

このブログに初めて遊びに来ました。
(哲さんと言う名前が気にいったので)
説明がすごく分かりやすいですね!初めは「HPで小窓を作る方法」から。大変参考になりました。分かりやすくて(画面サイズが大きいのがGood!)、ヤル気を出させます。早速作ってみました。今度は同じページにいくつかのサイズの違う小窓を作る方法を教えて下さい。
これからも度々覗きますね!止めないで続けてください。

Akiraさん こんばんは

コメントどうも有り難うございます。
大変嬉しく拝見致しました。

この小窓の作り方は、最初に書きましたが、私のオリジナル
なものではなくて、人様のサイトで教えて貰って、それを図
解しただけのものなので、あまり大きな顔は出来ないんです
(^^ゞ

私はパソコンが大好きな単なる素人ですが、自分のPC上で
いろんな問題にぶつかり、それが解決した時には自分の
覚え書きのためもあって、書き綴っております。

Akiraさんの励ましに元気づけられました。有り難うござい
ます。

はじめまして今日は!
おかげ様にホームページに小窓を作る事が出来ました。有難うございました。上級のテクニックを取得した気分です。
ところで、新たに教えて頂きたいのですが・・・。
メインのページを閉じても小窓も閉じるようにしたいのですが方法を教えてください。

参考になりました。
ありがとうございました。

コメントを書く

(ウェブ上には掲載しません)

« Acronis true Image V9の復元(リストア)性能について | トップページ | WindowsXPからWindows Vistaを見ようとすると見えない(LAN接続において) »

2017年9月
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30