初心者向け
ホームページの
作り方講座

FLASHのようなスライドショーを設置してみよう

トップページのメイン写真が固定画像なので、動きのあるスライドショーにしてみましょう。

姉妹サイトで公開しているスライドショー用プログラムを使います

http://template-party.com/tips/tips9.htmlにアクセスし、ページ中ほどにあるスライドショープログラムのDLのリンクテキストをクリックしてダウンロードします。

解凍後、以下のファイルが1枚入っているのを確認しておきます。

お手元のホームページフォルダにjsフォルダを作って下さい

ホームページ用のフォルダを開き、「js」という名前のフォルダを作って下さい。
jsフォルダを作ったら、上のステップでDL&解凍しておいた「slide_simple_pack.js」ファイルを移動して下さい。

トップページのhtml側を開きます

メイン画像をスライドショーにしたいので、以下のタグをスライドショー用に置き換えます。

置き換えるタグは以下(↓)です。

以下のように置き換えられましたか?

さて、よく見るとお分かりかと思いますが、画像ファイル名が「1.jpg」「2.jpg」「3.jpg」と入ってしまっていますね。順に1枚目・2枚目・3枚目にスライドしていく順番の画像ファイル名の指定箇所になります。ここはあなたが用意された画像ファイル名に応じて入れ替えて下さい。
こちらでは1枚目は当初使っていた写真(IMG_0552.JPG)をそのまま使い、2枚目・3枚目は新しく用意した写真にしました。※画像サイズは必ず揃えて準備して下さい。

1枚目の画像名だけは全部で3か所入力する必要があるので忘れないようにして下さい。

title="index.html"部分はそれぞれの画像へのリンク設定箇所になります。必要に応じて変更して下さい。現在はトップページになっています。

ループを1回で終了させたい場合、value="0"value="1"にして下さい。

※拡張子の入力にご注意下さい。
「XXX.jpg」や「XXX.JPG」など、拡張子部分を間違えないように設定して下さい。間違えてしまうと正常に表示できない場合があります。
尚、jpg形式でなく、他のgifやpngなども指定頂けます。

次に、スライドショー用のスタイルを設定します。

cssフォルダのstyle.cssを開き、メイン画像部分の設定をスライドショー用に置き換えます。

↓以下のタグをコピペして使って下さい。

スライドショーのプログラムの読み込みタグを追加します

同じトップページのhtmlの下の方にスライドショーのプログラムの読み込みタグを1行追加します。

↓以下のタグをコピペして使って下さい。

最後に、スライドショースクリプトを使用する著作表示を入れます

場所は、スライドショーを置いているページ内でしたらどこでもいいのですが、今回はフッター内に入れます。

↓以下のタグをコピペして使って下さい。

※注意(著作表示は必ず入れて下さい)
無料でスクリプトを使わせてもらっている代わりに、この著作表示は必ず入れましょう。無断で外す事は規約違反となります。どうしても著作表示を入れたくない場合は、配布元のライセンス契約(有料)を行って下さい。

完成です

以下の画像をクリックすると、実際にスライドショーを設定したホームページを見る事ができます。