人生RPGスマートフォン用の表示で見る人生RPG2児のパパで今年30歳の冒険者(サラリーマン)が日々の生活を通して勇者(自由を手に入れた者)を目指すサクセスブログです。LINK久しぶりのブログカスタマイズ記事です。先日、当ブログのお問い合わせフォームから一件のメールが届きました。内容は「ヘッダー下の記事のバーのカスタマイズ方法を教えてくれ」という事でした。このアイキャッチ画像が動くやつね!確かにこのカスタマイズは少し特殊で、カスタマイズ方法を紹介している人も少なく私もやっとの事で取り入れたお気に入りのカスタマイズです。ちなみに、この動く記事バーは「記事スライダー」と言われるのが一般的に多いですね。私がFC2ブログでいる時は「ヒーローヘッダー」とも言われていました。実は記事スライダーのカスタマイズ方法は、私すでに公開してるんですよね。前に有料noteを書いた時に、購入特典の1つとしてこの記事スライダーカスタマイズ方法を解説しています。note.munoteを公開して数ヶ月経ったのと、せっかくお問い合わせをしてくださったという事で、今回はブログの方でカスタマイズ方法を紹介したいと思います。記事スライダーのメリット記事スライダーのデメリット記事スライダーまとめカスタマイズをするにあたって今回紹介するのは「記事スライダー」というカスタマイズです。アイキャッチ画像が複数並び、一定時間で自動的にスライドされるカスタマイズになります。設置場所を問わず、目立たせることができます。私も色々探してやっと見つけたカスタマイズですが、参考にした記事は昔使っていたPCが壊れたため不明です。その参考にした記事で紹介されているコードでは、完全には稼働してくれなかったため私なりに改造して使えるようにしています。・カスタマイズを行う際は、必ずバックアップをしてください・カスタマイズで生じたエラーやバグは自己責任でお願いします私ははてなブログを使っているので、はてなブログでの解説になりますが、今回のカスタマイズははてなブログ限定ではなく、どのブログサービスでも適応できます。コードを記述する場所さえ間違わなければ誰でも使うことができる記事スライダーカスタマイズなので、多くの方の役に立てば幸いです。記事スライダー【コード1】まずはてなブロブのダッシュボードの【設定】→[詳細設定]に行きます。『検索エンジン最適化』の項目内にある「headの要素を追加」に以下のコードを貼り付けます。//スライダーのスタイル設定。//スライダーの大きさを設定。お好みで調整してください。-->はてなブログ以外のサービスを使っている方は「~」の中に記述してください。次にダッシュボードから[デザイン]→「カスタマイズ」に行きます。【ヘッダ】項目内の[タイトル下]に以下のコードを貼り付けてください。▲スライダー▲-->私が試行錯誤して使えるようにしたコードをそのまま公開しているのでもしかすると不要なコードも交じっているかもしれませんが、問題なく動くコードなので安心してください。title="タイトル"></a></li>このコード内に書かれた「記事URL」「画像URL」「タイトル」の部分を、自分のブログ用に記述してください。「記事URL」そのままスライダーに設置したい記事のURLを記述します。「画像URL」スライダーで流す画像のURLを記述します。「読者が一目で記事の内容が把握できる画像」です。記事タイトルをそのまま画像にはめ込むのでもいいと思います。私の設定では表示されないようにしています。一応カスタマイズで記事を入れ替えたいときに分かりやすいので簡単なタイトルを記述してください。以上が記事スライダーのカスタマイズコードになります。カスタマイズ初心者の方は上記のコードをそのままコピペで使う方が簡単でいいと思います。記事スライダーのカスタマイズエラー原因や対処・編集方法これから少しややこしくなりますが、コード編集とかのお話もしておきます。記事スライダーは稼働したけどうまくクリックが反応しない上記のコードで記事スライダーは取り入れられたと思います。スライダー内の記事をクリックしても反応せず、記事のページに移行しないというエラーがあります。その場合の原因としてあげられるのは・記事URLが正しくない・【コード1】の「スライダーの最小数を設定」「スライダーの最大数を設定」が合っていないなどが怪しいです。怪しいのは【コード1】の方です。私もプログラミングは素人なのではっきりは言えませんが、ページが表示される画面の大きさによって記事の表示される数も変わり【コード2】にも同じコード(minSlides:、maxSlides:)があるので数字を合わしたり変更した方がいいかもしれません。記事スライダーの見た目がまとまらないスライダーはいけたけど画像サイズがバラバラで凸凹しているという方は以下の原因が考えられます。・【コード2】の「スライドの幅」が合っていない・記事アイキャッチ画像のサイズがバラバラこの件は後者の「アイキャッチ画像」のサイズが怪しいです。スライダーに設定する画像は「縦」「横」のサイズを統一しましょう。バラバラになっているのは、サイズを気にせず使いたい画像をそのまま使っているからだと思います。X」でサイズを調整しています。上記で紹介したコードでは、記事は1記事ずつ自動スライドするようになっています。「1記事ずつじゃ遅いよー」という方は「2記事ずつ」や「3記事ずつ」スライドさせることもできます。/*一度に動かすスライドの数*/の部分です。数字の部分を好きな数字にしましょう。/*スライダーの移動スピード*/「800」という数字を変えることでスピード調整できます。スライダーにタイトルを表示させる今回紹介したコードでは、記事タイトルは非表示設定になっています。true下行の「true」を「TRUE」に変更するとタイトルが載ります。記事スライダーのカスタマイズは、ヘッダー下に設置出来るだけではありません。設置する場所を問わず好きなところに設置できるのも魅力です。応用編1として「サイドバー」に記事スライダーを設置する方法を紹介します。この設置方法もはてなブログでの解説になりますが、基本的な作業はどのブログサービスでも同じです。上記で記述している【コード1】は上記と同じ記述場所で使ってください。※すでに記述している方は、新しく追加記述する必要はありません。次に【コード2】の記述場所ですが「ダッシュボード」→「デザイン」→「カスタマイズ」に進み、「サイドバー」を選択します。『モジュールの追加』という項目をクリックし、「HTML」をクリックします。タイトルとコードを記述する欄がありますが、タイトルは何も入力しなくてもいいです。埋め込む記事スライダーが関係性があるのなら「人気記事」や「おすすめ記事」などのタイトルをつけてもいいですね。コード記述欄に【コード2】を貼り付けます。コード内の編集は上記で解説したのと同じになります。サイドバーに埋め込むスライダーという事で、注意しておきたいのは「画像サイズ」です。一般的なサイドバーは横幅300pxやそれより小さめなので、自分のブログテーマのサイドバー幅に合ったサイズの画像を使うようにしましょう。記事の中にも記事スライダーを埋め込むこともできます。ヘッダー下に設置していると、各記事ごとにその記事スライダーは表示されますが、記事内に直接記事スライダーのコードを埋め込むと単体の記事だけそのスライダーが表示されます。活用法としては、内部リンクを貼るときに複数記事リンクを貼ると記事が縦に長くなります。この記事リンクをスライダーにすると内部リンク記事が横にスライドされるので、何個記事を貼っても記事自体縦長にはなりません。このカスタマイズ方法も【コード1】は上記と同じ場所。【コード2】は記事の設置したい場所に貼り付けます。はてなブログでいうと「見たままモード」で記事を執筆し、記事スライダーのコードを貼るときは「HTML編集」の画面に切り替えてコードを貼り付けてください。コード内編集も「HTML編集」画面で行ってください。記事スライダーのメリット記事スライダーはPOINT・見て欲しい記事を目立たせられる・サイト内回遊率をあげれる・好きな場所に設置できる・応用次第では、読者にとってわかりやすいサイトに整理できるなどがあります。コード1は一度指定の場所に記述しておくだけで、コード2を設置したい場所に貼るといろんなところに記事スライダーを設置できます。!記事スライダーは1サイト1つだけではなく、何個でも複数を同時設置&稼働させることができるのも面白いところです。記事スライダーのデメリット念の為記事スライダーの悪い部分も紹介しておきます。記事スライダーのカスタマイズは少し特殊で「動く」という機能が備わっています。なるとネックなのがページ読み込み速度の低下です。「色」を変えたり、「サイズ」を大きくしたりといったシンプルなカスタマイズと違って複雑になっている分、『重いカスタマイズ』何ですよね。メリットの項目で複数一緒に稼働させるのも面白いといったものの、個人的には使いすぎはおすすめしません。自分が許せる読み込み速度の許容範囲で使って行ってください。記事スライダーまとめいかがでしょうか?記事スライダーを埋め込むことに成功しましたか?今回はお問い合わせをきっかけにあまり紹介している方がいないカスタマイズ方法を紹介しました。このカスタマイズは私が一番気に入っているもので、本当は誰にも言わず使っていこうと考えていました。「読者様」の役に立つ記事を書く。これは常日頃心がけていることなので、困っている方がいて助けられるのなら喜んで助けたいと思い今回公開に至りました。このカスタマイズはお問い合わせをくださった方以外にも探している方はたくさんいると思います。当記事で問題が解決されたならコメントや、あわよくば記事等で当記事を紹介していただけると励みになります。ブログライフを楽しんでいきましょう!気になることがあれば気軽にお問い合わせから連絡ください。購読する最新情報をお届けします。会社員を卒業し独立するためにブログ運営に励んでいます。将来は地元の教育制度の強化を行う組織を立ち上げ、育児・教育に優れた地域にしたい。画像加工・デザインが好きで依頼も受けています。「人生って最初から決まったレールを歩んでいるんじゃないだろうか?」そんな考えをずっと抱えていた私が自分の力でレールから飛び出すためのツールにするべくはじめたブログです。積極的に参加しはじめ、1人でも多くの人に関心を持ってもらえるように活動しています。CONTACTスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。