【はてなブログ】スライダーを任意の場所に設置する方法

f:id:sunko-chan:20210225155919p:plain

スライダー。
よくホームページなどで見かけるスライドしていくあれです。




こんな感じのやつです。
wordpress代行屋さん様の
はてなブログにスライドショーをコピペで設置!初心者向けカスタマイズ
参考にやってみたのですが、なかなかうまくいかず諦めかけてたところ
なんとかできましたので私のやった方法を紹介します。

スライダーを設置する方法

それでは実際にやってみます。
以下のコードを自分用に変更して、スライダーを表示したい場所に貼り付けるだけです。

記事内に設置したい場合は記事内の設置したい場所に、記事上や記事下、
サイドバーに一括表示したい場合はデザインのそれぞれの項目に貼り付けます。

スライダーのコード

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet" />
<div style="text-align:center;">
<div class="bx-top">
  <ul class="bxslider">
    <li><a href="リンク先のURL"><img src="画像のURL" title="表示する文字"/></a></li>
    <li><a href="リンク先のURL"><img src="画像のURL" title="表示する文字"></a></li>
    <li><a href="リンク先のURL"><img src="画像のURL" title="表示する文字"></a></li>
    <li><a href="リンク先のURL"><img src="画像のURL" title="表示する文字"></a></li>
    <li><a href="リンク先のURL"><img src="画像のURL" title="表示する文字"></a></li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.js" defer></script>
<script>
$(function() {
  $('.bx-top').fadeIn('slow');
});
$(document).ready(function(){
  $('.bxslider').bxSlider({
    mode: 'horizontal',
    moveSlides: 1, /*一度に動かすスライド数*/
    slideMargin: 0, /*画像間の余白*/
    infiniteLoop: true, /*ループするかしないか*/
    slideWidth: 272, /*スライドの幅*/
    minSlides: 1, /*1つの画面に表示させるスライドの最小数*/
    maxSlides: 5, /*1つの画面に表示させるスライドの最大数*/
    speed: 800, /*スライダーの移動速度*/
    pager: true, /*ページャーを表示させるかどうか*/
    captions: true, /*スライダーの画像にタイトルを被せるかどうか*/
    auto: true /*スライダーを自動でスライドさせるか*/
  });
});
</script>

<script type="text/javascript">
/* ### ゆっくり表示 ### */
$(function() {
  $('.bxslider').fadeIn('slow');
});
</script>

<style type="text/css">
/* ### 最初は非表示 ### */
.bx-top{
	display:none;
}
/* ### 各種調整 ### */
.bx-wrapper {
	position: relative;
	margin-bottom:0px !important;
	padding: 0;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
}
</style></div>

変更できる箇所のコードの説明

<li><a href="リンク先のURL"><img src="画像のURL" title="表示する文字"/></a></li>

リンク先のURLはリンクしたいページのURLを入力、
画像のURLはスライダーに表示する画像のURLを入力します。

画像のURLの取得の仕方は
【はてなブログ】ページ内リンクでページ内の特定の場所にジャンプさせる方法
説明しています。

また、画像のサイズがバラバラだときれいに表示されないので
できるだけ合わせた方がいいです。

もし、バラバラのサイズを使用したい場合は
画像を維持したまま特定のサイズに変更する方法
応急措置的な方法を記事にしたので参考にしてみてください。

表示する文字は何でも大丈夫です。

このコードを増やしたり減らしたりすることで
スライダーに表示させるリンク画像が増減します。
増やす場合はこのコードを並んでいるコードの一番下に追加していくだけです。

<li><a href="リンク先のURL"><img src="画像のURL" title="表示する文字"/></a></li>
<li><a href="リンク先のURL"><img src="画像のURL" title="表示する文字"/></a></li>

これだと2つですが、これを3つにしたい場合は、

<li><a href="リンク先のURL"><img src="画像のURL" title="表示する文字"/></a></li>
<li><a href="リンク先のURL"><img src="画像のURL" title="表示する文字"/></a></li>
<li><a href="リンク先のURL"><img src="画像のURL" title="表示する文字"/></a></li>

