facebooktweetはてブLINEPocketfeedlyこんばんは!社員Aです👩みなさん、3連休1日目はいかがお過ごしでしょうか?本日朝公開した、こちらの記事もよかったらご覧くださいね!ゆにメモ3連休に食べたい♪福岡で話題のグルメ11選【厳選】https://blog.universe-web.jp/629おはようございます!社員Aです👩待ちに待った3連休が始まりましたね!以前から予告していたとおり、9月15日(土)〜9月17日(月)の3連休は1日2回記事を配信する「ブログウィークエンド」(ネーミングセンスには突っ込まないで...笑)ということで、朝8:00と夜の20:00の二部配信しますので、お楽しみに!3連休最初のブログは「3連休に食べたい♪福岡で話題のグルメ11選」福岡に旅行でお越しの方や、もちろん福岡に住んでる方も3連休予定がある方も無い方も、3連休は日頃の息抜きに「美味しいもの」で癒やされてみませんか?早速ま...さて、今回はサイトで無限スクロールが簡単に実装できるjs「infinitescroll」をご紹介します!そもそも、無限スクロールって何?無限スクロールは、ウェブサイトで閲覧者がコンテンツをスクロールすると、ページの切れ目がなく次々とコンテンツが表示されるものです。Facebookやツイッターなどのソーシャルメディアや、一部のアプリなどでよく採用されていますね。無限スクロールのメリットよく、ページネーション(ページ送りして2・3ページ目へ移動するもの)と比較されることが多いのですが、無限スクロールのメリットは下記です。・ページ送りをしなくて良いため、記事を読む・探すことに集中できる・無限にコンテンツが表示されるのが心地よく、ユーザーのページ滞在時間を増やせる・スマホで閲覧するときにも、SNSと同じ感覚で閲覧できる無限スクロールのデメリット便利な半面、デメリットもあります。・無限にスクロールされるため、記事数やコンテンツが多い場合はフッターへたどり着けない・見る端末によっては、画面フリーズの危険性(古い端末など)これらメリット・デメリットを理解した上で、このブログでも無限スクロールを実装しています!簡単に無限スクロールが実装できる「infinitescroll」を使ってみた!「infinitescroll」は簡単に無限スクロールが実装できるjsです。サイトへの導入まずは、下記をフッター・もしくはヘッダーに記述します。jQueryなしでは動きませんので、必ずjQueryの後に読み込みます。script>もちろん公式サイトからダウンロードして、読み込むことも出来ます。基本にはなりますが、例えばブログの記事を無限スクロールしたい場合は下記のように組んでおく必要があります。今回はそれぞれ、記事を囲むものに「kiji_wrap」、記事に「kiji」のクラスを付与しておきます。class="txt">本文</p></div></div>無限スクロールの設定をするHTMLの組み方が確認できたら、続けて無限スクロールの設定をします。基本は下記をカスタマイズしていきますが、クラス名などはサイトによって変更が必要です。.kiji_wrapは先程の記事を囲む大枠のクラスを入れます。これは使用しているテーマによっても異なると思いますが、それぞれ「ページナビ」のクラスと「次へ」のクラスが必要になります。記事のクラス});});</script>結果、簡単に無限スクロールが実装できた!無限スクロールは前述した通り、メリット・デメリットがありますが「infinitescroll」を使えば簡単にサイトに無限スクロールを実装することができます。フロントエンドエンジニア・デザイナーの社員Aです。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。人気記事Posting....。