広告収益効果もアップ！wordpressのSTINGER5でサイドバーが消える問題を解決するには

2015/03/02 2015/04/01

はてなブログは本当にSEOに強いの？wordpressと両方使って比較してみた僕の本音

【2017.12.11追記】探しにくい？だから、まとめました！男性ミニマリスト系ブログ10選

楽しかったぞー！パパスさん主催のミニマリスト東京オフに参加したので、簡単にレポ。

当ブログは、wordpressのテーマとしてSTINGER5を使用しているのですが、導入以来悩みの種だったのが、「サイドバーが消える」という現象でした。

今回は、このSTINGERテーマにおける「サイドバー消える問題」を自分なりに解決いたしましたので、その方法をご紹介したいと思います。

一分でわかるこの記事の概要

1STINGER5のサイドバーがスクロールすると消える←今ココ
1.1下にスクロールすると消えるが、上にスクロールすると復活する
1.2最初はウィジェットを疑っていたが、STINGER固有の問題だった
2サイドバーが消える原因はSTINGREのscroll.js
2.1ググると、「消してしまえ」という解決策が多いけれど…
2.2ソースを修正すれば、サイドバーが正しく追尾するようになる
2.3サイドバーが追尾すれば、広告収益化効果が見込める
3scroll.jsの修正方法～STINGER5の場合～
3.1STINGRE5におけるscroll.jsの場所
3.2修正したscroll.js
4おわりに

STINGER5のサイドバーがスクロールすると消える

下にスクロールすると消えるが、上にスクロールすると復活する

まずは、起こった事象について。

STINGER5でページを下方向にスクロールしていくと、ある一定の位置までスクロールした段階でサイドバーが消えてしまう現象が発生しました。

上方向にスクロールし直すと、サイドバーは復活しますが、また下方向にスクロールすると同じ位置でサイドバーがぱっと消失してしまうので、サイドバー下部がほとんど機能していない状態になっていました。

最初はウィジェットを疑っていたが、STINGER固有の問題だった

当初、当ブログではサイドバー最下部にtwitterウィジェットを設置していたため、ウィジェットとブログの設定が干渉し合っているのかな？などと思ってなんとなく放置していました。

しかし、ウィジェットを外してみてもサイドバーが消える現象が改善しないため、単純にSTINGER単体の問題であるとわかりました。

サイドバーが消える原因はSTINGREのscroll.js

ググると、「消してしまえ」という解決策が多いけれど…

調べてみると、どうもSTINGER5テーマのscroll.jsに原因があるようなのですが、WEB上でググってみた限りでは「ファイルを削除orコメントアウト」という解決策が主流でした。

しかし、これはあまりよい解決方法に思えません。

ファイルを削除するということは、scroll.jsの呼び出しでエラーになるということなので、動作に支障がないとしても気持ち悪いです。ブラウザのアップデートと共に、突然動かなくなってしまう日が来ないとも限りません。

また、本来このscroll.jsは何か意図があって存在するjsファイルなのですから、ソースを修正して解決できるなら、修正によって解決するべきかと思います。

ソースを修正すれば、サイドバーが正しく追尾するようになる

実際に修正してみてわかったのですが、どうもこのscroll.jsは、投稿記事がサイドバーより長い場合に、サイドバー下部を追尾させる処理を書いているようです。

おそらくこの記事でも、追尾処理を実感できるかと思いますので、PC表示でこのサイトをご覧のかたは、どうぞページを下にスクロールしながら、その動作を確認してみてください。

サイドバーが追尾すれば、広告収益化効果が見込める

サイドバーの追尾処理は、とても便利な機能です。

たとえば、サイドバーの最下部に広告を設置しておけば、どんなに長い記事をスクロールしても、サイドバー下部の追尾によって、画面に常に広告が表示されることになります。これは、収益最大化をはかる意味で大きな利点です。

また、最近の人気記事一覧を最下部に持ってきて、訪問者を次の記事に誘導するのに役立てる…なんて使い方もできるかと思います。

当然ながら、scroll.jsをコメントアウトしてしまうと、この追尾機能による恩恵は受けられません。せっかくSTINGRE5が標準で用意している機能ですから、修正による有効活用をオススメします。

scroll.jsの修正方法～STINGER5の場合～

