◆当サイト一押し教材『ルレアプラス』◆

シリウスにjQueryスライダー「bxSlider」を使ってスライドショーを導入する方法

    WordPressのようにシリウスでもスライドショーを表示させることができます。

    ちょっと慣れるまでは面倒ですが、ここに書いてある通りにやれば動くところまで

    できるので、試してみてくださいね。

    jQueryの下準備

    今回利用するjQueryは「bxSlider」というjQueryになります。

    ⇒ http://bxslider.com/

    右上の「Download」ボタンをクリックすると一式をまとめてダウンロードできます。

    slider01

    ダウンロードしたファイルは暗号化されているので解凍してください。

    解凍すると以下のようになります。

    2014-07-14_19h08_28

    この中で今回使用するのが、

    • jquery.bxslider.css
    • jquery.bxslider.min.js
    • imagesフォルダ

    になります。

    これらのファイルをシリウスをアップロードした場所へアップロードします。

    slider02

    最後にjQueryを使用するためのファイルも以下から入手して同じ場所に

    アップロードしておいてください。

    ⇒ http://jquery.com/download/

    このファイルはjQueryを使用するときに必要になるので、パソコンの中に残しておくと今後も便利です。

     

    シリウスへの設定

    準備が一通り完了したら、シリウスのHTMLファイルに設定を

    入れていきます。

    まずはシリウスのHTMLテンプレートを開きます。

    slider03

    シリウスでは

    • トップページ
    • エントリページ
    • カテゴリページ

    などでHTMLが分かれています。

    スライドショーを表示したいHTMLを編集してくださいね。

    ここでは、トップページに設置するように解説します。

     

    </head>の上辺りに以下のコードを貼り付けます。

    URLの部分については、あなたのサーバの構成に合わせて当てはめてください。

    次に</body>の上辺りに以下のコードを貼り付けます。

    この部分は設定値を色々変えることで表示方法を変えることができます。

    ■mode
    fade : スライドがフェードインしてくる

    ■speed
    「1000=1秒」毎にスライドが切り替わる

    ■control
    false : 左右の矢印が表示されなくなる

     

    画像の準備

    スライドショーで使用する画像は通常通りシリウス内で画像を追加すればOKです。

    追加された画像は「http://あなたのURL/img/ファイル名」に追加されます。

    (FTPソフトで接続して確認しておきましょう)

    このファイルへのURLを指定するときに使います。

     

    スライドショーの設置

    最後にスライドショーを設置したい場所に以下のコードを貼り付けます。

    以下の例では2つの画像を記入していますが、もっと多い数を指定することも可能です。

    メインコンテンツの部分に設置したいときは、上記の内容を以下のコードの下に設置すればOKです。

    以上でサイトにスライドショーが表示されるようになります。

    今回の設定を入れたのが以下のサンプルサイトです。

    ⇒ サンプルサイト

    今回ご紹介した手順で設定するとこのようなスライドショーになります。

    スライドショーはグラフィカルで目を引くので、使ってみてくださいね。

     

      ◆アフィリエイトで成功するためのオススメ情報商材◆

      オススメ情報商材ランキング
      実際に私が実践しているアフィリエイトで稼ぐための情報商材をランキング形式でご紹介します。
      便利ツールランキング
      アフィリエイトの実践を補助する役立つ便利ツールをランキング形式でご紹介します。

      ◆Facebook始めました◆

      最新記事もチェック

      ◆SAKUの無料メルマガ購読のご案内◆

      mail-magazine

      2 Responses to “シリウスにjQueryスライダー「bxSlider」を使ってスライドショーを導入する方法”

      1. 初めまして、ありと申します。
        現在SIRIUSでHPを作成していてこちらのサンプルサイトの様に
        スライドショーを入れたいと考えています。

        スライドをメインコンテンツに入れようと思ったら画像のサイズは
        どのくらいで設定して作成すればいいですか??
        (ちなみにテンプレートは丸角タイプです)

        あと、画像はどのコードに貼り付けたらいいのでしょうか??

        • ありさん

          コメントありがとうございます。

          スライドショーに指定する画像ですが、サンプルサイトの画像は
          1000×200のものを使用しています。
          試しで大きいまま入れてみたのですが、大きいサイズの画像は
          勝手に調整して収まってくれました^^
          ピッタリ作成するのであれば、500~550pxぐらいが
          丁度いいサイズになりますよ。

          画像については、記事の方に補足を追加して更新しておきましたので、
          ご確認頂けますでしょうか。
          簡単に説明するとシリウスのアップロード先の「img」フォルダ内の
          画像のURLをコード内で指定する形になります。

          今後ともよろしくお願い致します。

      コメントを残す

      日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)