アフィリエイトブログの作製に慣れてきた人は、
「もう少し装飾を施したい」
「ページに動きがほしい」
そんなことを考えますよね？
おいらもスライドショーを設置してみたいと思いつつ、苦労を重ねました…。
解説してくれているサイトはたくさんあるんですが、ズブの素人にはどうも理解しにくいんです。
当サイトでもFlashスライドショーについて解説したことがありますが、無料サービス期間が過ぎると消えてしまったり、サービスサイトのロゴが表示されてしまったりと、根本的な解決には至りませんでした。
そこで見つけたのが、jQueryを利用した『bxSlider』です。
jQueryとは、javaのようにページに動きをつけたりする仕組みのようですが、詳しいことは知りません…。
とにかく設置できればいいんだ！と思いながら設置方法を知るためにあっちこっち探しまくりました。
ところが、これについてもズブの素人にはどうも分かりづらく苦戦の連続でした。
そしてようやく、無料ブログにも設置する方法が判明したので、さっそく公開しようというわけです。
以下の手順で作業していただければ、まず大丈夫です！
当初は、『スライドする画像ごとにリンクを貼る』ということができなくて困っていましたが、ようやく問題を解決しました。
１．ファイルのダウンロード
まずは、jQueryの公式サイトから、『jquery』本体をダウンロードしてきます。
英語でちょっと分かりづらいのですが、下図の赤線部分を右クリックして、「対象をファイルに保存」「名前をつけてリンク先を保存」から、ご使用のPC上に保存できると思います。
保存したファイルは下図のようになると思います。
次に、bxSliderの公式サイト(http://bxslider.com/)に行き、下図のように、右上の「Download」ボタンをクリックして必要なファイルをダウンロードします。
ダウンロードしたZIPファイルには、以下のようなものが入っているはずです。
その中で必要なのは、以下の２つのファイルだけです。
２．ファイルをアップロードする
先ほどのファイル３つ「jquery-1.11.1.min.js」「filejquery.bxslider.js」「filejquery.bxslider.css」を、画像などと同様の方法でアップロードします。
そして、パス（サイト内での上記２つのファイルの保存先URL）をメモ帳などにコピーしておきます。
※画像同様にサムネイル（または「編集」など）をクリックすれば表示されるはずです。
同様に、スライドショーに必要なファイルを、あらかじめ同じサイズにしてアップロードします。
何枚でもいいんですが、あまり多いとページが重たくなるかもしれません。
３．必要なソースをHTMLに入力する
下記のソース①と②を、まるっとコピーして、HTML内にある「head」～「/head」の間にペーストしてください。
「head」～「/head」の間ならどこでも構いませんが、わかりやすいように「head」の直後か、「/head」の直前がいいと思います。
ソース①
<script type=”text/javascript” src=”jquery-1.11.1.min.js“></script>
<script type=”text/javascript” src=”jquery.bxslider.js“></script>
<link href=”jquery.bxslider.css” rel=”stylesheet” />
ソース②
<style>.bx-viewport ul{padding-left: 0;}</style>
<script type=”text/javascript”>
$(document).ready(function(){
var obj = $(‘.bxslider’).bxSlider({
mode:’fade’, //エフェクトの種類
speed : 500, //エフェクトのスピード
pager : true , //ページャーの有無
auto : true, //自動再生
pause : 4000, //静止時間
slideWidth : 600, //スライドショーの幅
});
});
</script>
ソース①の赤文字部分には、それぞれ「jquery-1.11.1.min.js」「filejquery.bxslider.js」「filejquery.bxslider.css」のパス（あなたがアップロードした、サイト内のURL）を入力します。
ソース②の青文字部分は、用途に応じて変更できます。
上記設定では、下記のようになります。
mode :’fade’, ⇒画面の切り替えがフェイドイン・フェイドアウト
speed : 500, ⇒画面切り替え時間が約0.5秒
pager : true , ⇒画面下にページャー（●●●）を表示
auto : true, ⇒ページを表示すれば勝手にスライドショーが動作
pause : 4000, ⇒それぞれの画面表示が約４秒間
slideWidth : 600, ⇒スライドショーの幅ピクセル（画像サイズに合わせる）
上記内の『true』はスイッチの『ON』を意味しています。『OFF』にしたい場合は『false』と書き換えます。必要なければタグごと削除しても同じことです。
『mode:’fade’,』を削除または『mode:’slede’,』にすると、画像の表示が単純な右から左へのスライド切り替えになります。
『pause:4000,』の数値を変更すれば、個々の画像の表示時間が変わります。
1000は約１秒を表しており、10000にすれば約10秒間となります。
細かい調整が必要であれば、ご自分で色々試してみてください。
４．表示したい画像を設定する
次に、表示したい画像を設定するために、下記のソースをHTMLの「body」～「/body」の間に設置します。
<ul class=”bxslider”>
<li><a href=”●●● target=”_blank””><img src=”▲▲▲” border=”0″ width=”600″ height=”450″></a></li>
<li><a href=”●●● target=”_blank””><img src=”▲▲▲” border=”0″ width=”600″ height=”450″></a></li>
<li><a href=”●●● target=”_blank””><img src=”▲▲▲” border=”0″ width=”600″ height=”450″></a></li>
</ul>
設置する場所は、ページのどの部分に表示したいかによって変わりますが、あくまで「body」～「/body」の間です。
たとえば、トップページの最初に表示したければ、ヘッダー関連の表記の下か、グローバルメニュー関連の表記の下ということになります。
上記の▲▲▲には、画像のパス（あなたのサイト内の画像URL）を入力します。
●●●部分には、リンクしたい先のURLを入力します。『target=”_blank”』との間は半角空けます。
例）<a href=”http://watabons.com/ target=”_blank”>
<a href=”リンク先URL(半角スペース)target=”_blank”>
『target=”_blank”』を付けると、リンク先ページが別ウィンドウで開くようになります。付けなくてもいいんですが、リンク先が別ウィンドウで開くことで、元のページに滞在してもらう時間を長くする効果があるみたいです。
そして、ページを保存すれば、これで完了です。
このブログのトップページ、おいらのプロフィール画像もjQueryで動作しています。
工夫次第でいろいろと面白い効果を発揮してくれそうですね。
それでは、頑張ってください！！