久しぶりのブログカスタマイズ記事です。
先日、当ブログのお問い合わせフォームから一件のメールが届きました。
内容は「ヘッダー下の記事のバーのカスタマイズ方法を教えてくれ」という事でした。
なるほどなるほど。このアイキャッチ画像が動くやつね！
確かにこのカスタマイズは少し特殊で、カスタマイズ方法を紹介している人も少なく私もやっとの事で取り入れたお気に入りのカスタマイズです。
ちなみに、この動く記事バーは「記事スライダー」と言われるのが一般的に多いですね。
私がFC2ブログでいる時は「ヒーローヘッダー」とも言われていました。
実は記事スライダーのカスタマイズ方法は、私すでに公開してるんですよね。
前に有料noteを書いた時に、購入特典の１つとしてこの記事スライダーカスタマイズ方法を解説しています。
note.mu
noteを公開して数ヶ月経ったのと、せっかくお問い合わせをしてくださったという事で、今回はブログの方でカスタマイズ方法を紹介したいと思います。
- カスタマイズをするにあたって
- 記事スライダー【コード1】
- 記事スライダー【コード2】
- 記事スライダーのカスタマイズエラー原因や対処・編集方法
- 【応用編1】記事スライダーをサイドバーに設置
- 【応用編2】記事内にスライダーを設置
- 記事スライダーのメリット
- 記事スライダーのデメリット
- 記事スライダーまとめ
カスタマイズをするにあたって
今回紹介するのは「記事スライダー」というカスタマイズです。
アイキャッチ画像が複数並び、一定時間で自動的にスライドされるカスタマイズになります。
設置場所を問わず、目立たせることができます。
私も色々探してやっと見つけたカスタマイズですが、参考にした記事は昔使っていたPCが壊れたため不明です。
また、その参考にした記事で紹介されているコードでは、完全には稼働してくれなかったため私なりに改造して使えるようにしています。
・カスタマイズを行う際は、必ずバックアップをしてください
・カスタマイズで生じたエラーやバグは自己責任でお願いします
私ははてなブログを使っているので、はてなブログでの解説になりますが、今回のカスタマイズははてなブログ限定ではなく、どのブログサービスでも適応できます。
コードを記述する場所さえ間違わなければ誰でも使うことができる記事スライダーカスタマイズなので、多くの方の役に立てば幸いです。
では早速、順に解説に入ります。
記事スライダー【コード1】
まずはてなブロブのダッシュボードの【設定】→［詳細設定］に行きます。
『検索エンジン最適化』の項目内にある「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> <!-- スライダー設定（headに挿入） -->
はてなブログ以外のサービスを使っている方は「～」の中に記述してください。
記事スライダー【コード2】
次にダッシュボードから［デザイン］→「カスタマイズ」に行きます。
【ヘッダ】項目内の［タイトル下］に以下のコードを貼り付けてください。
<!-- ▼スライダー▼--> <link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet" /> <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> <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: 10, /*空白調節*/ infiniteLoop: true, /*途切れなくループさせるか*/ slideWidth: 300, /*スライドの幅*/ minSlides: 1, /*1つの画面に表示させるスライドの最小数*/ maxSlides: 6,/*1つの画面に表示させるスライドの最大数*/ speed: 800, /*スライダーの移動スピード*/ pager: false, /*ページャーを表示させるかどうか*/ captions: false, /*スライダーの画像にタイトルを被せる場合はTRUE・載せない場合は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> <!-- ▲スライダー▲-->
私が試行錯誤して使えるようにしたコードをそのまま公開しているのでもしかすると不要なコードも交じっているかもしれませんが、問題なく動くコードなので安心してください。
コード上部の６つ並んだ同じコードがありますね（下のコード）
<li><a href="記事URL"><img src="画像URL" title="タイトル"></a></li>
このコード内に書かれた「記事URL」「画像URL」「タイトル」の部分を、自分のブログ用に記述してください。
「記事URL」
そのままスライダーに設置したい記事のURLを記述します。
「画像URL」
スライダーで流す画像のURLを記述します。
スライダーで使用する画像のポイントは、
「読者が一目で記事の内容が把握できる画像」です。
記事タイトルをそのまま画像にはめ込むのでもいいと思います。
「タイトル」
私の設定では表示されないようにしています。
一応カスタマイズで記事を入れ替えたいときに分かりやすいので簡単なタイトルを記述してください。
以上が記事スライダーのカスタマイズコードになります。
カスタマイズ初心者の方は上記のコードをそのままコピペで使う方が簡単でいいと思います。
記事スライダーのカスタマイズエラー原因や対処・編集方法
これから少しややこしくなりますが、コード編集とかのお話もしておきます。
記事スライダーは稼働したけどうまくクリックが反応しない
上記のコードで記事スライダーは取り入れられたと思います。
しかし、スライダー内の記事をクリックしても反応せず、記事のページに移行しないというエラーがあります。
その場合の原因としてあげられるのは
・記事URLが正しくない
・【コード1】の「スライダーの最小数を設定」「スライダーの最大数を設定」が合っていない
などが怪しいです。
特に怪しいのは【コード1】の方です。
そのコードはこの部分ですね↓
minSlides: 2, //スライダーの最小数を設定
maxSlides: 3, //スライダーの最大数を設定
私もプログラミングは素人なのではっきりは言えませんが、ページが表示される画面の大きさによって記事の表示される数も変わり【コード2】にも同じコード（minSlides:、maxSlides:）があるので数字を合わしたり変更した方がいいかもしれません。
記事スライダーの見た目がまとまらない
スライダーはいけたけど画像サイズがバラバラで凸凹しているという方は以下の原因が考えられます。
・【コード2】の「スライドの幅」が合っていない
・記事アイキャッチ画像のサイズがバラバラ
この件は後者の「アイキャッチ画像」のサイズが怪しいです。
スライダーに設定する画像は「縦」「横」のサイズを統一しましょう。
おそらくバラバラになっているのは、サイズを気にせず使いたい画像をそのまま使っているからだと思います。
私はスマホアプリ「ibisPaint X」でサイズを調整しています。
スライドする記事数を調整
上記で紹介したコードでは、記事は1記事ずつ自動スライドするようになっています。
「1記事ずつじゃ遅いよー」という方は「2記事ずつ」や「3記事ずつ」スライドさせることもできます。
編集するコードは【コード2】の
moveSlides: 1, /*一度に動かすスライドの数*/
の部分です。
数字の部分を好きな数字にしましょう。
スライダーの動くスピードを調整
スライダーのスクロールスピードを早くしたり、遅くしたりしたい場合は【コード2】のこの部分
speed: 800, /*スライダーの移動スピード*/
「800」という数字を変えることでスピード調整できます。
スライダーにタイトルを表示させる
今回紹介したコードでは、記事タイトルは非表示設定になっています。
記事タイトルを表示させたい場合は【コード2】のこの部分
captions: false, /*スライダーの画像にタイトルを被せる場合はTRUE・載せない場合はtrue*/ auto: true
下行の「true」を「TRUE」に変更するとタイトルが載ります。
【応用編1】記事スライダーをサイドバーに設置
記事スライダーのカスタマイズは、ヘッダー下に設置出来るだけではありません。
設置する場所を問わず好きなところに設置できるのも魅力です。
まずは応用編1として「サイドバー」に記事スライダーを設置する方法を紹介します。
この設置方法もはてなブログでの解説になりますが、基本的な作業はどのブログサービスでも同じです。
上記で記述している【コード1】は上記と同じ記述場所で使ってください。
※すでに記述している方は、新しく追加記述する必要はありません。
次に【コード2】の記述場所ですが
「ダッシュボード」→「デザイン」→「カスタマイズ」に進み、「サイドバー」を選択します。
『モジュールの追加』という項目をクリックし、「HTML」をクリックします。
タイトルとコードを記述する欄がありますが、タイトルは何も入力しなくてもいいです。
埋め込む記事スライダーが関係性があるのなら「人気記事」や「おすすめ記事」などのタイトルをつけてもいいですね。
コード記述欄に【コード2】を貼り付けます。
コード内の編集は上記で解説したのと同じになります。
またサイドバーに埋め込むスライダーという事で、注意しておきたいのは「画像サイズ」です。
一般的なサイドバーは横幅300pxやそれより小さめなので、自分のブログテーマのサイドバー幅に合ったサイズの画像を使うようにしましょう。
【応用編2】記事内にスライダーを設置
記事の中にも記事スライダーを埋め込むこともできます。
ヘッダー下に設置していると、各記事ごとにその記事スライダーは表示されますが、記事内に直接記事スライダーのコードを埋め込むと単体の記事だけそのスライダーが表示されます。
活用法としては、内部リンクを貼るときに複数記事リンクを貼ると記事が縦に長くなります。
この記事リンクをスライダーにすると内部リンク記事が横にスライドされるので、何個記事を貼っても記事自体縦長にはなりません。
このカスタマイズ方法も【コード1】は上記と同じ場所。
【コード2】は記事の設置したい場所に貼り付けます。
はてなブログでいうと「見たままモード」で記事を執筆し、記事スライダーのコードを貼るときは「HTML編集」の画面に切り替えてコードを貼り付けてください。
コード内編集も「HTML編集」画面で行ってください。
記事スライダーのメリット
記事スライダーは
・見て欲しい記事を目立たせられる
・サイト内回遊率をあげれる
・好きな場所に設置できる
・応用次第では、読者にとってわかりやすいサイトに整理できる
またコード1は一度指定の場所に記述しておくだけで、コード2を設置したい場所に貼るといろんなところに記事スライダーを設置できます。
そう！記事スライダーは１サイト１つだけではなく、何個でも複数を同時設置＆稼働させることができるのも面白いところです。
記事スライダーのデメリット
念の為記事スライダーの悪い部分も紹介しておきます。
記事スライダーのカスタマイズは少し特殊で「動く」という機能が備わっています。
そうなるとネックなのがページ読み込み速度の低下です。
やはり「色」を変えたり、「サイズ」を大きくしたりといったシンプルなカスタマイズと違って複雑になっている分、『重いカスタマイズ』何ですよね。
なので、メリットの項目で複数一緒に稼働させるのも面白いといったものの、個人的には使いすぎはおすすめしません。
自分が許せる読み込み速度の許容範囲で使って行ってください。
記事スライダーまとめ
いかがでしょうか？記事スライダーを埋め込むことに成功しましたか？
今回はお問い合わせをきっかけにあまり紹介している方がいないカスタマイズ方法を紹介しました。
このカスタマイズは私が一番気に入っているもので、本当は誰にも言わず使っていこうと考えていました。
ですが、「読者様」の役に立つ記事を書く。これは常日頃心がけていることなので、困っている方がいて助けられるのなら喜んで助けたいと思い今回公開に至りました。
おそらくこのカスタマイズはお問い合わせをくださった方以外にも探している方はたくさんいると思います。
もし、当記事で問題が解決されたならコメントや、あわよくば記事等で当記事を紹介していただけると励みになります。
ではブログライフを楽しんでいきましょう！
気になることがあれば気軽にお問い合わせから連絡ください。
