便利ツール

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. シリウス特典

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

  2. sirius-kouka

    シリウスでアフィリエイトリンク入りのボタン画像を作る方法

  3. sirius-kouka

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

  4. シリウスで簡単に作成データをバックアップ/復元する超便利機能とは?

  5. sirius-kouka

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

  6. シリウス特典

    シリウスの記事タイトルをh3からh2タグに変更する方法

コメント

  • コメント (2)

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

    • あり
    • 2014年 7月 25日

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

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

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

    • ありさん

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

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

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

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

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

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

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

wordpress-keni

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

SAKU限定特典&レビュー

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

sirius

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

SAKU限定特典&レビュー

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

LUREA-plus

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

SAKU限定特典&レビュー

LUREA Plus関連記事
PAGE TOP