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

SIRIUSにbxスライダーTOP

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

サイトにスライダーが実装してあると、画像一枚分の場所で複数の画像が表示できるので、小スペースでたっぷりの情報や伝えたいことが発信できるメリットがありますね!

それにサイトの見た目もすごく良くなりカッコイイですよね!

今回は、サイト作成システムSIRIUSにスライダーを実装してみよう。

まずはシリウスにbxsliderを実装したサンプルをご覧ください。

 

サンプルページ

 

Sponsored Links

bxsliderをダウンロードしよう

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

bxsliderダウンロード画面

 

ダウンロードページ

 

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

jquery.bxslider.zip

 

 

ファイルを解凍しよう

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

bxsliderファイルの中身

 

 

使用するプラグインは、

jquery.bxslider.css
jquery.bxslider.min.js
images

 

SIRIUSにbxsliderのファイルを作成

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

 

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

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

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

 

 

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

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

フォルダの説明

 

 

Sponsored Links

HTMLテンプレート編集

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

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

 

 

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

 

 

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

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

 

 

 

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

 

 

bxsliderの表示場所の設定

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

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

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

 

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

ソースは2パターンあるので、好きなほうを使ってください。

 

 

下記のサンプルコードは、class名を付けていない簡単な<div>~</div>で、シリウスにアップロードした画像をそのまま貼り付けてあります。

 

 

まれに、スライダーが動かない場合があります。

その時は、上記のソースを<noReturn></noReturn>で囲って試してみてください。

 

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

 

 

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

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

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

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

 

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

 

 

ヘッダーに設置する方法

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

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

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

HTML編集画面

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

HTML編集後

 

 

CSSで調整

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

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

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

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

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

追加記述例

CSS編集画面

 

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

 

 

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

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

アイコン

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

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

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

 

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

 

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

 

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

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

 

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

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

サンプルページ

Sponsored Links

SNSでもご購読できます。

コメントを残す

*

CAPTCHA