catch FC2ブログにスライダーを設置する

FC2ブログにスライダーを設置する!
そうです、スライダーです。
よく見るでしょう?

ブログトップに
画像があってクルクルっと
それが入れ替わるわけです。

目立つためには
じっとしているよりも
動いた方がいいわけで…

訪問者に注目してもらいたいコンテンツなどは
スライダー画像にして目立たせるってワケです。

こいつをFC2ブログ(無料ブログ)に
セットしてみましょう!


FC2ブログにスライダーを設置


まずは画像を用意する



スライダーとはブログトップに
クルクル回る画像を設置しますので
何はともあれその画像が無ければ
何もできません。

ですから…
まず最初にスライドさせる画像を用意します。

私の場合は
記事中ではなく
ブログのトップにでかでかと
表示させてスライドさせる予定なので
読んでもらいたい記事や
お得な情報などの案内画像を作って
表示してみましょう。

というわけで
今回作った画像はコチラ↓
バナー一覧
とりあえず4パターン作ってみました。

別に4パターンにこだわる理由はなく
3パターンでも10パターンでもOKです。

この画像ですが
私の場合
800×300ピクセルにしてみました。

その理由は
スマホで表示した時に
違和感なくそれでいて
できるだけインパクトを強くできる
ちょうどいい比率と思ったからです。

なぜ
スマホを重視するのか?
言うまでもありませんが…


昔からアフィリエイトをしている人は
そのほとんどがPC派だと思います。
むろん
私もPC派です。

なぜなら
スマホは存在しなかったからです。
PCしか無かったために
それをするしか選択肢がありません。

ところが
今ではPC派は少数で
ほとんどの人はスマホ派です。
寝ても覚めてもスマホ、スマホ。

当然
ネットと言えばスマホを指します。
ですから
否応なしに現状アフィリエイトをするには
スマホ派をターゲットにせざるを得ません。

とまあ
そういうわけでして
画像が用意できたとします。


次に


スライダーをブログに設置するには
スライダーを動かすシステムが必要です。


スライダーシステムをゲットする!



このシステムは
無料で提供されていますので
今回はコチラを使用します↓
スライダーシステム
あなたのブログにスライダーを設置!
bxslider


システムのダウンロードは
サイトトップの右上にある
ダウンロードというところから。

とっても分かりやすくていいですね!
海外サイトにありがちな
囮のダウンロードボタンもありません。

矢印で指している部分となります。

ここをクリックすると
即座にダウンロードが始まりますので
任意の場所にダウンロードします。

ダウンロードしたら
Zipファイルを展開して下さい。

今回使用するファイルは以下の3点です↓
使うファイル

images

jquery.bxslider.css

jquery.bxslider.min.js

以上の3点です。

自サーバーにアップするなら
特に不要なのですが
今回はFC2ブログ(当ブログ)に設置するので
FC2ブログ側の制限をクリアする必要があります。

まず
FC2ブログのサーバーに
ファイルをアップするのですが
ファイル名にピリオド.は1つという制限があります。

ですから
ピリオド2つある場合は
先頭のピリオドを_に変更します。

つまり

jquery.bxslider.css

jquery.bxslider.min.js

の2つは

jquery_bxslider.css

jquery_bxslider_min.js

に変更します。

わかりますか?

ピリオドを変更する


jquery_bxslider_min.jsの方は
2カ所.を_に変更しなければなりません。



蛇足ですが
_ の記号はどうすれば出るのか?と言うと
英数半角に切り替えてから
Shift+ろ(右下あたり)
のキーを押すと出ます。


次に
imagesフォルダをFC2ブログのサーバーに
アップしなければならないのですが
残念ながらFC2ブログのサーバーには
フォルダ丸ごとアップはできません。

そこで
対処が必要になってきます。

imagesフォルダとは
文字通り画像フォルダです。
jquery_bxslider.cssを実行させるにあたり
必要な画像ファイルを参照させるのですが
その指定を指示しなければなりません。

