1. トップ
  2. SIRIUS Customize
  3. 10分で設置完了！SIRIUSにbxSliderを実装してみよう

10分で設置完了！SIRIUSにbxSliderを実装してみよう

SIRIUSにbxスライダーTOP

SIRIUSに複数の画像がスライドしたりするスライダーというものをヘッダーやフリースペースなどに付けたいなって思ったことありませんか？

サイトにスライダーが実装してあると、画像一枚分の場所で複数の画像が表示できるので、小スペースでたっぷりの情報や伝えたいことが発信できるメリットがありますね！それにサイトの見た目もすごく良くなりカッコイイですよね！今回は、サイト作成システムSIRIUSにスライダーを実装してみよう。

Sponsored Links

シリウスに bxslider を実装したサンプル

まずはシリウスのビジネステンプレートにbxsliderを実装したサンプルをご覧ください。

サンプルページ

bxsliderをダウンロードしよう

はじめに、bxsliderの公式サイトにいき、保存先をあなたのわかりやすい場所にダウンロードします。

bxsliderダウンロード画面

ダウンロードページ

今回は、すぐにわかるデスクトップに保存しました。

jquery.bxslider.zip

ファイルを解凍しよう

先ほどダウンロードしたbxsliderのzipファイルを解凍します。

bxsliderファイルの中身

使用するプラグインは、

jquery.bxslider.css
jquery.bxslider.min.js
images
Sponsored Links

SIRIUSにbxsliderのファイルを作成

次に、PCCドライブACES WEBSIRIUSdataスライダーを実装したいサイト名を開きます。

開いたら、フォルダやファイルがずらずら出てきましたね。

右クリックしてjquery.bxslider.min.jsを入れるフォルダを新しく作ります。ここではフォルダ名をjsとしました。

先ほど作ったjsフォルダを開き、ダウンロードしておいたbxsliderのjquery.bxslider.min.jsをコピペして入れます。

次に、CSSフォルダを開きダウンロードしておいたbxsliderのjquery.bxslider.cssをコピペして入れます。

続いて、imagesフォルダをコピーして貼り付けます。

フォルダの説明

HTMLテンプレート編集

次にbxsliderはjQueryで動いているので、jQueryを動かすために、シリウスのメニューバーから、
テンプレートHTMLテンプレート編集を開き、<head>~</head>内に下記のコードをコピペで貼り付けてください。

今回は、すべてのページにスライダーを表示したかったので、トップページ・カテゴリーページ・エントリーページ・サイトマップ・サイト内検索ページ・リンク集ページにはりつけましたが、お好みで表示したいページだけでもいいです。

<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

続いて、<head>~</head>内に下記のコードの2か所のURLの部分だけ、あなたのサイトのURLに変更して貼り付けてください。

<script src=”サイトのURL/js/jquery.bxslider.min.js”></script>

<link href=”サイトのURL/css/jquery.bxslider.css” rel=”stylesheet”>

<!-- bxSlider Javascript file -->
<script src="サイトのURL/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="サイトのURL/css/jquery.bxslider.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function(){
var obj = $('.bxslider').bxSlider({
auto: true, //自動再生有効
pause: 5000, /* 表示間隔 */
onSlideAfter: function () { obj.startAuto(); }
});
});
</script>

これで、いったんHTML編集は終わりなので保存しておきます。

bxsliderの表示場所の設定

スライダーを表示するにはあらかじめ画像を用意してシリウスにアップロードしておく必要があります。

bxsliderはレスポンシブ対応なので、設置する場所よりも大きめの画像を作成してもスライダーを設置する場所の幅に合うので問題はありませんが、なるべくなら画像のサイズを考えて作成しましょう。

それでは画像が用意されている前提で進めていきます。

スライダーを表示したい場所に下記のソースを記述します。

<div class="bxslider">
<div>シリウスにアップロードした画像</div>
<div>シリウスにアップロードした画像</div>
<div>シリウスにアップロードした画像</div>
<div>シリウスにアップロードした画像</div>
</div>

下記のサンプルコードは、シリウスにアップロードした画像をそのまま貼り付けてあります。

