Bloggerへの道「初心者でもすぐ使えるbxSlider」 ~ Friend Of Mine

サンプル(実際にbxSliderを埋め込んだサイト)

上記サイトで画像がスルスル動いたりするようなやつを、画像スライダーなんて言ったりしますが、今回紹介する「bxSlider」は初心者でも簡単に設置することが出来るプラグインです。
これをヘッダーの下や投稿記事の上にでも設置すると、情報サイトとしての雰囲気がぐっと出ると思います。

ここで紹介するbxSliderの設置方法は、JavascriptとかjQueryが全く分からない人でもすぐ使える説明になってます。がっつり使えるようになりたい方は、オススメ出来るやり方ではないと思いますので、下記サイトさんをご参考にすることをオススメします。

superChemical: レスポンシブルデザインにも対応した高性能なスライダー【bxslider】の設置

※追記（7/4）
Google Driveをオススメする記事を書いたので、このbxSliderでもGoogle Driveを使っての方法を紹介して行きたいと思います。

Friend Of Mine: Googleの提供するオンラインストレージサービス"Google Drive"

①公式サイトの右上のダウンロードボタンにてbxSliderをダウンロード。

bxSlider.comのTOPページ右上のダウンロードボタンをクリックし、[jquery.bxslider.zip]をダウンロードします。

これには、bxSliderを設置し、動かしたりするための色々なモノが入っています。

これを「Lhaplus」等を使って解凍します。

②javascriptとcssをGoogle Driveにアップロードする。

Google DriveとはGoogleの提供するクラウドストレージサービスです。無料で15GBの保存容量を誇ります。ここに先程ダウンロードしたモノをアップロードします。Bloggerを持っている人ならば、既に利用しているGoogleアカウントでGoogle Driveにログインが可能です。

※何故別の場所にアップロードするのか？
Javascript（bxSliderの挙動を設定するコード）、CSS（bxSliderのデザインを設定するコード）をそのままBloggerのHTMLエディタにぶっ込んでも良いんですが、如何せん長い。こんなに長いコードを置いておくと、ゴチャゴチャしていて他のコードを弄る時に面倒ですし、編集する時も動作が重くなり、ページ表示速度も遅くなります。なので、別の場所にこの長ったらしいコードをアップロードし、そのコードが置いてあるURLを呼び出すコードを入力すれば、たった一行程度で済みます。基本的にこういう風にするのが当たり前な感じらしいので、今回は外部アップロードする方向でいきます。

（１）　まずはGoogle Drive（https://drive.google.com/）にアクセスし、Bloggerを利用するように、Googleアカウントでログインします。

左上の作成ボタン右にある、アップロードボタンをクリックし、「フォルダをアップロード」を選択し、先程の解凍済みフォルダ「jquery.bxslider」をアップロード。

（２）　そこでアップロードされたフォルダ「jquery.bxslider」を開くと、左図のようなファイルがアップロードされているのを確認。この中で取り敢えず必要なのが「jquery.bxslider.css」と「jquery.bxslider.min.js」の２つです。

ファイル名をクリックすると、プレビュー画面みたいになります。その画面右下の[共有ボタン]をクリックします。

ここで共有設定の変更と、ファイルが置いてあるURLを取得します。

（３）　共有設定の画面が出てくると思いますので、ここで設定の変更をします。[アクセスできるユーザー]の[限定公開]を変更し、[ウェブ上で一般公開]にします。これでどの状態でもこのファイルを利用する事が出来ます。

次に、[共有するリンク]にある

「https://docs.google.com/file/d/***/edit?usp=sharing」

「***」部分の英数字をコピーします。このファイルのGoogleドライブ上のIDみたいなもんです。

その英数字を下のアドレスの「***」部分に入力します。

「https://www.googledrive.com/host/***/」

この時気をつけるのは、末尾を「/」で閉じる事。