本来は
フォルダ丸ごとサーバーに
ぶち込んでファイルを指定するのですが
それが不可能なので
必要な画像ファイルを個々にアップして
それからそのURLを直接
cssに書き込みます。

こうすることで
imagesフォルダをアップしなくても
直接画像を指定することで
cssが実行される、というわけです。

というと何やら大変そうですが
やってみればたいしたことはありません。

imagesなどと言っても
入っているのは2ファイルのみです。

imagesの中身

この2つの画像ファイルを
FC2ブログの画像アップローダーに
(いつも画像をアップしているとこ)
アップロードします。

そうすると
個々の画像のURLが
(実際にアップされた場所)
取得できますので
jquery_bxslider.cssを開いて
所定の位置にURLを記載すればOKです。

URLをコピペする

実際にやってみましょう。


cssを書き換える


まずjquery_bxslider.cssを
テラパットで開きます。

テラパットで開いたら
imagesフォルダを参照する部分を
書き換えるので
ctrlキー+Fを押して
imagesを検索します。

imageを書き換える

この部分の
url('images/bx_loader.gif')を
url('http://blog-imgs-112.fc2.com/a/f/r/afritom/bx_loader.gif')
のように書き換えます。

実際のURLをそのまま入れるのです。
bx_loader.gifは1カ所のみ
controls.pngは4カ所ありました。

実際のURLを入れる

書き換えが終了したら保存して下さい。

そして
この2点のシステムを
FC2ブログの画像アップローダーで
サーバーにアップロードしましょう。

2つのシステムをアップロードする

これで仕込みは完成です。

テンプレートを編集する


さてシステムは設置できました。
次はあなたがお使いのテンプレートで
実行するように編集します。

FC2ブログのテンプレート編集画面を
開けます。

テンプレートの編集

HTML編集というところで
head内に以下の記述をコピペします↓

<!--▼スライダー表示 開始▼-->

<!--▼スクリプト追加▼-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="http://(先程アップロードしたURL)/jquery_bxslider_min.js"></script>

<link href="http://(先程アップロードしたURL)/jquery_bxslider.css" rel="stylesheet" />

<!--▲スクリプト追加▲-->

<!-- ▼jQuery bxSlider スライド▼-->

<script type="text/javascript">

$(document).ready(function(){

$('.bxslider').bxSlider({

auto: true,

});

});

</script>

<!--▲jQuery bxSlider スライド▲-->



<!--▲スライダー表示終了▲-->


先程アップロードしたURLとは
実際にファイルをアップロードしたURLを
そのまま記述します。

記載が終了したら
更新します。


いよいよ画像をセットする



次にくるくる動かす画像をセットします。
私の場合4枚の画像を使いますので
それぞれをアップロードします。

画像をアップロードする

画像をFC2ブログのサーバーに
アップロードしたらその個別URLを
コピペして下記のように
HTMLに記述します。


<ul class="bxslider">

<li><img src="(表示したい画像のURL).jpg" /></li>

<li><img src="(表示したい画像のURL).jpg" /></li>

<li><img src="(表示したい画像のURL).jpg" /></li>

<li><img src="(表示したい画像のURL).jpg" /></li>

</ul>


これで終了です。
たったこれだけのことで
FC2ブログにスライダーが設置できるっ!
いいじゃありませんか。

尚今回の記事は
『FC2ブログ bxsliderでスライドショー』
を参考にさせてもらいました。


実際にスライダーを設置してみて…


たしかに
簡単にスライダーをブログに設置できます。
ハイ。
簡単でした。

ですが…
ちょっとなーってトコもありまして
その部分を修正しました。


トラブル1 画像が全部出てしまう!


これはご使用の環境によるかもしれません。
ですが
私の場合はブログを表示すると
スライダーに設置した画像が
4つなら4つ全て1度に全部
ブログに表示されてしまいます。

これは結構つらいです。

