当サイトではないのですがEnjilogさんのAffinger5を購入してサイト運営をしています。
とても使い勝手が良く重宝しているのですが今までのStingerシリーズ、Affingerシリーズと同様に1点すごく気になる事があります。
題名の通りPC画面で下へスクロールする時にサイドバーが途中で消えてしまう現象。
どうにかならないかと悩んでいましたが解決したので備忘録がてらにブログ記事にします。
Stingerの場合はScroll.jsを変更
STINGRE5におけるscroll.jsの場所は以下の通りです。
[wordpress]/wp-content/themes/stinger5ver20141123/js/scroll.js
修正したscroll.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
/*-------------------------------- 広告のフロート -------------------------------*/ (function(jquery) { jquery(document).ready(function() { /* Ads Sidewinder by Hamachiya2. http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder */ var main = jQuery('main'); // メインカラムのID var side = jQuery('aside'); // サイドバーのID var wrapper = jQuery('#scrollad'); // 広告を包む要素のID if (main.length === 0 || side.length === 0 || wrapper.length === 0) { return; } var w = jquery(window); var wrapperHeight = wrapper.outerHeight(); var wrapperTop = wrapper.offset().top; var sideLeft = side.offset().left; var sideTop = side.offset().top; //★この一行を追記 var sideMargin = { top: side.css('margin-top') ? side.css('margin-top') : 0, right: side.css('margin-right') ? side.css('margin-right') : 0, bottom: side.css('margin-bottom') ? side.css('margin-bottom') : 0, left: side.css('margin-left') ? side.css('margin-left') : 0 }; var winLeft; var pos; var scrollAdjust = function() { sideHeight = side.outerHeight(); mainHeight = main.outerHeight(); mainAbs = main.offset().top + mainHeight; var winTop = w.scrollTop(); winLeft = w.scrollLeft(); var winHeight = w.height(); var nf = (winTop > sideTop + sideHeight - winHeight) && (mainHeight > sideHeight) ? true : false; //★ここを←のように変更 pos = !nf ? 'static' : (winTop + wrapperHeight) > mainAbs ? 'absolute' : 'fixed'; if (pos === 'fixed') { side.css({ position: pos, top: -sideHeight + winHeight, //★ここを←のように変更 bottom: '', //★ここを←のように変更 left: sideLeft - winLeft, margin: 0 }); } else if (pos === 'absolute') { side.css({ position: pos, top: mainAbs - sideHeight, bottom: '', left: sideLeft, margin: 0 }); } else { side.css({ position: pos, marginTop: sideMargin.top, marginRight: sideMargin.right, marginBottom: sideMargin.bottom, marginLeft: sideMargin.left }); } }; var resizeAdjust = function() { side.css({ position:'static', marginTop: sideMargin.top, marginRight: sideMargin.right, marginBottom: sideMargin.bottom, marginLeft: sideMargin.left }); sideLeft = side.offset().left; winLeft = w.scrollLeft(); if (pos === 'fixed') { side.css({ position: pos, left: sideLeft - winLeft, margin: 0 }); } else if (pos === 'absolute') { side.css({ position: pos, left: sideLeft, margin: 0 }); } }; w.on('load', scrollAdjust); w.on('scroll', scrollAdjust); w.on('resize', resizeAdjust); }); })(jQuery); |
Affinger5 管理設定で簡単にスクロール途中で消える現象を修正
Affinger5のサイドメニューから「Affinger5 管理設定」をクリック。
下から2つ目「その他」→「その他の設定」で以下の項目にチェックを入れる。
「PC閲覧時にサイドバーの最下部広告エリアをスクロール追尾しない」
チェックを入れた後、スクロールした時にサイドバーが消えないかチェックしました。
とくに問題はありませんでした。（これでも消えてしまうようなら連絡ください。記事の修正、削除をします。）
まとめ
Affinger5を利用しているほぼほとんどのサイトがこの「PC閲覧時にサイドバーの最下部広告エリアをスクロール追尾しない」にチェックを入れていないのではないでしょうか？（自分調べ）
一時期この追尾型広告スクロールが流行っていました。
しかし厳密にはGoogle Adsenseの規約違反との噂もあります。
個人的にはオススメしていません。
サイドバーの追尾型スクロールを利用していない人は非表示にして見てください。
PC画面でのユーザビリティが上がりますよ。
ちなみにAffinger5を利用したサイトは、まだきちんとカスタマイズしていない状態で新たなサイトを立ち上げています。
ブログの基本とも言える100記事達成の後にデザイン的なカスタマイズをしよう思っています。
