第五回　慣性スクロールについて

今回の第五回目は画面スクロールをぬるっとスクロール出来る慣性スクロールの方法についてご説明します。

カスタマイズ方法については2パターンの方法があります。

１．全ページに反映させる方法！

コントロールパネル＞設定＞SEO対策＞アクセス解析の設定

２．個別ページのみに反映させる方法！

右クリック＞メタタグ＞メタタグの登録

この上記２パターンの方法で背景色の変更が可能です

実装済みサイト：https://ant2oem.net

コントロールパネル＞設定＞SEO対策＞アクセス解析の設定

本来はAnalyticsの設定を行う場所ですが、それ以外のソースも反映させることが出来ます。
その他のトラッキングコードの</HEAD>タグ直前 こちらに必要なソースをコピーしてください。

※「アクセル解析の設定」からカスタマイズを行った場合、「サイト公開」ボタンを押さないと反映されません！
また編集画面にログインした状態で背景画像が変更されている事を確認出来ませんので、ログアウトしてご確認ください。

※bottom以外の背景色などを変えたい場合は#bottom→#mainなどに変更してください。詳しくはレイアウトからブロック名をご確認ください。

基本全てのレスポンシブデザインで対応しています。

▽記述例▽ 
------------------------
<script src="https://image.secure-cms.net/js/jquery-inertiaScroll.js"></script>

 <script>
  (function($){$(function(){
 $(function(){
  $('body').wrapInner("<div id='wrap'></div>"); //body直下の全てを囲む<div id='wrap'></div>を追加
  $('#wrapper').inertiaScroll({
    parent: $("#wrap") //body直下の全てを囲むタグを指定
});
});
});}(jQuery));
</script>

------------------------

右クリック＞メタタグ＞メタタグの登録

このメタタグの登録から設定を行う場合は設定されたページしか反映されませんのでご注意してください。
上記の点から特定のページだけ反映させたい場合などは、こちらの「メタタグの登録」から設定を行って下さい。

メタタグのエディターを開き、上部のタグの【追加タグ設定】をクリックし</HEAD>タグ直前 に先程と同じソースをコピーしてください。

▽記述例▽ 
------------------------
<script src="https://image.secure-cms.net/js/jquery-inertiaScroll.js"></script>

 <script>
  (function($){$(function(){
 $(function(){
  $('body').wrapInner("<div id='wrap'></div>"); //body直下の全てを囲む<div id='wrap'></div>を追加
  $('#wrapper').inertiaScroll({
    parent: $("#wrap") //body直下の全てを囲むタグを指定
});
});
});}(jQuery));
</script>

------------------------