具体的にはこんなカンジ↓
トラブル 画像が複数表示される

スマホの画像ですが
初めにスライダーにセットした
全ての画像が一覧表示されてしまいます。

まあ

気にしなきゃいいって
言えばそれまでですが
やっぱ嫌でしょう?

そこで
私がやった対処方はコチラ↓

[bxSlider]スライドショー
読み込み時に画像が
一瞬バラけてしまう場合の超簡単な対処法


超簡単です。

FC2ブログのテンプレートの設定
をクリックして
テンプレートの編集

先ほどはHtmlを編集しましたが
今回はcssを編集します。

FC2ブログのCSSの任意の位置に
以下の行を追加するだけです。

.bxslider li {
display: none;
}
.bx-viewport .bxslider li {
display: block !important;
}


これを追加するだけ…。
これで解決。



トラブル2 画像が左に寄ってしまう!


スマホ表示では画面が小さすぎて
分からないのですが
PC表示などにした際に
画像が左端に寄ってしまいカッコ悪い…。

スライダー画像をセンターに寄せたい!
こんな時どうする?

トラブル 画像が左端に寄ってしまう

まあ
スマホ表示では問題無いので
そのままでも良さそうですが
センターに寄せれば尚良いのに…。

って時はこうします。

同じく
テンプレートの編集画面に行って
htmlに以下を追加します。

<style>
.bxslider img {
margin:0 auto;
text-align:center
display:block;
}
</style>


尚、この記述は
<!--▲jQuery bxSlider スライド▲-->
↑これの後がよろしいかと。

これでPC表示の際も
スライダー画像がセンターに収まります。

画像がセンターに寄る

画像がセンターにセットされました。
めでたし、めでたし。



トラブル3 左右の矢印がうざい


さて
ここまでくれば大方よろしいかと思いますが
私の場合、スライダー画像左右の
矢印マークが気に入りません。

PC表示なら特に問題はありませんが
スマホ表示にすると画像と左右の矢印が
かぶってしまい気になります。

トラブル コントローラーが邪魔
スマホ表示の際に
スライダー画像と左右の矢印画像が
思いっきりかぶって見づらい!


赤丸内が矢印です。
できれば無い方がいいかと。

これはbxsliderディフォルトの設定で
矢印画像の表示が有りになっており
これを無しに変えれば良いだけです。

そこで
またまたhtmlを編集します。
といっても次の1行を加えるだけです。
controls: false,


先のスクリプトで
<!-- ▼jQuery bxSlider スライド▼-->

<script type="text/javascript">

$(document).ready(function(){

$('.bxslider').bxSlider({

auto: true,

});

});

</script>

<!--▲jQuery bxSlider スライド▲-->

この部分があったと思いますが
auto: true,の下に
追加します。

つまり

<!-- ▼jQuery bxSlider スライド▼-->
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
controls: false,
autoHover: true
});
});
</script>
<!--▲jQuery bxSlider スライド▲-->

とこうなります。
私の場合
controls: false,
以外にも
autoHover: true
も追加しました。

大事なことは
最後のオプションでは
,を付けない、
ということのようです。
つまり
autoHover: true,
ではなく
autoHover: true
で止めるということです。


ブログの表情が大きく変わる!


今回の記事で当ブログトップにも
スライダーを設置してみました。

このブログはFC2の無料ブログでして
ご存じのように全くお金がかかっていません。
今回のスライダーも
ちょっと手間をかけてやれば
グッと見た目がアップします。

好きか?嫌いか?
賛否両論あるかとは思いますが
飽きたら外せばいいだけで
設置しようが、しまいが
全く自由ですし、コストフリーで
楽しめます。

せっかく
訪問してくれた人に
見てもらいたい記事をアピールする、
こんな用途にスライダーはピッタリだと
私は思います。

アフィリエイトにも
いいと思いますよ。

ちょっと
安易ですけど…。

tomchi
関連記事
 カテゴリ
 タグ
None