さて、では肝心のソースコードの修正ですが、これは至って簡単です。下記のソースコードに一行追加し、二行変更すればよいだけです。

STINGER5とSTINGER3では、ソースコードの場所などに差異があるようなので、気を付けてください(STINGER3では、そもそもscroll.jsがない？)。この記事では、あくまで自分が実際に使用しているSTINGER5について解説させていただきます。

STINGRE5におけるscroll.jsの場所

[wordpress]/wp-content/themes/stinger5ver20141123/js/scroll.js

修正したscroll.js

★マークがついているのが今回修正した箇所です。面倒な場合は、下記ソースをこのままscroll.jsにコピペしてください。そのまま動くかと思います。

ただし、★マークのコメントアウトは、今回のブログ記事のために便宜的につけたものであり、このコメントアウトがある状態での動作確認はしておりませんので、万が一動作しない場合は、★マークのコメントアウト部分を取り除いて下さい。

/*--------------------------------
広告のフロート
-------------------------------*/
(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 &gt; sideTop + sideHeight - winHeight) &amp;&amp; (mainHeight &gt; sideHeight) ? true : false; //★ここを←のように変更
               pos = !nf ? 'static' : (winTop + wrapperHeight) &gt; 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);

100

101

102

/*--------------------------------

広告のフロート

-------------------------------*/

(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);

おわりに

何をしたいコードなのか把握するのに若干手間取ってしまいましたが、結果的に追尾機能を活性化させることができ、記事のネタにもなったので、実りのあるソース改修でした。

ちなみに、サイドバーが追尾すれば広告収益率アップという主旨のことを上記で言っていますが、クリック型広告最大手であるgoogleアドセンスは追尾型広告をポリシーで禁止しているので、注意が必要です。サイドバー下部に仕込むとしたら、また別の広告を設置するべきでしょう。

↑他ミニマリストたちの生息地

最近書いた記事とか

他にも色々書いてます

- wordpress, ブログ運営・開発 STINGER, STINGER5, wordpress, サイドバー, 広告

反応・感想・リクエスト等お待ちしております。

Loading Facebook Comments ...

Stinger5のサイドバー、スクロールすると消えちゃう問題の解消法 | ブログが書けたよ！より:
2015年10月27日 4:00 PM
[…] これを以下のサイトを参考に変更しました。【参考】広告収益効果もアップ！wordpressのSTINGER5でサイドバーが消える問題を解決するには […]
返信

広告収益効果もアップ！wordpressのSTINGER5でサイドバーが消える問題を解決するには

STINGER5のサイドバーがスクロールすると消える

下にスクロールすると消えるが、上にスクロールすると復活する

最初はウィジェットを疑っていたが、STINGER固有の問題だった

サイドバーが消える原因はSTINGREのscroll.js

ググると、「消してしまえ」という解決策が多いけれど…

ソースを修正すれば、サイドバーが正しく追尾するようになる

サイドバーが追尾すれば、広告収益化効果が見込める

scroll.jsの修正方法～STINGER5の場合～

STINGRE5におけるscroll.jsの場所

修正したscroll.js

おわりに

最近書いた記事とか

他にも色々書いてます

反応・感想・リクエスト等お待ちしております。

コメントをキャンセル

節約始めました。～四年で1000万貯める僕が実践した節約術15～

【全公開】四年で1000万貯める僕の生活費はいくら？一ヶ月約8万円で暮らす男性ミニマリスト志向者。

電気代を半分に減らす！ズボラな僕が実施したシンプルな節電術5つ。

ミニマリスト志向の僕が、電子レンジと冷蔵庫を買い直したシンプルな理由。(と、多少のおすすめレビュー)

ミニマリスト的オススメ！世界最小の財布abrAsus (アブラサス)の驚異的な使い勝手を感想レビュー

とある男性ミニマリスト志向者が「捨てなくてよかったぁ」と思ったアイテム2つ。

あなたはどのタイプ？ミニマリストを６つのタイプに分類してみた

【2017.12.11追記】探しにくい？だから、まとめました！男性ミニマリスト系ブログ10選

「バルス」の呪文は何故あんなに短いのか！？滅びの呪文の謎に迫る！！

直球！服を断捨離するコツは？僕が実践しているシンプルな三つの方法