これが「外部ファイルの置き場所」ってやつです。本来javascriptやcssを置く場所に、ここのアドレスを呼び出すコードを一行載せるだけで、同じように機能するわけです。
※何故共有するリンクのURLでは駄目なのかというと、あれは本来の置き場所ではなく、編集ページ/プレビューページみたいなものらしいです。上記の「https://www.googledrive.com/host/～」のアドレスが正式な置き場所のようです。

この方法で
①bxSliderのjavascriptコードが置いてあるURL（https://www.googledrive.com/host/***/）
②bxSliderのCSSコードが置いてあるURL（https://www.googledrive.com/host/***/）

を用意します。

③BloggerのHTMLエディタで<head>～</head>内にコードを挿入

※上記画像をクリックして拡大すると、はっきり文字が見えるので、宜しければ参考にしてみて下さい。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='bxSliderのjavascriptコードが置いてあるURL'/>
<link href='bxSliderのCSSコードが置いてあるURL' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
$(document).ready(function(){
$('.slider1').bxSlider({
/*オプションを入力*/
});
});
</script>

[テンプレート]→[HTMLの編集]でHTMLエディタを開き、</head>の直前に上記コードを挿入します。これをする事によって、画像スライダーのデザインや挙動が設定されます。

青文字部分に、先程の「bxSliderのjavascriptコードが置いてあるURL」を入力し、赤文字部分に「bxSliderのCSSコードが置いてあるURL」を入力します。それぞれ、JavascriptとCSSを呼び出すコードです。

一番上の黒太字のコードは、jQueryという便利コード。これが無いとそもそもbxSliderが動かないんですが、Googleが既にjQueryのコードをアップロードしたコードを配布しているので、それを利用します。先程自分でGoogle Driveにやったような事を既にやってもらったって感じです。

スライダーの名前（ID）である紫色文字部分は、何と設定してもいいです。ただ設定したIDの前にかならず「.」（ドット）を入れて下さい。後「'…'」か「"…"」で括ること。
コード後半部の「オプションを入力」については、下で説明していますので、取り敢えずそのままで。

④画像を用意して、ウィジェットに設置

スライダーで表示させたい画像をいくつか用意します。大きさは全て揃えておいた方が良いと思います。ここら辺の画像制作・編集は、以前紹介したGIMP2を使うと便利です。

音楽系ブログで使えそうなBloggerカスタマイズ「GIMPでHeader画像作ってみる」

画像の準備が出来たらアップロードします。せっかくなのでここもBloggerを使いましょう。
いつも記事を書くように、Bloggerの[新しい投稿]を開き、ここで画像をアップロードします。そしてそれらの画像のURL/アドレスをコピーしておきます。（[右クリック]→[画像URLコピー]等々）
そして[レイアウト]→［ガジェットを追加］→[HTML/JavaScript]を開きます。
そこに下記コードを入力します。

<div class="slider1">
<li><a href="リンク先"><img src="画像URL"></a><p class="bx-caption">ここに文字を入れたりします。</p></li>
<li>…</li>
<li>…</li>
</div>

先程設定したドットの付いたスライダーの名前（ID）を、ここではドット抜きで<div class="">に設定します。

ここで、先程の画像URLを<img src="…">内に入力。キャプション（文字）を入れたい場合は、「ここに文字を入れたりします。」部分に好きな文章を。
ちなみに、画像や文にリンクを付けたいって言う場合は、 <a href="…">内にリンク先のURLを挿入。「<a href="">…</a>」これで挟めば、その間の要素（画像/文）にリンク属性をもたせることが出来ます。上記のコードの括り方だと、画像をクリックすると、リンク先にジャンプするようになってますね。キャプションやリンクが要らない場合は未記入で、画像コードのみ入力して下さい。
全て入力し終わったら保存しましょう。

⑤動作やデザインの細かい設定

上記コードにある「/*オプションを入力*/」という部分。ここで下記のように様々な指令を出すことによって、画像の動きに変化を付けられます。