<div class="bxslider">
<div>
<img src="<% pageDepth %>img/0001.jpg" alt="スライダー画像1" />
</div>
<div>
<img src="<% pageDepth %>img/0002.jpg" alt="スライダー画像2" />
</div>
<div>
<img src="<% pageDepth %>img/0003.jpg" alt="スライダー画像3" />
</div>
<div>
<img src="<% pageDepth %>img/0004.jpg" alt="スライダー画像4" />
</div>
</div>

まれに、スライダーが動かない場合があります。その時は、上記のソースを<noReturn></noReturn>で囲って試してみてください。

上記では画像の枚数が4枚で設定してありますが、下記のソースを増やしたり減らしたりすることで、画像の枚数が調整できます。

<div>シリウスにアップロードした画像</div>

<div>
<img src="<% pageDepth %>img/0001.jpg" alt="スライダー画像" />
</div>

フリースペースに設置する方法

SIRIUSには、記事上（メインカラム上段）などフリースペースがあります。

フリースペースにスライダーを設置する場合は、

サイト全体設定フリースペースの設定を開き、内容に記述します。

記述したら「OK」してプレビュー画面で確認してスライダーが動いていれば成功です。

ヘッダーに設置する方法

今回は、SIRIUSのビジネステンプレートのヘッダーにスライダーを設置します。

HTML・CSSをさわる前に必ずバックアップしておきましょう。

まず、シリウスのメニューバーからテンプレートHTMLテンプレート編集を選択して、編集画面を開きます。

HTML編集画面

開いたら、43行目の「<div id=”headerbox”><div id=”header”>&nbsp;</div></div>」&nbsp;を削除して、以下のようにトップページ・カテゴリーページ・エントリーページ・サイトマップ・サイト内検索ページ・リンク集ページに記述し、すべて保存をクリックします。

HTML編集後
<!-- ★メインコンテンツここから★ -->
<div id="headerbox"><div id="header">
<div class="bxslider">
<div><img src="<% pageDepth %>img/100-1.jpg" alt="ｓａｍｐｌｅ1" /></div>
<div><img src="<% pageDepth %>img/100-2.jpg" alt="ｓａｍｐｌｅ2" /></div>
<div><img src="<% pageDepth %>img/100-3.jpg" alt="ｓａｍｐｌｅ3" /></div>
<div><img src="<% pageDepth %>img/100-4.jpg" alt="ｓａｍｐｌｅ4" /></div>
<div><img src="<% pageDepth %>img/100-5.jpg" alt="ｓａｍｐｌｅ5" /></div>
</div>
</div></div>
<div id="container">
<div id="contents">
<div id="main">

CSSで調整

スライダーに設置した画像の大きさによっては画像全体が切れたりするのでCSSで調整することになります。

HTML・CSSをさわる前に必ずバックアップしておきましょう。

メニューバーからテンプレートスタイルシート編集に進み、#headerと#headerboxに以下を追加記述します。

height: 100%;

heightの値を100％にすることで、画像の高さに合わせてくれます。

次に、 #headerの194行目のoverflow:hidden;を削除します。

追加記述例

CSS編集画面
HTML・CSSをさわる前に必ずバックアップしておきましょう。

imagesフォルダのアイコンを表示させる方法

imagesフォルダの中には、ローディング・NEXT / PREVのアイコンが入っています。

アイコン

アイコンを表示する場合は、BxSliderのCSSファイルに追加記述する必要があります。

jquery.bxslider.cssファイルをWindows10対応無料テキストエディターMeryなどでで開きます。

開いたら上からLOADERの59行目にあなたのサイトURLを追加記述します。

/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(ここにサイトのURLを記述/images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

DIRECTION CONTROLS (NEXT / PREV)の108・113行目にあなたのサイトURLを追加記述します。

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 10px;
	background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
	right: 10px;
	background: url(images/controls.png) no-repeat -43px -32px;
}

AUTO CONTROLS (START / STOP)の151・166行目にあなたのサイトURLを追加記述します。

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}

あなたのサイトURLを追加記述したら、上書き保存してFFFTPなどでアップロードします。

※imagesフォルダがアップロードされていないときは、FFFTPなどを使いアップロードしましょう。

これで、bxスライダーを実装することが出来ました。

HTML・CSSをさわる前に必ずバックアップしておきましょう。
合わせて読みたい
よろしければシェアお願いします
同じカテゴリーのコンテンツ一覧
SIRIUS Customize