こんにちは！
記事を作成していて、「スライドショー」みたいなものを入れたら、見栄えがガラリと変わりますよね。
文章だけでなく、一緒に画像などが見れた方が、読者も閲覧しやすくなること間違いなし！
今回は、初心者でもコピペでできる「スライドショー」のカスタマイズ法についてまとめてみました。
スライドショーとは
画像が自動でスライドして表示されるものです。
例えば、以下のようなものですね。
スライドショーの設定手順
✅ヘッダのスタイルシートにコードをコピペする
✅記事のスタイルシートにコードをコピペする
✅記事URL、画像URLの箇所を変更する
では、順に説明していきます。
ヘッダのスタイルシートにコードをコピペする
コピペするコード
<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>
【手順１】上記コードをコピーします。
【手順２】デザイン ➡ カスタマイズ ➡ ヘッダ と進む。
【手順３】タイトル下 のスタイルシートをクリックする。
【手順４】コピーしたコードを貼り付ける。
【手順５】変更を保存する をクリックする。
記事のスタイルシートにコードをコピペする
コピペするコード
<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> </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: 300, /*スライドの幅*/ 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>
【手順１】上記コードをコピーします。
【手順２】デザイン ➡ カスタマイズ ➡ 記事 と進む。
【手順３】記事上 （もしくは記事下）のスタイルシートをクリックする。
【手順４】コピーしたコードを貼り付ける。
【手順５】変更を保存する をクリックする。
記事URL、画像URLの箇所を変更する
先程コピペしたコードの中の「記事URL」「画像URL」「タイトル名」の箇所を、必要なデータに書き替えます。
記事URL
下記の記事内に詳細がありますので参考にしてください。
【手順１】表示させたい記事の URL をコピーする。
【手順２】スタイルシートの 記事URL の部分に貼り付ける。
【手順３】変更を保存する をクリックする。（全て終わってからでもOK）
画像URL
下記の記事内に詳細がありますので参考にしてください。
【手順１】はてなフォトライフに画像をアップロードする。
【手順２】表示させたい画像の URL をコピーする。
【手順３】スタイルシートの 画像URL の部分に貼り付ける。
【手順４】変更を保存する をクリックする。（全て終わってからでもOK）
タイトル名
【手順１】スタイルシートの タイトル名 の部分に入力する。
【手順２】変更を保存する をクリックする。（必ず保存してくださいね！）
自分好みにカスタマイズする方法
自分の好みに変更するために、コードの説明をしていきます。
もちろん、このままでも十分使えますので、ご安心ください。
コードの解説
<li><a href="記事のURL"><img src="画像のURL" title="タイトル名"/></a></li>
✅記事のURL ：リンク先のURL
✅画像のURL ：表示させる画像のURL
画像のサイズはなるべく合わせた方が見栄えがきれいになります。
✅タイトル名 ：画像の下部に表示させるテキスト
今回は、この部分を４枚の画像をスライドさせています。
仮に、６枚の画像をスライドさせたい場合は、このコードが６ケ並べて記述しましょう。
また、画像のみでリンク先もタイトル名も設定しない場合は、
<li><img src="画像のURL" /></li>
だけで大丈夫です。
mode: 'horizontal',
スライドする方向を指定できます。
✅ horizontal ：横方向にスライド
✅ vertical ：縦方向にスライド
✅ fade ：フェードしながらスライド
moveSlides: 1,
一度にスライドする枚数を指定できます。（特に理由がなければ１で大丈夫です）
slideMargin: 0,
画像間の隙間を設定できます。（０は隙間なしで並びます）
infiniteLoop: true,
最後までスライドした後、最初に戻るか、終わるか、を設定できます。
✅ true ：ループする （最初に戻る）
✅ false ：ループしない （最後までスライドして終わる）
slideWidth: 300,
表示する１枚の幅を設定できます。（画像の縦横比は一定）
今回の例で比較してみます。
| 250 の場合 |
|
| 300 の場合 |
|
minSlides: 1,
表示させる最小画像数を設定できます。
maxSlides: 5,
表示させる最大画像数を設定できます。（設定する画像数にしておけばいい）
speed: 800,
スライドする速さを設定できます。
pager: true,
ページ送りを表示させるかどうかを設定できます。
✅ true ：ページ送りを表示
✅ false ：ページ送りを非表示
captions: true,
タイトル名を画像に被せるかどうかを設定できます。
✅ true ：画像に被せてタイトル表示
✅ false ：画像の下にタイトル表示
auto: true
自動でスライドさせるかどうかを設定できます。
✅ true ：自動でスライド表示
✅ false ：訪問者がクリックしてスライド表示
記事内の好きな場所にスライダーを設置する方法
カスタマイズ ➡ 記事 で進むと「記事下」「記事上」のスタイルシートが用意されています。
ご存じの通り、この方法で設定するとすべての記事にスライダーが表示されます。
でも、ある記事内のここにだけ表示させたい場合の方法を解説します。
使用するコード
<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> </ul> </div>
</div>
記事中に表示させる方法
【手順１】上記のコードをコピーする。
【手順２】HTML 編集画面に切り替えて貼り付ける。
【手順３】記事のURL、画像URL、タイトル名を書き替える。
（各URLの取得は前述の手法と同じです）
さいごに
初心者では「難しい・・・」と思ってやろうとしなかった人に、少しでも役に立てたら嬉しいです。
これは、かなり見栄えが良くなりアクセスアップに繋がってくるでしょう。
これからも、私自身もたくさんのことに挑戦していこうと思っています。
今回、参考にさせて頂いたサイトはコチラです。
ありがとうございました。
では、またお会いしましょう！
