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