• 目　　次　　　　　　　　▼
  • サイトトップ
  • こんなときどうする？
  • サイト内検索
  • サイト内索引
  • サイトマップ
  •  
  • ホームページを作る
  • ビルダー トップ
  • 画像
  • サムネイル
  • アルバム
  • スライドショー
  • ウェブビデオスタジオ
  • ロールオーバー効果
  • 縦横不揃いのＲ／Ｏ
  • アニメ－ション
  • Ｆｌａｓｈタイトル
  • ウェブアニメーター
  • ウェブアートデザイナー
  • イメージマップ
  • Webフォトギャラリー

ビルダーを使う　－　スライドショーの挿入

---

スライドショーを挿入する

ホームページ上で、写真を次々と表示させることをスライドショーと言います。これについて紹介します。

• 表示例1、表示例２
• スライドショーを作成する
• スライドショーの位置を中央ぞろえにする
• XHTML 1.0 で作成してしまった場合の回避方法
• Q&A

スライドショーを使ったページの例

こちらをクリックするとスライドショーの表示例１、表示例２をご覧いただけます。

スライドショーの作成

① スライドショーを挿入するページを開きます。

• 

② 「挿入」 から <画像の効果> を選び <スライドショー> をクリックします。

• 
• 「スライドショー作成ウィザード （写真の選択）」ダイアログが表示されます。
• 

  「スタンダードモード」の場合

  ナビメニューから「写真や画像の挿入」→「スライドショー形式」を選択します。

③ 左側の領域から、挿入したい写真が含まれているフォルダを選択します。

• 
• 選択したフォルダ中の写真の一覧が右側の領域に表示されます。

④ サムネイルにしたい写真を 1つずつクリックして選択します。

• 
• 選択した写真が青い枠で囲まれ、選択した順番に通し番号が付けられます。この番号はスライドショーに挿入される順序を表しています。
• 

  写真を複数選択するには

  写真を複数選択するには、［Ctrl］ キーを押しながら選択します。

• 

  いったん選択した写真を外すには

  いったん選択した写真をサムネイルから削除するには、削除したい写真をクリックして選択を解除します。

⑤ 写真を選択順に並べ替えましょう。［並べ替え］ の横の▼をクリックし、［選択順］ を選択します。

• 
• 写真が選択順に並べ替えられます。
• 

⑥ 写真の選択が完了したら、［次へ］ ボタンをクリックします。

• 
• 「スライドショー作成ウィザード （効果の選択）」ダイアログが表示されます。

⑦ ［スライド枠の位置と大きさ］、［スライドの動き］、［効果］ の項目を設定して、「次へ」 ボタンをクリックします。

• 
• 「スライドショー作成ウィザード （ボタンの選択）」ダイアログが表示されます。

⑧ ボタンをクリックで選び、［選択］ ボタンをクリックします。［選ばれたボタン］ が選択したものに変わったことを確認します。

• 

⑨ ［プレビュー］ ボタンをクリックします。Web ブラウザが起動し、スライドショーのプレビューを確認することができます。

• 

⑩ これでよければ 「完了」 ボタンをクリックします。指定された絶対座標位置にスライドショーが配置されます。

• 
• 

  スライドショーの位置を編集するには

  スライドショーはレイアウト枠を使用してページに挿入されます。レイアウト枠はページの左上を基点としたピクセル単位で、絶対座標として配置されます。このため中央揃いはもとより、閲覧するPC画面によって、さまざまに見えてしまう難点があります。

  以下は、作成されたスライドショーを中央ぞろえにする方法を示しております。

ページトップへ

スライドショーの位置を中央ぞろえにする

この方法はHTMLソースを直接操作します。ビルダーではサポートされていない個所のため「ページ編集画面」での確認ができません。

唯一、フォーカス枠が目印となります。スライドショーの画像等は左上に配置されたままなので「プレビュー画面」での確認を行ってください。

⑪ ［表示］ から ［編集ページ情報］、 ［レイアウト枠一覧］ をクリックします。

