Qponの回転スライドショーの作成
講師 ： 三宅　節雄
 

 今回はQponさんの回転スライドショーを使ってみます。

内容：写真スライドショーの作成

事前準備：
　My-HP内に『kaiten_slide』という名前で新しいフォルダーを作って下さい。
　更にその中に『img』というフォルダーを作って下さい。
　500×375ピクセルの写真を10枚用意し、01.jpg、･･･、10.jpgという名前で『img』の中に入れて下さい。

ダウンロード：
１．Qponさんのスライドショーへはここをクリックして下さい。新しいページで開きます。

２．下記表示になりますから、『写真の回転スライドショー』をクリックします。
　　表を

３．次に下記の画面に変わりますから、下へスクロールし、ソースを表示させます。
　　ショー)
　　
４．ソースコードを<html>から</html>までコピーします。
　　

５．コピーしたら、ＨＰビルダーを起動し、ファイルタブから標準モードで新規作成をクリックし、
　　画面が白く変化したら、htmlソースに切り替えます。
　　赤枠で囲んだ、全てのソースを削除します。
　　

６．右クリック→貼り付けで、先ほどコピーした、Qponさんのソースコードを貼り付け、
　　My-HPの『kaiten_slide』内に『main.html』という名前で保存します。
　　

７．下記の、赤枠で囲んだ範囲を編集します。
　　<title>の後ろは検索される場合の名前で、スライドショーでの表示用ではありません。
　　ur=は写真の場所ですからur="img/"に変更します。
　　ファイル名とコメントを自分の写真用に変更します。行数も調整します。
　　<h1>の後ろはスライドショーに表示されるタイトルです。<h2>にすると一回り小さい字になります。
　　

８．jsファイルのダウンロード
　　ソースコードのダウンロード画面で、『kaiten1_show.js』もダウンロードします。

９．変更例です。
　　写真サイズ、額余白、コメントの文字サイズも変更しました。
　　&lt;script language=&quot;javascript&quot; src=&quot;<font color="#0000cc">https://qpon-toyota.com/java/book/kaiten1_show.js</font>&quot;&gt;は、<br> 　　<script language="javascript" src="kaiten1_show.js">に変更します。
　<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 language="javascript">
　<!--

　dt=new Array();

　ur="img/"; //イメージファイルが別の場所にある場合はそのフォルダー名やＵＲＬを書く

　//　　　ファイル名とコメントを［　，］で区切って書く//
　n=0;dt[n]="01.jpg,小さな温泉神社に植えられている木の1本です";
　n++;dt[n]="02.jpg,場所は西那須野の農道ライスラインの近くです";
　n++;dt[n]="03.jpg,普段は目立ちませんが1年に1度アピールしている様です";
　n++;dt[n]="04.jpg,純白の小さな花がいっぱい咲きます";
　n++;dt[n]="05.jpg,何故ナンジャモンジャなのでしょうか";
　n++;dt[n]="06.jpg,①見慣れない物だからナンジャモンジャという愛称を名付けた";
　n++;dt[n]="07.jpg,②神事等で使われていた為、名前を呼ぶのが憚(はばか)られたため";
　n++;dt[n]="08.jpg,③何の木だ？と呼ばれているうちにこの名前になった等々";
　n++;dt[n]="09.jpg,正式名はヒトツバタゴ(一つ葉田子)です";
　n++;dt[n]="10.jpg,秋にはこのような実がなる様です";

　//初期設定
　img_w=500;img_h=375;//イメージの縦横巾
　at_ss=10000;//回転間隔（秒）
　gaku="5,20,ccbbaa,17,#0000ff";//額縁太さ,額余白,背景色,文字サイズ,文字色


　//-->
　</script>
　</head>
　<body onLoad="at()">
　<center>
　<h2>ナンジャモンジャの木</h2>
　<script language="javascript" src="kaiten1_show.js">
　</script>
　</center>
　</body>
　</html>


10．BGMと戻るボタン
　　BGMの挿入と戻るボタンの挿入、リンクの設定などは勉強済みですから、
　　各自でスタイルを設定して下さい。
資料作成 ：7/10　三宅