フッター部分に極端な余白が出来てしまう場合の修正方法
ご注意:こちらの設定方法は上級者モードでのご案内になります。初心者モードをご利用中の場合は、上級者モードへの切替をお願いいたします。【切替方法はこちら】
PACKではフッター部分(配送・送料についてや支払い方法についてなど)の高さがjavascriptによって制御されています。
各項目の文字量によっては極端な余白が出来てしまう場合があります。その修正方法を解説します。
- [ショップ作成] → [デザイン設定] → 利用中のテンプレートの[デザイン編集]から共通の[HTML/CSS編集]をクリックします。
-
下記を変更します。変更箇所はページ内に4カ所
(ページ内検索にて「footer-notice」で探すと便利です。)
変更前:<div class="footer-notice col <{$fnotice_col_class}>"> ..途中省略 </div>
変更後:<div class="footer-notice-height col <{$fnotice_col_class}>"> ..途中省略 </div>
-
下記を追加します。
追加位置は任意ですが下記にならっていただくと問題なく動作します。
追加するコード:<script> $(function () { $(window).load(function () { $('.footer-notice-height').tile(2); }); $(window).resize(function () { $('.footer-notice-height').tile(2); }); }); </script>
追加する位置(HTML編集の最上部あたり):<script src="//img.shop-pro.jp/tmpl_js/79/jquery.tile.js"></script> <script src="//img.shop-pro.jp/tmpl_js/79/smoothscroll.js"></script> <script src="//img.shop-pro.jp/tmpl_js/79/utility.index.js"></script> ▼▼▼▼▼ こちらへ追加する(追加後はこのようになります) ▼▼▼▼▼ <script> $(function () { $(window).load(function () { $('.footer-notice-height').tile(2); }); $(window).resize(function () { $('.footer-notice-height').tile(2); }); }); </script>
- 変更・追加しましたら、[更新]ボタンをクリック。
- サイトにアクセスしてフッター部分の余白が調整されている事を確認します。