ホームページビルダーで小さなウインドウを表示させる方法

写真画像などを、指定したサイズの小さなウインドウ（小窓）で表示させる方法を教えてください。

ご質問にお答えします。

写真のサムネイルをクリックすると、別の小さなウインドウで、拡大写真が表示されるといったものがあると思います。

新しいウインドウではなく、特定サイズの小さなウインドウを表示させる方法を、これからご紹介していきます。

手順①

ビルダーでページを開いたら、リンクを設定したい画像を選択して、右クリック。

表示されるメニューから、「イベントの設定」をクリック。

手順②

イベントの編集画面が表示されますので、まず、左側の「イベント」からいちばん上の「OnClick」を選びます。

次に、右側の「アクション」から「ウインドウ」の中の、「新しいウインドウを開き、指定したURLへジャンプします。」を選びます。

そして、下部の「登録」をクリックしましょう。

そうしますと、パラメータの設定画面が出てきますので、「URL」にリンク先を入力します。

そして、OKをクリックします。

手順③

次に、イベント・アクションと書かれたウインドウの中に、表示されている「OnClick　　_HpbJumpURLinNewWindow(”);」を選択し、「スクリプト」をクリックします。

右上の画面から、

　　function _HpbJumpURLinNewWindow(url) { if (url != ”) {
　　window.open(url, ‘_blank’); }}

をクリックすると、その下のウインドウの表示が切り替わります。

ここでウインドウのサイズを指定します。

　　window.open(url, ‘_blank’);

の部分を、

　　window.open(url, ‘_blank’, ‘width=400,height=300′);

に変更します。（上記をコピー＆貼り付けで変更してください）

　
width=400　　…　　ウインドウの横幅を表します。

height=300　　…　　ウインドウの縦幅を表します。

※サイズは自由に変更してください。単位はピクセルです。
　

変更したら、OKをクリックして閉じ、イベントの編集画面もOKで閉じます。

これで設定完了です。

保存をして、プレビューで確認してみてくださいね。

ちなみに、スクロールバーをつけたいときは、以下のようにします。

　　window.open(url, ‘_blank’, ‘width=400,height=300,scrollbars=yes’);

※複数個所同様に小さなウインドウを表示させるときは、手順①・手順②までを設定するだけでOKです。

※文字に設定する際は、あらかじめダミーのリンク（リンク先が#）を設定してある文字にカーソルを合わせて設定を行なってください。

皆さんも、是非試してみてください。