• 
• 「標準モード」で現在編集中のページにあるレイアウト枠がリストされます。
• 

  レイアウト枠とは

  ダイナミック HTML の効果を加える対象となる四角い領域のことです。ホームページ・ビルダーではこの枠のことを 「レイアウト枠」 と呼んでいますが、「レイヤー」 などと呼ばれることもあります。レイアウト枠にはスタイルシートの技術が利用されています。

• 

  ダイナミック HTMLとは

  「ダイナミック HTML」とは、動きのあるページを作るための新しい技術です。従来、動きのあるページを作るには、アニメーション GIF を作成したり、別ファイルにプログラムを用意したりしなければなりませんでしたが、ダイナミック HTML を利用すると、HTML ファイルだけで動きのあるページを作成することができます。

  Web ブラウザによって見え方が異なる場合があります。

  ダイナミック HTML は HTML タグの一種ではありません。従来の JavaScript やスタイルシート、イベントなどを利用した 「技術」 です。つまり、ダイナミック HTML 専用の HTML タグなどは存在しません。

⑫ 一覧から画像やボタンをまとめているレイアウト枠 （通常は一番上にリストされている） を選択し、「閉じる」 ボタンをクリックします。

• 

⑬ 「HTMLソース」 表示に切り替え、カーソルが点滅しているレイアウト枠を見つけます。

• <div> タグ部分がレイアウト枠です。前のステップで画像やボタンをまとめているレイアウト枠を選択した状態なので、カーソルが点滅しているのが、該当のレイアウト枠となります。
• 

⑭ 画像やボタンをまとめるレイアウト枠のソースを変更します。

• 

⑮ レイアウト枠のタグを次のように変更します。

• オリジナル：
  • <div style="width : 720px;height : 582px;position : absolute;top : 50px;left : 50px;
    z-index : 7;
    " id="HPB_WPG_SLIDE3">
• 上のソースの 「top : ++px;left : ++px;　」 と 「z-index : *;」 部分を削除し、「absolute」 を 「relative」 とタグを書き換えます（ ++ と * は任意の数字）。
• 次のようになります：
  • <div style="width : 720px;height : 582px;position : relative;
    " id="HPB_WPG_SLIDE3">
  • 

⑯ スライドショーを中央に揃えるタグを追加します。

• スライド枠の最初のレイアウトタグ <div> の前に <center> と入れます。
• また、レイアウトの閉めタグ </div> の次に </center> と入れます。
• 

⑰ 「ページ編集」 の表示に切り替えます。

• 
• 

  スライドショーの確認

  ビルダーでサポートされていない部分ですので、スライド枠と画像がずれた状態で見えます。唯一、フォーカス枠が目印となります。スライドショーの画像等は左に配置されたままなので 「プレビュー」 で位置の確認を行ってください。

⑰ 「プレビュー」 あるいはブラウザを起動して確認します。

ページトップへ

XHTML 1.0 で作成してしまった場合の回避方法

⑱ スライドショーのあるページの DOCTYPE を削除します。

• ページを＜ページ編集＞で表示した状態で、「編集」から「属性の変更」をクリックします。属性のダイアログボックスが表示されます。
• ＜タグ＞ が ＜ページのプロパティ＞ となっているのを確認します。
• 
• ＜ページ情報＞ のタブで、＜DOCTYPE＞ のフィールドを削除します。
• 「OK」 ボタンをクリックします。
• この時、次の警告が出る場合があります。（警告が出ない場合は、次へ進んでください）。
• 
• この場合は、「ツール」 から 「オプション」 を選び、＜ファイル＞ タブの中の ＜DOCTYPE を出力する＞ の 「詳細」 ボタンをクリックします。
• 
• ＜変更するタイミング＞ で ＜ファイルを保存した時＞ にチェックが入っていればそのチェックを外し、保存時には DOCTYPE の出力を行わないようにします。
• 「OK」 「適用」 「OK」 の順にクリックしてオプションの変更を終了します。
• ページを保存します。
• ブラウザを起動し、あるいは 「プレビュー」 にてスライドショーを確認します。

ページトップへ

Q&A

ページトップへ

---

| |