縦横比が同じない画像でロールオーバー効果を挿入する方法について紹介します
以下のように、いろんな場面で撮り貯めたオリジナル写真1から4があり、それぞれ縦横比が一定でない写真がある場合のケースです。
写真1(640 X 480) | 写真2(480 X 640) | 写真3(640 X 425) | 写真4(387 X 640) |
□ 全ての写真の高さを360ピクセルにしたサイズ変更を行う。
写真1(480 X 360) | 写真2(270 X 360) |
写真3(542 X 360) | 写真4(217 X 360) |
□ 高さをそろえたときに、最大の幅となる写真の幅をメモします。
□ ホームページビルダーを起動し、「スタート」 > 「ページを作成する」 > 「白紙ページ」 > 「標準モード」 > 「OK」で、白紙ページが表示されます。
□ 白紙ページに表を挿入します。:4行2列にし、「最初の行を見出しセルにする」のチェックを外します。
□ 表の近くでクリックし、表を選択します。表をページの真ん中に移します。
□ 表を選択した状態で右クリックし、「属性の変更」を選択します。
□ 「表の列」のタブを開きます。「列1」を選択します。「セルの幅」に136ピクセルを設定します。
□ 同じく「列2」を選択します。「水平位置揃え」を「左揃え」に、「セルの幅」を542に設定します。
□ 以下のような表が表示されます。
□ 列2のセルを統合します。
□ 表の列1に写真1を挿入します。写真は高さ360ピクセルでサイズ調整を行った写真を使います。このあと、サムネイル用のサイズに変更します。
□ 写真1のサムネイルができあがりです。
□ 同じように写真2~4のサムネイルも追加します。
□ 列2には写真1(高さ360ピクセルに調整した写真)を挿入します。
□ 挿入した写真1を選択した状態で、「ページ/ソース」タブをクリックします。
□ 写真1の記述が黄色の蛍光ペンでマークされています。そこでは写真の幅 (width) と高さ (height) が記述されていますが、「width="480"」の部分を削除します。
□ 「ページ編集」に戻ります。
□ 写真1のサムネイルを選択した状態で、「挿入」から「ロールオーバー効果」を選択します。「画像のロールオーバー効果ウィザード(通常時の画像の指定)」が表示されます。「次へ」をクリックします。
□ 「(マウスポインタが上にきたときの画像の指定)」で「効果の選択」から、「ボタン化」を選びます。「次へ」をクリックします。
□ リンクの設定をしないので「次へ」をクリックします。
□ 「(他の場所の画像の交換)」で、「追加」をクリックします。
□ 列2にある拡大写真を交換することになるので、それに相当する画像を左側から選択します。選択された画像は右側の「ページのプレビュー」では反転されて表示されますので、正しく画像を選択しているかどうかを確認します。
□ 「(効果の指定)」画面で、入れ替わった時に表示される画像を指定します。この場合は写真1(高さ360にサイズ調整したもの)を使います。
□ 「画像のロールオーバー効果ウィザード」の画面に戻るので、「完了」をクリックします。
□ 写真2~4についても同じようにロールオーバー効果を設定します。
□ プレビューで動作を確認します。
□ ブラウザにて動作を確認します。