<script type='text/javascript'>
$(document).ready(function(){
$('slider1').bxSlider({
mode: 'fade',
controls: false,
pager: true,
controls: true,
infiniteLoop: true,
speed: 5000,
pause: 500,
});
});
</script>

主に使うオプションは

・種類を入力して設定（「''」で必ず括る）
mode: スライドの種類を指定（horizontal/fade/vertical）
horizontal…横移動、fade…フェードイン/アウト移動、vertical…縦移動

・true/falseで設定
auto: スライダーを自動再生させる（true）、しない（false）
infiniteLoop: 画像をループさせる（true）、しない（false）
pager: ページャー（スライダー下にある黒丸）を設置する（true）、しない（false）
controls: コントロール（脇の矢印）を設置する（true）、しない（false）
ticker: 止まらずに流れていく動きをする（true）、しない（false）

・値を入力して設定
speed: スライドのスピード（１秒＝1000）
pause: 画像の停止時間（1秒＝1000）

基本設定（オプション入力部を未記入の場合）では、自動再生もページャーもコントロールもループもありにしています。modeは「fade」で、speedは「500（0.5s）」、pauseは「5000（5.0s）」にしています。オプションを設定しない場合は、基本設定で動きます。なので、この動作でも問題無いって人は、入力しなくてもOKです。変更する方は上記を参考にしながら入力してみて下さい。

⑥サンプル

先程のサンプルサイトから２つ例を出してみます。

a) スライダーを縦に動かす

<script type='text/javascript'>
$(document).ready(function(){
$('.slider2').bxSlider({
speed:2000,
mode: 'vertical',
controls: false,
});
});
</script>

フライヤーや広告等を縦の動きで表示させるのも面白いかもしれませんね。常に表示させておきたい最近の情報とは別に、過去のフライヤーをライブラリー的にスライドしてみたり。

＜解説＞

これは簡単で、「mode」を「vertical（縦移動）」にします。終わり。
僕の場合、横につく矢印が邪魔に感じたので、「controls」を「false」にして消してます。移動スピードも、勢い良く画像が変わるよりは、ゆっくりとスライドするように「2000（2秒）」に設定しています。

b）複数画像を横並びで動かす

<script type='text/javascript'>
$(document).ready(function(){
$('.slider3').bxSlider({
mode: 'horizontal',
auto: true,
controls: true,
pager: false,
speed:500,
pause:1500,
minSlides: 4,
maxSlides: 4,
moveSlides:1,
slideWidth:200,
slideMargin:10,
});
});
</script>

音楽系ブログで利用する際、告知系のバナーには向かない設定ですが、ライブの写真やアルバムのジャケットなんかを並べても面白いかもしれませんね。

＜解説＞

今回使う画像は200px×200pxサイズの画像を５つ用意しました。ウィジェットに入力するコードは②のコードを

まずmodeを「horizontal（横移動）」、autoを「true」にしましょう。これで画像が自動で横に流れていきます。controlsやpagerの有無はお好みで。個人的にはpagerを入れない方が見た目的に良いかも。
この複数同時表示のスライダーは、一度に多くの画像を見ることを目的としてるので、speedを「500」、pauseを「1500」と、速い動きにします。

現在スライダーの横幅は、ブログ幅に自動設定されているので、820pxになっています。しかし画像は200px。620pxの空白部分を埋めるために、スライダーの幅を一旦狭めます。slideWidthを画像幅の「200」に合わせることで、空白部分を消します。このままだと200pxの幅のスライダーが一枚表示されているだけです。そこで、「minSlides（最小スライド数）」「maxSlides（最大スライド数）」を4（枚）にする事で、同時に表示するスライド数を指定することが出来ます。つまり幅200pxのスライダーを4つ横に並べることで、上記画像のようなスライダーが可能になります。
「moveSlides」は1回の動作で、スライダーを幾つ動かすかという事。これはお好みで。
「slideMargin」は、スライダー同士の間隔をどれくらい空けるかという事。これを使ってバランスを取るのもありですね。

