ホームページ上で、写真を次々と表示させることをスライドショーと言います。これについて紹介します。
こちらをクリックするとスライドショーの表示例1、表示例2をご覧いただけます。
スライドショーを作成するページは、HTML4.0 フォーマットで作成されていること。
XHTML 1.0 で作成されたページ上のスライドショーは、Internet Explorer 8 の <標準表示> では、スライドの入替りの動きが表示されません。 <互換表示> にしないとスライドの入替りは表示できない現象が確認されております(2010年6月24日現在)。HTML 4.0 で作成することをお薦めします。(なお、XHTML 1.0 で作成してしまった場合の回避方法は、XHTML 1.0 で作成した場合の回避方法を参照ください。)
HTML 4.0 フォーマットでのページ作成を行うには、「ツール」 から 「オプション」 を選択し、「ファイル」 タブを開きます。<新規ファイルを作成する場合のフォーマット> を <HTML 4.0> にセットし、「適用」 と 「OK」 ボタンをクリックします。
スライドショーのページが完成した後は、上の設定を戻しておくこと(参照:ホームページ・ビルダーの初期設定、ファイル・タブ)。
① スライドショーを挿入するページを開きます。
② 「挿入」 から <画像の効果> を選び <スライドショー> をクリックします。
「スタンダードモード」の場合
ナビメニューから「写真や画像の挿入」→「スライドショー形式」を選択します。
③ 左側の領域から、挿入したい写真が含まれているフォルダを選択します。
④ サムネイルにしたい写真を 1つずつクリックして選択します。
写真を複数選択するには
写真を複数選択するには、[Ctrl] キーを押しながら選択します。
いったん選択した写真を外すには
いったん選択した写真をサムネイルから削除するには、削除したい写真をクリックして選択を解除します。
⑤ 写真を選択順に並べ替えましょう。[並べ替え] の横の▼をクリックし、[選択順] を選択します。
⑥ 写真の選択が完了したら、[次へ] ボタンをクリックします。
⑦ [スライド枠の位置と大きさ]、[スライドの動き]、[効果] の項目を設定して、「次へ」 ボタンをクリックします。
⑧ ボタンをクリックで選び、[選択] ボタンをクリックします。[選ばれたボタン] が選択したものに変わったことを確認します。
⑨ [プレビュー] ボタンをクリックします。Web ブラウザが起動し、スライドショーのプレビューを確認することができます。
⑩ これでよければ 「完了」 ボタンをクリックします。指定された絶対座標位置にスライドショーが配置されます。
スライドショーの位置を編集するには
スライドショーはレイアウト枠を使用してページに挿入されます。レイアウト枠はページの左上を基点としたピクセル単位で、絶対座標として配置されます。このため中央揃いはもとより、閲覧するPC画面によって、さまざまに見えてしまう難点があります。
以下は、作成されたスライドショーを中央ぞろえにする方法を示しております。
この方法はHTMLソースを直接操作します。ビルダーではサポートされていない個所のため「ページ編集画面」での確認ができません。
唯一、フォーカス枠が目印となります。スライドショーの画像等は左上に配置されたままなので「プレビュー画面」での確認を行ってください。
⑪ [表示] から [編集ページ情報]、 [レイアウト枠一覧] をクリックします。
レイアウト枠とは
ダイナミック HTML の効果を加える対象となる四角い領域のことです。ホームページ・ビルダーではこの枠のことを 「レイアウト枠」 と呼んでいますが、「レイヤー」 などと呼ばれることもあります。レイアウト枠にはスタイルシートの技術が利用されています。
ダイナミック HTMLとは
「ダイナミック HTML」とは、動きのあるページを作るための新しい技術です。従来、動きのあるページを作るには、アニメーション GIF を作成したり、別ファイルにプログラムを用意したりしなければなりませんでしたが、ダイナミック HTML を利用すると、HTML ファイルだけで動きのあるページを作成することができます。
Web ブラウザによって見え方が異なる場合があります。
ダイナミック HTML は HTML タグの一種ではありません。従来の JavaScript やスタイルシート、イベントなどを利用した 「技術」 です。つまり、ダイナミック HTML 専用の HTML タグなどは存在しません。
⑫ 一覧から画像やボタンをまとめているレイアウト枠 (通常は一番上にリストされている) を選択し、「閉じる」 ボタンをクリックします。
⑬ 「HTMLソース」 表示に切り替え、カーソルが点滅しているレイアウト枠を見つけます。
⑭ 画像やボタンをまとめるレイアウト枠のソースを変更します。
⑮ レイアウト枠のタグを次のように変更します。
⑯ スライドショーを中央に揃えるタグを追加します。
⑰ 「ページ編集」 の表示に切り替えます。
スライドショーの確認
ビルダーでサポートされていない部分ですので、スライド枠と画像がずれた状態で見えます。唯一、フォーカス枠が目印となります。スライドショーの画像等は左に配置されたままなので 「プレビュー」 で位置の確認を行ってください。
⑰ 「プレビュー」 あるいはブラウザを起動して確認します。
XHTML 1.0 フォーマットで作成してしまったページの 「プレビュー」 ではスライドの入替りを確認できません。
その場合は、ブラウザを起動し、<互換表示> モードにして確認してください。互換表示を使用するを参照します。
または、次の ”XHTML 1.0 で作成してしまった場合の回避方法” で回避してください。
⑱ スライドショーのあるページの DOCTYPE を削除します。
Internet Expplorer 8 (IE8) で表示されていたスライドショーが Internet Explorer 9 (IE9) では表示されません。
IE9 では互換表示を使ってみてください。その方法は、IE9 で互換表示を使用するを参照します。