Word によるホームページ勉強会第 11 日目ページめくりスライドショー(QPON さん作成)の編集 2014-08-26 改定三宅節雄今回のスライドショーは、本の各ページにそれぞれ１枚配置された写真の、ページを捲りながら眺めるような感覚のスライドショーです。左右のページに写真を配置しますから、１度に２枚ずつ眺めます。従って、写真が多い場合に最適です。 Ⅰ．事前準備１．My-HP フォルダー内に slide5 というフォルダーを作成し、更にその中に img というフォルダーを作成します。２．写真を 16 枚以上で偶数枚準備し、500×375 ピクセルにリサイズします。ファイル名を 01.jpg～16.jpg に変え、slide5 フォルダー内の img フォルダーに入れます。３．BGM 用の音楽ファイルを下記などからダウンロードし、slide5 フォルダー内に保存します。ファイル形式は MIDI がサイズが小さいので最適です。日本の童謡･唱歌世界の民謡･名歌(MIDI) 日本と世界の伝統曲(MID,MP3,MP4) オルゴール特集(MID,MP3) Ⅱ．プログラムのダウンロード１．今回は QPON さんのホームページからプログラムを直接ダウンロードします。 1.QPON さんのページ ← ここをクリック 2.メニューから『和洋書スライド』を選択します 3.『ソースの必要な方はここからお越しください。』をクリック 4.プログラムのソースが表示されますので<html>から</html>を全て選択→コピー 5.TeraPad を開き→貼り付け 6.ファイル→名前を付けて保存→page.htm として slide5 のフォルダーに保存 7.赤で表示されている http://qpon.quu.cc/java/page/page.js を選択→コピーインターネット･エクスプローラ(IE)のアドレスバーに張り付け、エンター下記のバーが出てきますから､保存の▼をクリックし､slide5 のフォルダーを選択して保存 8.｢blue7.jpg｣と｢img_n089.gif｣は以前ダウンロードしたものをコピーし、 slide5 のフォルダーに保存して下さい。 Ⅲ．プログラムの編集 page.htm を TeraPad で開きます。 4 行目のタイトル『ＱＰＯＮ・和洋書「ページめくり」スライドショー』を自分のスライドショーの名前に変えます。 9 行目の img_url="./";を img_url="./img/";に変えます 14 行目～19 行目の各写真の名前を 01.jpg,02.jpg と揃え、説明文を自分の写真用に入替えて下さい。但し写真の数の方が多いので必要に応じて行をコピーして追加して下さい。以下の説明では行番号が行が追加されれば変わります。 23 行目の sys="0,0,3,10,1,1" は、右の説明に従って必要が有れば変更して下さい。 33 行目の photo="400,300,5,1,#666688,26,#8888ff";は写真の設定です。写真のサイズを 500,375 に変更。その他は好みによって変更して下さい。 42 行目のＱＰＯＮ・和洋書「ページめくり」スライドショーは、このスライドショーの大きな文字のコメントです。自由に変えて下さい。 47 行目の http://qpon.quu.cc/java/page/page.js は page.js に変えます名前を付けて保存で page.html として保存します。 Ⅳ．スライドショーの動作確認 page.html をダブルクリックで開きます。無事に起動できれば、page.htm を削除します。うまく起動できない場合には page.htm を開き直して、再度やり直して下さい Ⅴ．BGM とホームへの戻り先のリンクの作成 42 行目の<h2>･･･</h2>は見出しです。従ってここの後ろに BGM を鳴らす設定と、Home ボタンを配置し、リンクを設定します。この命令は<body></body>の間に入れます。 1. BGM の設定 42 行目の<h2>ＱＰＯＮ・和洋書「ページめくり」スライドショー</h2> 43 行目の<table border=0 cellpadding=20><tr><td> の行間に HP 勉強会第 9 日目(7 月 31 日)に勉強した BGM を鳴らす設定 <embed hidden="false" src="hanyu.mid" loop="true" autostart="true" volume="50" width="170" height="41"> データはこちらを挿入します。もちろん hanyu.mid は皆さんの音楽ファイル名に変更します。但し、最初に勉強した BGM を聞く･･♪の表示が好きな方は勉強会 3 日目のページから bgm.txt に示す 8 行を、同じ場所に挿入し、bgm_button.js も同じフォルダーに入れて下さい。 2. Home ボタンの設置とリンクの設定下記の 1 行を先ほどの BGM の設定行の下に挿入し、BGM コントローラの右に Home ボタンを設置しホームへリンクを張ります。 <td width="45"><a href="../main.html"><img src="home.gif" border="0" width="68" height="30"></a></td> データはこちらこんな感じになります。見出しの色を変えたい場合には、<h2>･･･</h2>を下記のように変えます。 <h2><font color="#000099">千恵子抄で有名な安達太良山へ行ってきました</font></h2> Ⅵ．スライドショーの動作確認 page.html をダブルクリックで開きます。ちゃんと BGM が鳴り、Home に戻れれば無事完成です。 Ⅶ．ここまでの勉強のフォルダーとファイルの関係