jQueryを使ったシンプルなスライド「jQuery Slider²」を無料ブログに導入してみる

今日はシンプルな画像スライダー「jQuery Slider²」をブログに導入する方法を紹介します。
この方法は「jQuery Slider²」以外のjQueryを使用したスライダーにも使えると思うので是非試してみてください!!

「jQuery Slider²」はこんな感じのスライダーです


本記事は、

・4コマにも使える?jQuery Slider2でスライダー
・[結論:無理]jqueryslider2をFC2ブログのエントリーに直接要素を配置しても使えるか検証
・インラインフレームとは?

を参考に制作しました。ありがとうございます。


さっそくですが、使い方の紹介です。
まず、4コマにも使える?jQuery Slider2でスライダーを参考にして、コチラのページの「DOWNLOAD STABLE」をダウンロードしてください。ダウンロードした2つファイル("jquery.slider.css"と"jquery.slider.min.js")を解凍して、これらをブログにアップロードしてください。(fc2ブログでは、ファイル名にドット(.)が入っているとアップロードできないので適当に名前を変更してください。私は"jquery.slider.css"を"jquery-slider.css"に、"jquery.slider.min.js"を""jquery2-slider-min.js"にしました)。


[※今アップロードしたファイルなんですが、すぐ下で紹介するやり方ではひとまず使用しません。
か、記事の後半部分で使用します。わかりずらい文章構成になってしまいすみません^^;]


ココから先、「jQuery Slider²」の導入方法を紹介してくださっている4コマにも使える?jQuery Slider2でスライダーとても簡単で軽量なjQueryスライダー「jQuery Slider²」を使ってみるでは、サイトのHTML内に色々とコードを追加していきますが、この方法だとブログでは「jQuery Slider²」を作動することができませんでした(少なくても1fc2ブログを使っている私の場合は…)。なのでここからが「jQuery Slider²」をブログに導入するための肝になるかと思います。

まずは、以下のコードを皆さんのパソコン内のテキストエディター(メモ帳とか)にコピペして見てください。
保存する際、ファイル名の拡張子を.htmlにしてください。ファイル名は何でもいいのですが、ここでは「test14.html」とします。あと、文字コードは「UTF-8」にして保存ください。

ソース1

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="content-language" content="ja" />
    <link rel="stylesheet" type="text/css" href="http://blog-imgs-54.fc2.com/f/r/e/frequ2156/jquery-slider.css" media="all" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://blog-imgs-54.fc2.com/f/r/e/frequ2156/jquery2-slider-min.js"></script>
    <style type="text/css">
    <!--
    #slider
    {
        margin:0 auto;
        list-style: none;
        position: relative;
        overflow: hidden;
        width:310px;
        height: 210px;
    }
          
    -->
    </style>
    <script type="text/javascript">
    $(function()
    {
        // idがsliderの物をスライドする。
        $('#slider').slider(
        {
            autoplay: true,
            showControls: true,
            showProgress:true,
            hoverPause: false,
            wait: 4500,
            fade: 700,
            direction: "left",
            randomize:true
        });
    });
    </script>
</head>
<body>
    <div id="slider">
                <li><img src="http://blog-imgs-54.fc2.com/f/r/e/frequ2156/1f2a4eee.jpg" width="310" height="210" /></li>
        <li><img src="http://blog-imgs-54.fc2.com/f/r/e/frequ2156/3cf043f6.jpg" width="310" height="210" /></li>
        <li><img src="http://blog-imgs-54.fc2.com/f/r/e/frequ2156/68c48f0e.jpg" width="310" height="210" /></li>
        <li><img src="http://blog-imgs-54.fc2.com/f/r/e/frequ2156/9bd7b7fc.gif" width="310" height="210" /></li>
                <li><img src="http://blog-imgs-54.fc2.com/f/r/e/frequ2156/01.jpg" width="310" height="210" /></li>
        <li><img src="http://blog-imgs-54.fc2.com/f/r/e/frequ2156/03.jpg" width="310" height="210" /></li>
        <li><img src="http://blog-imgs-54.fc2.com/f/r/e/frequ2156/b92e73bf.jpg" width="310" height="210" /></li>
        <li><img src="http://blog-imgs-54.fc2.com/f/r/e/frequ2156/10.jpg" width="310" height="210" /></li>
</div>
</body>
保存したら、それを開いてみてください。
ちゃんとスライドしていると思います。まずは「動く」ということが大事です。

次に、これをブログに導入します。
まず先ほど保存したファイル(test14.html)をブログにアップロードします。 そして、スライドを導入したい場所に以下の記述(ソース2)を追加して「ここにアップロードしたファイルのURL」の部分に今さっきアップロードしたファイル(test14.html)のURLを入れます。(ちなみに、この記述を追加するのはブログのテンプレートのHTML部分になります)

ソース2
 
<iframe src="ここにアップロードしたファイルのURL" width="330" height="230" frameborder="no" scrolling="auto">
error
</iframe>

どうでしょう。これで導入できたかと思います。
私も最初、上述したサイトさんの記事を参考に導入しようとしたのですが、どうしても上手くいかずに悩んでいたのですが、[結論:無理]jqueryslider2をFC2ブログのエントリーに直接要素を配置しても使えるか検証の記事を見つけ、インラインフレームとは?を参考にして色々とやってみたところちゃんと導入することが出来たので今回紹介しています。

ソース3
 
 frameborder="no"
 scrolling="auto"

ソース2のこの部分ですが、frameborderをyesにすると、スライダーの周りに枠線が表示されます。
scrollingは、ソース1のCSS部分で指定したスライダーの大きさがソース2で指定したインラインフレームで指定した大きさよりも、大きい場合にスクロールバーを導入する事が出来るのですが、ここではautoにしています。yesにすると、ブラウザにもよるのですが大きさにかかわらず常時スクロールバーが表示されます。

一旦表示出来ればこっちのものです( ^ω^)
あとは逆引き的にこれらを自分のものにしていきます。


まず、ソース1では、私がアップロードした「jQuery Slider²」関連のファイルを使用しているので、それを最初に自分でブログにアップロードしたファイルに置き換えます。ソース1(test14.html)を、4コマにも使える?jQuery Slider2でスライダーを参考にして、CSSファイルとJSファイルを自分がアップロードしたファイル(URL)と入れ替えてください。

そして、自分が表示したい画像をブログにアップロードして、そのURLをソース1の後半に記述している私の画像URLと置き換えてください。後はそれを名前を変えて保存して(例 test15.html)、ブログにアップして、ソース2のURLに今アップしたファイル(test15.html)のURLを入れればOKです。

「jQuery Slider²」のオプションメニューについては、とても簡単で軽量なjQueryスライダー「jQuery Slider²」を使ってみるの記事がわかりやすいで、そちらを参考にするといいと思います。jQueryを使用した他のスライダーについても、jQuery・CSS・JSファイルの読み込み部分等を変更すれば今回紹介した方法で導入することが可能だと思うので、是非試してみてください。

以上になります。
この方法はちょっとメンドクサイですが、ブログにカッコイイスライダーを設置したい!
という方に少しでも参考になればいいと思っています( ^ω^)

関連記事
  
このエントリーをはてなブックマークに追加

お気に入りサイト

■よく読まれている人気記事


コメントの投稿

非公開コメント

Index for HighCharts FreQuent
author imageAuthor:Lynx
各データの推移を見守り中。
御連絡はこちらまでお願いします。



最新記事