「Blogger」無限スクロールを実装したい
 |
無限スクロールの実装
結論から言うと、すごく簡単に実装できました。
こちらのブログ（英文）で、説明されていたので、試してみました。
では、早速無限スクロールの追加方法を説明したいと思います。
Bloggerの管理画面にある「レイアウト」から投稿記事の下に「＋ガジェットを追加」で
「HTML/JavaScript」を追加して、以下のコードを貼り付けるだけです。
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script type='text/javascript' src='//m-misc.appspot.com/js/blogger-infinite-scrolling.js'></script>
Blogger管理画面のレイアウトを開き、「ガジェットを追加」をクリックします。
別ウィンドウに表示されたウィジェットの一覧から、「HTML/JavaScript」のウィジェットを選択します。
別ウィンドウに表示されたフォーム内にコードを貼り付けます。
「保存」をクリックし、ウィンドウを閉じます。
追加されたウィジェットをドラッグし、投稿記事の下になるように調整します。
レイアウト変更を保存して、プレビューでブログをスクロールさせて、実装されたことを確認してください。
思っていた以上に簡単に実装できたので、拍子抜けしました。
こちらのブログ（英文）で、説明されていたので、試してみました。
- https://blog.manki.in/2012/04/how-to-add-infinite-scrolling-to.html
では、早速無限スクロールの追加方法を説明したいと思います。
Bloggerの管理画面にある「レイアウト」から投稿記事の下に「＋ガジェットを追加」で
「HTML/JavaScript」を追加して、以下のコードを貼り付けるだけです。
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script type='text/javascript' src='//m-misc.appspot.com/js/blogger-infinite-scrolling.js'></script>
Blogger管理画面のレイアウトを開き、「ガジェットを追加」をクリックします。
 |
| ガジェットを追加 |
別ウィンドウに表示されたウィジェットの一覧から、「HTML/JavaScript」のウィジェットを選択します。
別ウィンドウに表示されたフォーム内にコードを貼り付けます。
 |
| コードを貼り付ける |
「保存」をクリックし、ウィンドウを閉じます。
追加されたウィジェットをドラッグし、投稿記事の下になるように調整します。
レイアウト変更を保存して、プレビューでブログをスクロールさせて、実装されたことを確認してください。
思っていた以上に簡単に実装できたので、拍子抜けしました。
無限スクロールのメリット
ブログに無限スクロールを実装してみて、スクロールして次の投稿記事がどんどん表示されるようになったので、操作性が良いですね。無限スクロールのデメリット
adsense広告の表示位置に困る。広告を表示したい場合は難あり。
