便利ツール

sirius-kouka

シリウスに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です。

以上でサイトにスライドショーが表示されるようになります。今回の設定を入れたのが以下のサンプルサイトです。

⇒ サンプルサイト

今回ご紹介した手順で設定するとこのようなスライドショーになります。スライドショーはグラフィカルで目を引くので、使ってみてくださいね。

 

関連記事

  1. axis

    【機能比較】「AXIS(アクシス)」と「SIRIUS(シリウス)」の違…

  2. シリウス特典

    シリウスで作ったサイトをサーチコンソールに登録する方法|サイトマップの…

  3. sirius-kouka

    シリウスの画面サイズ(横幅やサイドバー)を変更する方法【ブログも作れる…

  4. sirius-kouka

    シリウスの背景画像のスクロール機能を固定にする方法

  5. sirius-kouka

    【dropbox】シリウスを2台のパソコンでサイトデータを共有して使う…

  6. シリウスやAXISのようなHTMLサイトでも簡単にメールフォームを使う…

コメント

  • コメント (8)

  • トラックバックは利用できません。

    • あり
    • 2014年 7月 25日

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

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

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

    • ありさん

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

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

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

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

    • バグ
    • 2018年 2月 25日

    とてもわかりやすい説明、役に立つ情報ありがとうございます。
    現在SIRIUSでHPを作成しています。
    こちらの説明通りにやっていますが、画像が表示されません。バツ印になります。
    何が原因でしょうか?
    よろしくお願いいたします。

    • 返信が遅れてしまい申し訳ありません。

      既に解決しているかもしれませんが画像がバツ印になってしまう場合、画像ファイルの指定が間違っている可能性があります。
      まず画像ファイルを指定している部分を再度確認してみると良いかと思います。

      よろしくお願い致します。

        • バグ
        • 2018年 3月 07日

        お返事ありがとうございます!指定が間違っていました(^^;)

        画像が左側に寄る場合はどうすれば良いでしょうか?
        よろしくお願いいたします。

        • 何も指定しなければ左に寄るのは標準な状態です。
          中央揃えにしたい場合は//

          ○○

          等で中央揃えの指定をしてあげると良いかと思います。

          よろしくお願い致します。

    • バグ
    • 2018年 4月 14日

    いつもわかりやすい情報ありがとうございます!
    無事にbxSlider設置できました。
    internet explorer、iPadでは画像が真ん中になってますが、
    グーグルでサイトを見ると画像が左にずれます。
    解決方法ありますか?

    よろしくお願いします。

    • 常に真ん中に表示したい場合は中央寄せのタグを使ってあげれば真ん中に表示できます。
      例:<div style=”text-align:center;”>○○○○</div>

      これで試してみてもらえますでしょうか。
      よろしくお願い致します。

  1. この記事へのトラックバックはありません。

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

最強のWordPressテンプレート「賢威」

wordpress-keni

WordPressのSEO対策が気になるならWordPressテンプレートの最高峰「賢威」で間違いありません。

SAKU限定特典&レビュー

究極のサイト作成ツール「シリウス」

sirius

サイトアフィリエイトをより効率的に効果的に進めるサイト作成ツールならシリウス一択です。サイトアフィリエイトの神器みたいなものですよ!

SAKU限定特典&レビュー

アフィリエイトのバイブル「LUREA plus」

LUREA-plus

本気で稼ぐために必要なノウハウがギュッと詰め込まれた、全てのアフィリエイターのバイブルとなる教材です。 アフィリエイトの基礎からしっかりと取り組めます。 再現性も抜群です!

SAKU限定特典&レビュー

LUREA Plus関連記事
PAGE TOP