と一番下に追加していく感じです。

上記のコードでは5つ並べていますが、
1つでいいなら1つ、2つでいいなら2つという感じです。
まぁ、1つならそもそもやる必要ないと思いますが…

mode: 'horizontal',

スライドする方法です。
horizontal、vertical、fadeの3種類があり、horizontalは横方向にスライド、
verticalfadeは縦方向にスライド、fadeはフェードしながらスライドします。

特に理由がない限りhorizontalのままでいいです。

moveSlides: 1, /*一度に動かすスライド数*/

一度に何個分リンク画像をスライドさせるかです。
特に理由がない限り1でいいです。
と言うか1以外にする必要あるのかなぁ…

slideMargin: 0, /*画像間の余白*/

リンク画像の間に隙間をどのくらい入れるかです。
0だとリンク画像同士が並んで表示されます。

infiniteLoop: true, /*ループするかしないか*/

最後までスライドしたときに自動で最初に戻るかです。
ループさせない場合はtrueをfalseに変えます。

slideWidth: 272, /*スライドの幅*/

表示するスライドボックスの幅の設定です。
使用している画像がうまくフィットしない場合はここの数字を変えてみてください。

minSlides: 1, /*1つの画面に表示させるスライドの最小数*/

設定したリンク画像をスライダーに表示させる最小数です。

maxSlides: 5, /*1つの画面に表示させるスライドの最大数*/

設定したリンク画像をスライダーに表示させる最大数です。
特に理由がなければ設定したリンク画像数を設定すればいいと思います。

speed: 800, /*スライダーの移動速度*/

スライドする速さです。
これもこのままでいいと思います。

pager: true, /*ページャーを表示させるかどうか*/

ページャーとはページ送りのことです。
表示しない場合はtrueをfalseに変更します。

captions: true, /*スライダーの画像にタイトルを被せるかどうか*/

リンク画像のタイトルを画像に被せるかどうかです。
trueをfalseに変更すると、画像の下にタイトルが表示されます。

auto: true /*スライダーを自動でスライドさせるか*/

スライダーを自動でスライドさせるかの設定です。
truefalseに変更すると、
訪問した人がクリックしてスライドしないとスライドしないようになります。


この他にもいろいろ設定できるみたいです。
STAND4Uさんのサイトに詳しく書かれていますので参考にしてみてください。

オプションを追加するときは、既存のオプションの下に追加していく感じで大丈夫です。
ただ、注意する点が一つあります。

オプションは,で区切り、最後のオプションには,を付けない。

例えば、下記のコードの場合、

captions: true, /*スライダーの画像にタイトルを被せるかどうか*/
auto: true /*スライダーを自動でスライドさせるか*/

captionsのオプションは次にautoのオプションがあるのでtrueの後に,を付けます。
autoのオプションは次に何もオプションがないのでtrueの後に,は付けません

うまく機能しない場合は

私は記事の途中にコードを設置してもうまく動作しませんでした…

そこで以下のコードをheadに追加に追加したところうまくいきましたので、
うまくいかない場合は試してみてください。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.js" defer></script>

それでも動かない場合は貼り付けたコード自体が間違っている場合があります。

オプションを自分で追加したときに、,が抜けていたり、
または最後のオプションの後に,が入っていませんか?

複数枚同時に表示する場合、modeをfadeにしていると動かないみたいです。
horizontalにしてみてください。

グーグルクローム対策

グーグルクロームを使っている場合、グーグルクロームの仕様により、
このままだと画像をクリックしてもリンク先に飛びません。

touchEnabled: false /*グーグルクローム対策*/
auto: true /*スライダーを自動でスライドさせるか*/の下に追加すると
クリックしてリンク先に行くようになります。

追加するときはauto: true,,を追加してください。

(touchEnabledは本来の機能はタッチスワイプです。
この機能が悪さしているので機能をOFFにするってことですね。)

自分で使っていなくても、
訪問してくれた人がグーグルクロームを使っている事もあるでしょうし、
追加しておいた方がいいと思います。