ホームページビルダーの標準モードで、画像を動くようにする

 ホームページビルダーのどこでも配置モードで、

 画像を動くようにした記事は、「http://aozora60.at.webry.info/201603/article_35.html」に掲載した。

 どこでも配置モードだと、中央配置を自動でできないので、標準モードで、同様のことができないか試してみた。

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

 ここでは、レイアウト枠を作成して画像を挿入する方法と、レイアウト枠に動きをつける方法を紹介します。

※「標準モード」の場合は、まずレイアウト枠を作成して、その中に部品 (画像や文字) を挿入することで画像や文字に動きを付けることができる。


■操作

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

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

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

「レイアウト枠」ダイアログが表示されます。
[OK] をクリックし、「レイアウト枠」ダイアログを閉じます。

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

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

画像


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

画像


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

画像


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

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

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

「レイアウト枠」 (または「レイアウト枠に含まれる画像」) ダイアログが表示されます。
[エフェクト] タブをクリックします。

画像


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

画像


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

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

画像


[OK] ボタンをクリックし、ダイアログを閉じます。

プレビュー画面で、動きを確認します。

※なお、画像をスクロールさせた場合、レイアウト枠と同じ高さの位置に、別のレイアウト枠で、動きのないものを置くと、スクロールさせた画像は、その画像の裏を移動する。

 試してみたページは、「http://www.jcmo.zaq.ne.jp/ffbje405/lioutwaku.html」です。

 通常の画像に、スクロール画像を重ねると、通常の画像の上を移動する。

 通常の画像の裏側を通したいときは、まず、スクロール画像を作成してから、同じ行の位置に、エフェクトなしのレイアウト枠を作成して、その中に、通常の画像を挿入しておけば、その画像の裏を通ってくれる。要は、後で挿入したレイアウト枠が、レイアウト上、上になる。なお、重なり方の順序を変えることもできる。


画像


 上にあるレイアウトが、一番前になる(ここでは、Layer4)。



※画像をスクロールさせるような場合、背景が白っぽくないと、gif化し、透明化した場合、画像の縁の白さが目立つので、できるだけ、白っぽい背景の上を移動させると良い。

 但し、画像のみのgif画像であれば、透明化しないため、背景が濃い色でも気にならないようです。

※レイアウト枠は、表示位置が固定(上から、左からの位置決めによって)されているので、結果的にどのように表示されるかは、注意が必要です。要は、中央配置という概念が効かなくなる。





この記事へのコメント