ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

Skitterで迫力ある効果のスライドショーを作る方法(2ページ目)

ダイナミックな効果で画像を次々に切り替えていく、とても目を引くスライドショーを作ってみましょう。jQueryで作られた「Skitter」スクリプトを使えば、カッコいい迫力ある効果を伴ったスライドショーが簡単に作れます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

スクリプト「Skitter」一式をダウンロードする

Downloadページから「Stable version」をクリックしてZIPファイルをダウンロード

Downloadページから「Stable version」をクリックしてZIPファイルをダウンロード

まずは、「Skitter」スクリプト一式をダウンロードしましょう。Skitterの公式サイトにアクセスして、ページ上部にあるメニューから「Download」項目をクリックします。すると、右図のようにダウンロード用のボタンが表示されますので、ページ中央にある「Stable version」をクリックします。

※もし、公式サイトにアクセスできなかった場合は、GitHubサイト内のSkitterSlideshowページからダウンロードすることもできます。「Download ZIP」ボタンでダウンロードできます。

本稿執筆時点では、「thiagosf-SkitterSlideshow-9ddbfc3.zip」というファイル名で、361KBのZIPファイルが得られました。バージョンによってファイル名が異なる可能性があります。ダウンロードできたら、展開して中身を出して下さい。

必要なファイルだけを抜き出してアップロード

「Skitter」を利用するためには、ZIPファイルに含まれるすべてのファイルが必要なわけではありません。ZIPファイルの内部には、サンプル用のHTMLや画像も含まれており、それらは不要です。

下図の左側は、ZIPファイルの中に含まれている全フォルダ・ファイルの構造です。これらのうち、「Skitter」を利用するために必要なファイルとフォルダは、下図の右側(赤枠内)の通りです。最低限、これらだけを抜き出してアップロードすれば「Skitter」を利用できます。

「Skitter」を利用するために必要なファイルは、10ファイル(3フォルダ)のみ

「Skitter」を利用するために必要なファイルは、10ファイル(3フォルダ)のみ


これらのファイルを、ディレクトリ(フォルダ)構成を保ったまま、自サイト内の適当な場所にアップロードします。なお、ファイルを抜き出すのが面倒な場合は、「css」・「images」・「js」の3フォルダの中身をそのまま全部アップロードしても害はありません。

jQuery本体について
「Skitter」を使うためには、JavaScriptの有名ライブラリである「jQuery」も必須ですが、先のZIPファイルの中に既に「jQuery」の本体も含まれています。ですから、別途「jQuery」を入手する必要はありません。ただし、ここに含まれているjQueryは最新版ではないので、もし最新版を使いたければ、別途ダウンロードする必要があります。また、既に自サイト上にjQueryがあるなら、そちらを利用しても構いません。

アップロードできたら、HTML内で「Skitter」を呼び出し、迫力あるスライドショーを作ってみましょう
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます