第10回ホームページ勉強会

24日目　2019年　8月22日実施
25日目　2019年　8月29日実施

三宅　節雄

QPONさんのページめくりスライドショー

　今回(8/22)の『ホームページ勉強会』は数あるQPONさんの写真スライドショーの中で、『ページめくりスライドショー』を使ってみましょう。

　本の様に左右の写真を同時表示してめくりますから、写真の枚数が多い場合や、全て縦長の写真でもOKです。

1．事前準備1「フォルダーの作成」

　皆さんのMy-HPに新しいフォルダーを作成し、PageMekuriの様な名前を付けておいて下さい。
更にその中にimgというフォルダーを作って下さい。

２．事前準備2「写真の準備」

　写真展示用の写真は横長の場合には640×480ピクセル、縦長写真の場合は360×480ピクセルの写真を、10枚以上で偶数枚数、写真の名前は01.jpg～10.jpg････として下さい。

　準備した写真は上で作ったimgというフォルダーに入れて下さい。

３．事前準備3「BGM用mp3の準備｣

　BGM用のmp3形式の音楽ファイルを今回も準備し、PageMekuriフォルダーに入れておいて下さい。

４．ダウンロード

　前回と同様に、通常はQPONさんのページを開きますが････。

　下記の表示になりますから、｢スライドショー｣の『ページめくりスライドショー』をクリックします。
　

　サンプルが表示されます。

　下にスクロールしていくと、ソースが表示される場合と｢ソースが必要な場合はここをクリックしてコピーして下さい｣という表示が出る場合があります。
　

　今回も下の方にスクロールしてソースを表示させましたが、<html>から</html>までではなく、<script>から</script>と、一部分しか表示されません。

　仕方ないので、下記は私が以前ダウンロードし、一部体裁を変え、BGMとBACKを追加したソースです。ここから圧縮ファイル(PageMekuri.zip)をダウンロードして、PageMekuriのフォルダー内に保存します。

５．ファイルの展開

　保存場所を聞いて来なかった場合には、ダウンロードしたファイルはPCのダウンロードというフォルダーにあります。

　そのPageMekuri.zipをダブルクリックし、展開タブの｢すべて展開｣をクリック。

すると展開先を聞いてきますから、参照でd:\My-HP\PageMekuriを選択して展開をクリック。

展開後にmain.htmlをHPビルダーで開き、HTMLソースで表示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>半月山</title>
<script type="text/javascript">

</script>
</HEAD>
<BODY background="blue7.jpg">
<div align=center>
<table>
<tbody>
<tr>
<td width="560" align="center"><b><font color="#000099" size="5">日光の半月山に登ってきました</font><font size="+1"> </font><br></b>
<FONT size="3" face="メイリオ" color="#009900">天気は最高でも、見晴らしはちょっと残念<font size="2" face="メイリオ"> 2018.10.03</font></FONT></td>
<td><audio id="audio" loop><source src="forelle.mp3"></audio><font face="$ＪＳ明朝" size="+2">♪</font><font face="$ＪＳ明朝">マス<input type="button" value="演奏" onclick="audio_play()">
<input type="button" value="停止" onclick="audio_pause()"></font>
<script type="text/javascript">
function audio_play() {audio.play();}
function audio_pause() {audio.pause();}
</script>
</td>
<td>　　<img src="Back.jpg" border="0" width="92"></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<center><script type="text/javascript">
</script></center>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td height="34">
<h2>　<input type=button value="開　始" onClick="go()" id="play_button">
<input type=button value="反　転" onClick="back()" id="back_button">
<SCRIPT type="text/javascript" src="page.js">
</SCRIPT></h2>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</HTML>

６．ソースの編集

写真データおよび写真のコメント部を皆さんの写真に対応させて変更して下さい。

まず、写真のフォルダーがimg以外の場合には、ur="img/"をそのフォルダー名に変える
　　　　　　　　　　　　　　　　　 photoの場合には、ur="photo/"
写真データ欄を下記の様に変える

n=0;dt[n]="01.jpg,02.jpg,写真コメント10,写真コメント10";
　　　　　　　　　　　　　⇩
n=0;dt[n]="05.jpg,06.jpg,写真コメント05,写真コメント06";
n=0;dt[n]="07.jpg,08.jpg,写真コメント07,写真コメント08";
n=0;dt[n]="09.jpg,10.jpg,写真コメント09,写真コメント10";
　　　　　　　　　　　　　　：
ソースに青で示した、各種コメント、音楽ファイル名も自分のデータ用に書き換えます
写真を表示する時間も選択できます。
第2説明文の後ろの、日付がいらない場合はピンクで表示した<font>から</font>を削除して下さい
上書き保存します。

７．動作確認

　HPビルダーのプレビューではBGMが鳴りませんので、main.htmlをダブルクリックで起動します。

　ちゃんと動作すればOK。そうでない場合日はmain.htmlをHPビルダーのHTMLソースモードやメモ帳などで開き、写真データ付近を調べる。

　html言語で書かれたプログラムですから､ルールに反して1文字消した､；と：を間違えた等はエラーになります。

８．リンクの作成

前回と同様にトップページの左のメニュー表と、PageMekuriのmain.htmlにリンクを設定します。

前回の落葉と今回のページめくり用に見出しを付けます。その見出しに夫々リンクを張ります。

　｢舞い落ちる落葉｣のリンク先は『d:\My-HP\otiba\otiba.html』で、ページめくりのリンク先は
『d:\My-HP\PageMekuri\main.html』でターゲットは｢right｣です。

９．データのアップロード

うまく動作したら、ｆｆｆｔｐで自分のサーバーへ新規ファイルと変更ファイルをアップします。