第10回ホームページ勉強会
24日目 2019年 8月22日実施
25日目 2019年 8月29日実施
|
三宅 節雄 |

|
QPONさんのページめくりスライドショー |
今回(8/22)の『ホームページ勉強会』は数あるQPONさんの写真スライドショーの中で、『ページめくりスライドショー』を使ってみましょう。
本の様に左右の写真を同時表示してめくりますから、写真の枚数が多い場合や、全て縦長の写真でもOKです。
1.事前準備1「フォルダーの作成」 |
|
皆さんのMy-HPに新しいフォルダーを作成し、PageMekuriの様な名前を付けておいて下さい。
更にその中にimgというフォルダーを作って下さい。
|
2.事前準備2「写真の準備」 |
|
写真展示用の写真は横長の場合には640×480ピクセル、縦長写真の場合は360×480ピクセルの写真を、10枚以上で偶数枚数、写真の名前は01.jpg~10.jpg・・・・として下さい。
準備した写真は上で作ったimgというフォルダーに入れて下さい。
|
3.事前準備3「BGM用mp3の準備」 |
|
BGM用のmp3形式の音楽ファイルを今回も準備し、PageMekuriフォルダーに入れておいて下さい。
|
4.ダウンロード |
|
前回と同様に、通常はQPONさんのページを開きますが・・・・。
下記の表示になりますから、「スライドショー」の『ページめくりスライドショー』をクリックします。

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

今回も下の方にスクロールしてソースを表示させましたが、<html>から</html>までではなく、<script>から</script>と、一部分しか表示されません。
仕方ないので、下記は私が以前ダウンロードし、一部体裁を変え、BGMとBACKを追加したソースです。ここから圧縮ファイル(PageMekuri.zip)をダウンロードして、PageMekuriのフォルダー内に保存します。
|
5.ファイルの展開 |
|
保存場所を聞いて来なかった場合には、ダウンロードしたファイルは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">
<!--
dt=new Array();
//フォルダー(別の場所にあるときはhttp://~フルパスで書く
img_url="./img/";
//写真データ
//左ページ用,右ページ用
n=0;dt[n]="01.jpg,02.jpg,いつものバスです,立木観音駐車場から眺めた男体山";
n++;dt[n]="03.jpg,04.jpg,歩き始めて眺めた社山,振り返って眺めた男体山";
n++;dt[n]="05.jpg,06.jpg,周辺案内図,緑に包まれた周回道路?";
n++;dt[n]="07.jpg,08.jpg,山ブドウがありました,英国大とイタリア大使館の別荘記念公園の案内図";
n++;dt[n]="09.jpg,10.jpg,英国大使館別荘記念公園の標識,イタリア大使館別荘記念公園の説明版";
n++;dt[n]="11.jpg,12.jpg,イタリア大使館別荘本館,狸窪の山道の登山口";
n++;dt[n]="13.jpg,14.jpg,整備された階段,八丁出島を眺めながら登ります";
n++;dt[n]="15.jpg,16.jpg,奥には社山も見えます,九十九折れの山道を登ります";
n++;dt[n]="17.jpg,18.jpg,やっと半月峠に着きました,少し見づらい案内板";
n++;dt[n]="19.jpg,20.jpg,ここからは尾根伝いです,平らだったり急坂だったり";
n++;dt[n]="21.jpg,22.jpg,木製の展望台です,条件が良ければこんなに山が見えるそうです";
n++;dt[n]="23.jpg,24.jpg,展望台で見た中禅寺湖と男体山,剥き出しの根っこの上を進みます";
n++;dt[n]="25.jpg,26.jpg,半月山の山頂で集合写真,周回道路付近まで戻ってきました";
//めくる設定
sys="0,0,10,10,1,1"; // めくる方式,めくる方向,静止時間,めくる速度,スタート,繰り返し
//めくる方向(左←右=0 ・左→右=1)
//めくる方式(和紙タイプ=0・洋紙タイプ=1)
//静止時間=秒(写真2枚で)
//めくる速度(1~10ピクセル)
//スタート(手動=0 自動=1)
//繰り返し(なし=0 往復=1 一方向=2)
//写真の設定
photo="500,375,5,1,#666688,15,#009933";
//写真の横幅,縦幅,中心余白,枠の太さ,枠の色,文字サイズ,文字色
// -->
</script>
</HEAD>
<BODY background="blue7.jpg"><!-- geoguide start -->
<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="$JS明朝" size="+2">♪</font><font
face="$JS明朝">マス<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>
|
|
6.ソースの編集 |
|
写真データおよび写真のコメント部を皆さんの写真に対応させて変更して下さい。
まず、写真のフォルダーが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>を削除して下さい
上書き保存します。
|
7.動作確認 |
|
HPビルダーのプレビューではBGMが鳴りませんので、main.htmlをダブルクリックで起動します。
ちゃんと動作すればOK。そうでない場合日はmain.htmlをHPビルダーのHTMLソースモードやメモ帳などで開き、写真データ付近を調べる。
html言語で書かれたプログラムですから、ルールに反して1文字消した、;と:を間違えた等はエラーになります。
|
8.リンクの作成 |
|
前回と同様にトップページの左のメニュー表と、PageMekuriのmain.htmlにリンクを設定します。
前回の落葉と今回のページめくり用に見出しを付けます。その見出しに夫々リンクを張ります。

「舞い落ちる落葉」のリンク先は『d:\My-HP\otiba\otiba.html』で、ページめくりのリンク先は
『d:\My-HP\PageMekuri\main.html』でターゲットは「right」です。
|
9.データのアップロード |
|
うまく動作したら、ffftpで自分のサーバーへ新規ファイルと変更ファイルをアップします。
|
|
 |
|