モーダルウィンドウを挿入する
モーダルウィンドウとは、表示中に他のウィンドウの操作を受け付けないウィンドウのことで、半透明のレイヤーを重ねて Web ページを暗くした上に表示します。Lightbox（ライトボックス）風ウィンドウとも呼ばれます。ここではウィンドウ上に拡大画像を表示します。
素材ファイルの準備
素材ファイルをダウンロードしておきます
➊ 資料「ドロップダウンメニュー」により、「素材その２をダウンロードする」を行っておきます。
- 未実施の場合は、ここで素材の zip ファイルをダウンロードし、jQuery-Sample フォルダに展開しておきます。
ページの準備
ドロップダウンメニューが挿入された新規ページを準備する
➊ 資料「ドロップダウンメニュー」により、新しいレイアウトの新規ページを作成する
- 新規ページのファイル名は、works01.html、works02.html ～ works05.html などです。
- 作成済みの場合は次のステップへ飛びます。
新規ページをサイトに追加する
作成された新規ページ works03.html を、「参加者作品」のページからリンクさせます。
➋ 参加者作品のページ works.html を開きます。
➌ 挿入されているサムネイル写真と「見出し」の文字にリンクを挿入します。
- サムネイル画像横の［見出し］は「私の写真ギャラリー３」とし、「写真の…」は「○○の写真をモーダルウィンドウで、拡大して表示します」などと変更する。
- リンク先は、追加して名前を変更した白紙のページ works03.html にします。
追加したページの編集
❹ 追加したページ works03.html を開く。
❺ 図のように、h2 の「見出し」「HEADLINE」を変更します（図は works02.html の場合）。
- ① h2 の「見出し」が隠れているので、「見出し」のボックスの上でクリックし、
- ②［タグ一覧ビュー］を表示します。
- ③ 上側のパネルで <h2> タグを確認し、その下位にある文字列［見出し］をクリックする。
- ④ 下側のパネルで［HTML 属性］タブを表示し、「見出し」と表示されている文字列を「私の作品その３」と変更し、［更新］ボタンを押します。
- ⑤ 上側のパネルに戻り、<h2> タグの下位にある英字の「HEADLINE」をクリックします。
- ⑥ 下側のパネルで「HEADLINE」と表示される文字列を「MY WORKS NO3」と変更し、［更新］ボタンを押します。
❻ h3 の「見出し」と文章を変更します。
- ① h3 の「見出し」は「モーダルウィンドウでの写真ギャラリー」と変更する。
- ②「文章を入力して…」は、図のような文章に変更する。
- 「○○写真のギャラリーです。サムネイルをクリックすると半透明のウィンドウの上に拡大して表示されます。半透明のウィンドウはモーダルウィンドウと呼ばれ、他のウィンドウの操作を受け付けません。［改行］
- 画像は 140 x 105ピクセルのサムネイル画像と、640 x 480 ピクセルの拡大画像をセットで用意し、それぞれ picxx_thum.jpg と picxx.jpg のファイル名で imgs フォルダに保存しています。ここでの xx は 01 からの連続した番号となります。８枚の画像（xx=08）まではこのままで使用できますが、それ以外の場合はソースの変更が必要です。［改行］
- お楽しみください。」などとします。
❼ works03.html のタイトルを変更し［上書き保存］します。
- ページタイトルの変更は、［編集］→［ページの属性］→［属性］ダイアログ →［ページ情報］タブ →［ページタイトル］のボックスにて変更し、［OK］ボタンを押します。
- ここでは、「モーダルウィンドウでの写真ギャラリー」とします。
モーダルウィンドウを挿入する
サイトに画像ファイルを挿入する
❽ この項をすでに実施済み（［イメージギャラリー］を挿入済み）の場合は、⓫ へ飛びます。
❾ ビジュアルサイトビューで［フォルダ］を表示する。
❿ ギャラリーで使う画像をトップフォルダへコピーします。
- ①［フォルダビュー］→ ブックマークしたフォルダ →［イメージギャラリー８］を表示する。
- ② 傘下の imgs フォルダーごとコピーする。
- ③ コピーしたものをトップフォルダへ貼り付ける。
モーダルウィンドウの挿入場所を決める
⓫ 作品その３ページ works03.html を開きます。
⓬ モーダルウィンドウの挿入場所を決めます。
- ① 見出し「モーダルウィンドウでの写真ギャラリー」下の文章の下でクリック及び移動し、
- ②［タグ一覧］ビューで div id="pagetop" が選択される場所を定める。
- ③ フォーカス枠が図のように広くとられていることを確認します。
モーダルウィンドウを挿入する
⓭［フォルダビュー］→ ブックマークしたフォルダ →［モーダルウィンドウ］を表示します。
⓮［index.html］をダブルクリックします。
- ▼［ファイルの挿入］ダイアログが表示される。
⓯［HTML ファイルの挿入（ヘッダー/ページ内部品）］を選択し、［OK］をクリックします。
- ［ファイルの挿入］ダイアログ
［HTML ファイルの挿入］
HTML ページにHTMLファイルを挿入することについては、同名の項目を参照します。
⓰ モーダルウィンドウが挿入されるので［上書き保存］をクリックしてページを保存します。
- 上書き保存する
- ▶［素材ファイルをコピーして保存］ダイアログが表示される
⓱［上書き時に自動的にファイル名を変更する］をオフにして保存します。
- モーダルウィンドウの挿入には、CSSファイル、JSファイル、それに画像ファイルが素材として使われるので、これらを保存します。
- 保存先をファイル型式で分けている場合は、［参照］ボタンを押して保存先フォルダを指定します。
- ※：画像はすでに imgs フォルダに移されているので、そのフォルダを指定しても良い。そのフォルダを指定しない場合は、同じ画像ファイルが別のフォルダにコピーして保存される。
⓲［プレビュー］にてスライド式ギャラリーの動きを確認します。
スクリプトエラー
スクリプトエラーが出る場合、ページ内で jQuery 本体を読み込むスクリプトが重複していたり、サイト内にある複数のページで、ネットから本体を読み込むページとローカルに保存した本体を読み込むページが混在しているとエラーになるようです。
ネットから本体を読み込むスクリプト：
- <script type="text/javascript" language="JavaScript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
ローカルに保存した本体を読み込むスクリプト：
- <script src="jquery.min.js"></script>
ローカルに保存した本体を読み込むようにまとめた方がエラーがでないようです。
下図は、重複するローカル本体読み込みスクリプトと、その一つの削除を説明したものです。
ドロップダウンメニューの修整
モーダルウィンドウを挿入した結果、ドロップダウンメニューが崩れるなどの影響をうけます。この原因を調べ修整します。
ドロップダウンメニューの崩れを修復する
- ドロップダウンメニューが崩れているので修整します:
➊ドロップダウンメニューのHTMLソースを確認する。
- ドロップダウンメニューのHTMLソース
- （省略）
- <body id="hpb-template-09-05a-02" class="hpb-layoutset-02">
- （省略）
- <!-- conatiner -->
- <div id="hpb-container">
- <!-- header -->
- （省略）
- <!-- header end --><!-- inner -->
- <div id="hpb-inner" style="width : 1030px;">
- <div id="DropDownMenu">
- <!-- ドロップダウンメニュー始まり -->
- <ul class="menu">
- <li><a href="index.html">トップページ</a>
- <ul class="sub">
- <li><a href="index.html#infos">お知らせ</a>
- （省略）
- 解説
- ドロップダウンメニューは <div id="hpb-inner"> で定義される区画内に作られる。その幅は 1030px にインラインで設定されている。
- メニューは <ul class="menu"> にて定義される番号なしリストボックス内にリストされる。
➋ドロップダウンメニュー上でクリックし、［スタイルエクスプレスビュー］を起動し、［カーソル位置］を表示する。
- ［スタイルエクスプレスビュー］カーソル位置の表示
➌ドロップダウンメニューがリストされる幅（width）の値を確認する。
- ドロップダウンメニューがリストされる幅の値：
- ①本体区画 div id="hpb-inner" の幅は 1030px となっている。この値はリスト項目を横に並べる幅として想定していたので正しい値だ。② div id="DropDownMenu" の区画をクリックしてその内容を確認したが、そこでは幅を設定していない。③次に、メニューをリストする ul class="menu" では幅（width）が 700px と設定されてしまっている。これは drop_down_menu.css ファイルでは幅を設定していないので、modal_window.css ファイルの ul セレクタで設定されている値 700px が使われていることが分かる。このことは、モーダルウィンドウを挿入した works03.html だけでドロップダウンメニューが崩れることからも納得できることだ。
- 修正方法：
- 1) modal_window.css ファイルで変更し、ul タグの選定を限定的にすることが正しい方法でしょう。その場合、変更には jQuery の知識も必要になります。
- 2) drop_down_menu.css ファイルで変更する方法もありますが、jQuery プラグインが色々な環境（例えば、本体の幅などがいろいろある）で使用されることを思うと適切ではないでしょう。
- 3) インラインでスタイルを設定し、このページだけに変更を行う方法です。但し、共通部分なので、サイト内の他のページのドロップダウンメニューにも［共通部分の同期］で反映されるが、サイト内で同じ本体幅を使用していれば問題はおきないでしょう。
- ここでは 3) の方法で修整することにします。
❹メニューをリストする HTML タグに直接（インラインで）スタイルを設定する
- タグを右クリックして［スタイルの設定］を選択する：
- リストするタグに幅を設定する
- ①表示される「スタイルの設定」ダイアログで［位置］タブを選択する。②「現在選択されているタグ <ul> のスタイル属性のみ表示する」を選択する。③「幅」のボックスに 1030 (ピクセル)と入力し、④［OK］をクリックする。
- インスタイルが設定された
- ul class="menu" タグに style="width: 1030px;" が追加された。結果的に ul class="menu" タグの幅が 1030px となり、modal_window.css で ul タグに設定された幅 700px は取り消された（取り消し線が引かれた）。
- ［ページ編集］で、ドロップダウンメニューの崩れが修正されたのを確認する。 ［上書き保存］します。
❺HTMLソースで設定を確認
- 変更されたドロップダウンメニューのHTMLソース
- （省略）
- <body id="hpb-template-09-05a-02" class="hpb-layoutset-02">
- （省略）
- <!-- conatiner -->
- <div id="hpb-container">
- <!-- header -->
- （省略）
- <!-- header end --><!-- inner -->
- <div id="hpb-inner" style="width : 1030px;">
- <div id="DropDownMenu">
- <!-- ドロップダウンメニュー始まり -->
- <ul class="menu" style="width : 1030px;">
- <li><a href="index.html">トップページ</a>
- <ul class="sub">
- <li><a href="index.html#infos">お知らせ</a>
- （省略）
- 解説
- 修整されたソースでは <ul class="menu" style="width : 1030px;"> となり、メニュー項目をリストする区画の幅がタグの中（インライン）で設定されている。
❻［共通部分の同期］
- works01.html のドロップダウンメニューに設定したインラインスタイルを、ほかのページのドロップダウンメニューにも反映させ、問題ないことを確認します。
共通部分の同期ができない
［共通部分の同期］をしようとしてボタンを押すと、次のメッセージが出て同期ができないことがあります。すべてのファイルを保存した後でも、メッセージが出ます。
- ［共通部分の同期］ボタンを押すと次のメッセージが出て、共通部分の同期ができない
- 「未保存の素材ファイルがあります。編集中のページを一度保存してから同期してください。」 とある。
- すべてのファイルを保存した後でも、メッセージが出て、同期ができない。
- HTMLソースを表示すると、ファイル名の表示が上書き保存した表示になっていない、いわゆる長い表示形式の部分があり、ファイル名には拡張子も付いていない：
- しかもファイル名の部分が ・・・/overview#ov1 のように、ファイル型式（この場合は、xxx.html）の拡張子が無いものとなっている。このために、上書き保存してもできなかったようだ。
- 解決方法は、ファイル名の表示を拡張子付きのファイル名にして［上書き保存］を行うことで、これにより短い表示形式でファイル名が表示される。その方法は：
- ソースで直接変更をする、あるいは
- 該当の文字列を右クリック→［リンクの設定］で［参照］ボタン→［ファイルから］で該当のファイルを選んで［開く］をクリック→［OK］を押す。これにより、長いファイル表示形式ながら拡張子を含めてファイル名が正しく設定されます。
- 上のいずれかの操作の後、［上書き保存］を行う。
モーダルウィンドウ写真ギャラリーのカストマイズ
画像を用意する
➊ サムネイル画像と拡大画像をセットで用意します。
- サムネイル画像サイズ： 140 x 105ピクセル
- 拡大画像サイズ： 640 x 480ピクセル
➋ ファイル名を付けて保存します。
- サムネイル画像ファイル名： picxx_thum.jpg
- 拡大画像ファイル名： picxx.jpg
- ※：xx は 01 から 08 までの数字
➌ 保存先フォルダ
- 前のステップ⓱で、画像を保存したフォルダと同じフォルダに保存します。
以上です。
| |