ページTOPへ

シリウス(SIRIUS)で自動ループする画像の導入する方法

シリウス(SIRIUS)で自動ループする画像の導入する方法



当サイトからご購入の方に豪華特典付き!






シリウス(SIRIUS)で自動ループする画像の導入する方法

 

今日はようです。

 

 

 

 

ホームページでで上記のような切り替わり画像を見たことがありませんか?

 

実はシリウス(SIRIUS)でも設置出来ます。

 

今日jQueryスライダー「bxSlider」を使って自動ループする画像(スライドショー)の導入する方法をご紹介したいと思います。チャレンジしてみてくださいね。

 

jQueryをダウンロートする

 

今回利用するjQueryは「bxSlider」というjQueryです。

 

 

⇒ jQuery「bxSlider」をダウンロート

 

 

自動ループ シリウス 画像

 

 

右上の「Download」ボタンをクリックすると一式をまとめてダウンロードできます。次に解凍してください。解凍すると以下のようになります。

 

 

自動ループ シリウス 画像

 

 

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

 

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

になります。

 

 

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

 

自動ループ シリウス 画像

 

 

今回はjQueryも使用するため、以下から入手して同じ場所にアップロードしておいてください。

 

⇒ jQueryをダウンロート

 

jquery-2.1.1.minというファイルです。これもシリウスをアップロードした場所へアップロードします。

 

 

シリウスのHTMLファイルに設定

 

次にシリウスのHTMLファイルに設定します。

 

シリウスでは

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

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

 

スライドショーを表示したいHTMLを編集してくださいね。ここでは、トップページに設置するように解説します。

 

 

HTMLテンプレートを開いて、</head>の上辺りに以下のコードを貼り付けます。

 

< !-- jQuery library -->
< script src="http://あなたのURL/jquery-2.1.1.min.js">< /script>
< !-- bxSlider Javascript file -->
< script src="http://あなたのURL/jquery.bxslider.min.js">< /script>
< !-- bxSlider CSS file -->
< link href="http://あなたのURL/jquery.bxslider.css" rel="stylesheet" />

 

 

 

 

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

 

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

 

<!-- slider plugin -->
<script type="text/javascript">
$(document).ready(function(){
$('#slider').bxSlider({
auto:true,
speed:1000,
mode: 'fade',
pager:false,
controls:false
});
});
</script>
<!-- slider plugin ここまで -->
</body>

 

この部分は設定値を色々変えることで表示方法を変えることができます。
■mode
fade : スライドがフェードインしてくる
■speed
「1000=1秒」毎にスライドが切り替わる
■control
false : 左右の矢印が表示されなくなる

 

 

画像の準備

 

画像はできれば、同じサイズの画像を使用してください、ペイントでサイズ調整できます。

 

用意できたら、通常通りシリウス内で画像を追加すればOKです。

 

ちなみに、今回は風景の画像を4枚用意しています。

 

スライドショーの設置

 

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

 

<!-- slider plugin -->
<div id="slider">
<div><img src="http://あなたのURL/img/画像01.jpg"></div>
<div><img src="http://あなたのURL/img/画像02.jpg"></div>
<div><img src="http://あなたのURL/img/画像03.jpg"></div>
<div><img src="http://あなたのURL/img/画像04.jpg"></div>
</div>
<!-- slider plugin end -->

 

この例では4つの画像を記入していますが、好きな数を指定することも可能です。

 

 

以上でシリウス(SIRIUS)でスライドショーが表示されるようになります。

 

 

チャレンジしてみてくださいね。

 

 

関連ページ

SIRIUSを使って、キラーページ作成方法
SIRIUSを使って、キラーページ作成方法を解説
シリウスSIRIUSのH2タグの設定方法
シリウスSIRIUSのH2タグの設定方法について解説
SIRIUSシリウスでマウスオーバーで画像の色が薄くなる方法
SIRIUSシリウスでマウスオーバーで画像の色が薄くなる方法について解説
SIRIUSシリウスの文字行間を調節する方法
SIRIUSシリウスの文字行間を調節する方法について解説
シリウスのソーシャルブックマーク自動登録機能
シリウスのソーシャルブックマーク自動登録機能の使い方について解説
シリウスを使ってロリポップサーバーへのアップロード方法
シリウスを使ってロリポップサーバーへのアップロード方法について分かりやすく説明する
SIRIUSシリウスで作ったサイトをバックアップしておきましょう
SIRIUSシリウスで作ったサイトをバックアップすべき
シリウス(SIRIUS)で吹き出し作成方法
シリウス(SIRIUS)で吹き出し作成方法について解説
SIRIUSシリウスでマウスオーバー時に画像を変える方法
SIRIUSシリウスでマウスオーバー時に画像を変える方法について解説
SIRIUSシリウストップページの更新履歴表示場所の変更方法
SIRIUSシリウストップページの更新履歴表示場所の変更方法について解説
SIRIUS(シリウス)でヘッダー画像にリンクを貼る方法
SIRIUS(シリウス)でヘッダー画像にトップページへ戻るリンクを貼る方法について解説
SIRIUS(シリウス)でHTMLタグを文字として表示させる方法
SIRIUS(シリウス)でHTMLタグを文字として表示させる方法について解説
シリウス(SIRIUS)の口コミ男性女性を変える方法
シリウス(SIRIUS)の口コミ男性女性を変える方法について解説
SIRIUSシリウスでGoogleアナリティクスの設定方法
SIRIUSシリウスでGoogleアナリティクスの設定について解説します。
シリウス(SIRIUS)でGoogleウェブマスターツールを登録と送信する方法
シリウス(SIRIUS)でGoogleウェブマスターツールを登録と送信する方法について解説
SIRIUSで作ったサイトで「モバイル ユーザビリティ上の問題が検出されました」がGoogleから来た時の対処方法
SIRIUSで作ったサイトで「モバイル ユーザビリティ上の問題が検出されました」がGoogleから来た時の対処方法について解説
SIRIUSでスマホ対応!PC上でスマホのように検索する方法
Chromeのデベロッパーツールを使って、PC上でスマホのように検索する方法について解説
WordPress(ワードプレス)とSIRIUS(シリウス)とどっちが初心者向き?
WordPress(ワードプレス)とSIRIUS(シリウス)とどっちが初心者向き?について。
SIRIUS(シリウス)で個別ページのURL変更の際に301リダイレクト設定する方法
SIRIUS(シリウス)で個別ページのURL変更の際に301リダイレクト設定する方法について解説します。

初心者でも月10万円

カテゴリー


ホーム 初心者のための講座 お小遣いサイト攻略法 お役立ち情報 初心者のための教材