超簡単！はてなブログにコンテンツスライダーを設置する方法【bxSlider】

スポンサードリンク

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

その①：「headに要素を追加」に以下のコードを張り付ける

まず「ダッシュボード」から「設定」をクリックし、「詳細設定」を選択します。

次に、画面を下へスクロールすると、「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><!-- ←は既にjqueryを読み込んでいる場合は読み込まなくても大丈夫です -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.js" defer></script>
<script>
$(document).ready(function () {
// initiates responsive slide gallery
var settings = function() {
var settings1 = {
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
mode: 'horizontal',
startSlide: 0,
captions: true
};
var settings2 = {
minSlides: 2, //スライダーの最小数を設定
maxSlides: 3, //スライダーの最大数を設定
moveSlides: 1,
mode: 'horizontal', //スライダーのスタイル設定。（他にもvartivcal, fade等があります）
slideWidth: 272, //スライダーの大きさを設定。お好みで調整してください。
startSlide: 0,
slideMargin: 10,
captions: true, //キャプションの有無
adaptiveHeight: false
};
return ($(window).width()<630) ? settings1 : settings2;
}

var mySlider;

function slideSetting() {
mySlider.reloadSlider(settings());
}

mySlider = $('.slider').bxSlider(settings());
$(window).resize(slideSetting);
});
</script>

その②：「ヘッダ」の「タイトル下」に以下のコードを張り付ける

「ダッシュボード」から「デザイン」を選択します。そうすると、こんな画面が出てくるので青丸で囲まれた部分をクリックします。

そして、「ヘッダ」を選択し、タイトル下に以下のコードを張り付けます。

<div id="slider_wrap">
<div class="slider">
<div class="slide-inner"><a href="リンク先のURLを入力"><img src="画像URLを入力" alt="画像の説明" title="キャプション用タイトル"></a></div>
<div class="slide-inner"><a href="リンク先のURLを入力"><img src="画像URLを入力" alt="画像の説明" title="キャプション用タイトル"></a></div>
<div class="slide-inner"><a href="リンク先のURLを入力"><img src="画像URLを入力" alt="画像の説明" title="キャプション用タイトル"></a></div>
<div class="slide-inner"><a href="リンク先のURLを入力"><img src="画像URLを入力" alt="画像の説明" title="キャプション用タイトル"></a></div>
<div class="slide-inner"><a href="リンク先のURLを入力"><img src="画像URLを入力" alt="画像の説明" title="キャプション用タイトル"></a></div>
<div class="slide-inner"><a href="リンク先のURLを入力"><img src="画像URLを入力" alt="画像の説明" title="キャプション用タイトル"></a></div>
</div>
</div>

 説明

1. 「リンク先のURL」には記事のURLを入力します。
2. 「画像のURLを入力」には、アイキャッチ画像のURLを入力します。
3. 「画像の説明」には、タイトルを入力します。
4. 「キャプション用タイトル」は何も入力しなくて大丈夫です。

②の画像のURLを調べる方法は以下の記事で簡単に解説しています。

画像のURLを簡単に調べる方法（はてなフォトライフ） - BUN HACK

その③：「デザインCSS」に以下のコードを張り付ける

最後に、「デザインCSS」に以下のコードを張り付ければ完成です。

/* スライダー設定 */
.bx-wrapper{margin:0 auto;}

.bx-wrapper .bx-caption span{
font-size:60%!important;
padding:5px!important;
line-height: 1.3em;
}

.slider div {
display: none;
}
.bx-viewport .slider div {
display: block !important;
}

 完成図

 最後に

皆さんは無事にコンテンツスライダーを設置することが出来たでしょうか？何かわからないことがあれば何でも言ってください(^^♪　ちなみにこのスライダーを設置すると、当然の如くページスピードは低下します(T_T)でも、目に留まるところに記事を設置できるので一長一短ですかね（笑）

スポンサードリンク