最後に

こういうのに全く詳しくない僕でも設置が出来たので、かなり簡単で便利なツールだと思います。たまに不具合が出てしまうこともありますが、それでも有用だと思います。是非お試し下さい。
CSSやjavascriptを弄れる方は、公式ページからダウンロードしたものをカスタマイズしていくと良いと思います。

9 comments :

かおり02 December, 2013
初めまして。突然の質問ですいません。現在下記のサイト運営しておりましてbxSliderを使ってみたのですが、どうやっても自動でスクロールしてくれません。何か解決策や原因があれば教えて欲しいのですが。よろしくお願いいたします。
http://field77.com/ladysgolfer/
Tsukasa12 December, 2013
>>かおりさん
コメントに気付かず返信が遅れてしまい申し訳ありませんでした。
かおりさんのサイト拝見しました。上部に設置してあるスライダーを自動でスクロールさせたいという事ですね？
[要素を検証]というウェブブラウザの機能を使って、サイトのbxsliderのコードを拝見しましたが、下記のようになっておりました。※sciptタグはコメントに書き込めないようなので、省略させていただきます。

$(document).ready(function(){
$('.bxslider').bxSlider();
{auto: true}
});

これだと「auto:true」という指示が上手く入力出来ておりません。上記部分を下記のコードに書き直してみてください。これで恐らく上手くいくのではないかと思います。

$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
});
});

何が違うかと言いますと、「.bxSlider(」までは正しいのですが、その直後に「)」で閉じているので、bxSliderへの命令・指示がそこで完結してしまって、「auto:true」という指示まで辿りつけないのです。つまり「bxSlider();」の中に「{auto: true,}」等の指示を入れて頂ければ、上手くいくと思います。

他のコード、例えば画像の停止時間「pause: 」やスライダーの動くスピード「speed: 」等も「bxSlider();」の中に入れて下さい。

$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
speed: 500,
pause: 4000,
});
});
かおり13 December, 2013
すいません。お忙しいのに突然質問してしまいまして。
早速そのままコードを入れてみましたら動くようになり感動しました。
自分では全くコードは書けないので、色々なサイトを参考にさせて頂いてるのですが一度ハマると手に負えなくなってしまいます。
やはり少しは基礎を覚えようかと思っています。
今回は丁寧に解説までしていただきまして本当に有難うございました。
感謝いたします。
kohei08 February, 2014
初めまして。まだサーバーの準備などが整っておらずアップロードができていないサイトを作っています。
siriusというソフトを使ってサイトを作っています。しかし、プレビューを表示しても画像が3枚縦に並んで表示されるだけでスライドショーになってくれません・・・。どこかコードが間違っておりますでしょうか？回答いただけましたらありがたいです。よろしくお願いします。コードは以下の通りです。

htmlのheadの間に

$(document).ready(function(){
$('.slider1').bxSlider({
mode: 'horizontal',
pager: true,
infiniteLoop: true,
auto: true,
controls: false,
});
});

を入れてあり、bodyの間に

を入力してあります。（全てスクリプトをsript、リンクをlnk、ディーアイブイをdv、エルアイをアイエムジーをigと書いてあります。）
kohei08 February, 2014
申し訳ありません。うまく記事が表示されませんでした・・・。画像が並んで出てきているということはbodyの間のディーアイブイが認識されていないのでしょうか？何かアドバイス等あれば、よろしくお願いします。
kohei16 February, 2014
私の書き込みのせいでご迷惑をおかけして申し訳ありませんでした。
head内のcssファイルの保存先がなぜか認識されておらず現象が起こっていました。
何度かいじっているうちに動くようになりました。
返信本当にありがとうございました！

Thursday, July 4, 2013