画像や文字に動きをつけたい場合、レイアウト枠を利用して動きのあるページを作成することができます。ここでは、レイアウト枠を作成して画像を挿入する方法と、レイアウト枠に動きをつける方法を紹介します。

※以下の画面はホームページ・ビルダー12のものですが、ホームページ・ビルダー13以降のバージョンでも、ほぼ同じ操作が可能です。

※「標準モード」の場合は、まずレイアウト枠を作成して、その中に部品 (画像や文字) を挿入することで画像や文字に動きを付けることができます。「どこでも配置モード」の場合は、以下のFAQを参照してください。

→「どこでも配置」モードで文字や画像に動きをつけたい

■操作

１ レイアウト枠の中に部品を挿入する

1. メニューバーから「挿入」→「レイアウト枠」を選択します。

   ※〔かんたん〕 の場合は、ナビメニューから「レイアウト部品の挿入」→「レイアウト枠」を選択します。

   「レイアウト枠」ダイアログが表示されます。

2. [OK] をクリックし、「レイアウト枠」ダイアログを閉じます。

   レイアウト枠がページ編集画面に挿入されます。必要に応じてレイアウト枠の位置と大きさを変更します。

   ※レイアウト枠の位置を変更するには、レイアウト枠にマウスポインタを近づけ、マウスポインタが十字の形状になったところで移動したい方向へマウスをドラッグします。

   

   ※レイアウト枠の大きさを変更するには、レイアウト枠の ■ ハンドルマークにマウスポインタをあわせドラッグで任意の大きさに変更します。

   

3. クリックでレイアウト枠を選択し、レイアウト枠内にカーソルが点滅していることを確認してください。この状態で、画像や文字を挿入します。

   

２ レイアウト枠に動きをつける

1. 動きをつけたいレイアウト枠をクリックして選択し、メニューバーから「編集」→「属性の変更」を選択します。

   ※この時にレイアウト枠の中の画像を選択してしまうと異なる属性が表示されてしまいます。レイアウト枠が選択されていることを必ず確認してください。(「どこでも配置モード」の場合は、動きをつけたい部品をクリックして、メニューバーから「編集」→「属性の変更」を選択します。)

   「レイアウト枠」 (または「レイアウト枠に含まれる画像」) ダイアログが表示されます。

2. [エフェクト] タブをクリックします。

   

3. [エフェクト] ではレイアウト枠の動きの種類を選択し、[パターン] では動く方向をそれぞれ選択します。ここでは例として [フェードイン] と [左から] を選択します。

   

4. 任意でスピードや繰り返しを設定することができます。

   ※[サンプル表示] ボタンをクリックすると、選択したエフェクトの動きを確認することができます。また、[サンプル表示] 欄は選択した「エフェクト」により変わりますが、「パターン」や「スピード」、「ループ」での変更内容は [サンプル表示] 欄では反映されません。

   

5. [OK] ボタンをクリックし、ダイアログを閉じます。
6. プレビュー画面で、動きを確認します。

◆補足

「レイアウト枠」とは、ダイナミック HTML の効果をかける対象となる四角い領域です。「ダイナミック HTML」とは、動きのあるページを作るための新しい技術です。これによって、従来の Java スクリプトやスタイルシート、イベントなどを利用して、HTML ファイルだけで動きのあるページを作成することができます。

■関連情報

→「どこでも配置モード」で文字や画像に動きをつけたい

→レイアウト枠の［エフェクト］の［フェードイン］や［フェードアウト］の動く向きを変更したい

→「どこでも配置モード」でエフェクトを設定するとエラーが表示される

→レイアウト枠の動き（エフェクト）を変更したい

▲ページの先頭へ戻る