ブログカスタマイズ

コピペだけでOK!STINGER 8でサイドバーが追尾せず変な位置で固定される問題の解決策

投稿日: 投稿者:

頭を抱えて困った様子の女性

現在DigiLocusではWordPressの無料テーマSTINGER 8を使用しています。

STINGERシリーズは国内でトップクラスの人気を誇るテーマで、筆者はSTINGER 3の頃から愛用していて非常に気に入っているのですが、昔から気になっている点もあります。

サイドバーにはスクロール広告用に追尾エリアが設けられていますが、ここにバナー画像のコードを記述すると一部が見切れてしまう位置で固定されてしまい、正常に追尾しなくなることがあるんですよね。

今まではそういったバナーを避けて使用していましたが、せっかく最新のSTINGER 8を使い始めたことですし、この問題の解決に挑戦してみました。

プラグイン不要、コピペするだけで簡単に修正できるコードを掲載してあるので、STINGER 8で同様の問題に悩んでいる方がいましたらぜひ利用してください。

スポンサーリンク

サイドバーの追尾が正常に機能しない

サイドバーの追尾エリアにバナー画像を貼ると変な位置で固定されてしまったり、酷い場合だと画面から消えてしまうことがあるんですよね。

この問題について今回初めてググってみたのですが、どうやらこの事象はscroll.jsというSTINGER 8に含まれているJavaScriptファイルと、jQueryと呼ばれるJavaScriptライブラリが引き金になって起きているようです。

本来jQueryは画面が準備出来たよ!っていうタイミングで実行されるので自分のサイト内で完結する場合は問題ないことが多いです。

ですが、広告とかSNS連携ボタンというのは、同じくらいのタイミングで外部サイトにファイル取りに行って、それから作り始めます。

つまり「scroll.js」の初期処理が始まる時には、まだ広告等の準備が出来てないので、その高さ分だけズレたりします。

出典:【STINGER5】サイドバーのスクロール広告が消える!ズレる時の対処法と解説【WordPress】|はぴすぷ

したがってこの問題を解決するためにはscroll.js周辺のファイルを修正してやる必要があります。

しかし筆者はJavaScriptなんてほとんど触ったことがないのでろくに書けません。そこでなるべく簡単にできそうな解決策を探してみました。

STINGER 8におけるスクロール問題の解決策

ぶっちゃけるとSTINGER 8向けの情報が少なく、簡単かつ完璧な解決策は見つかりませんでした。現在はSTINGER PLUS2やAFFINGER4などの派生テーマのほうが人気なのでしょうか…。。

そこで旧バージョンのSTINGER 5やSTINGER PLUS向けなどの記事も読み漁った結果、ざっくり4通りの解決策が見えてきました。

  1. scroll.jsを削除する
  2. 追尾機能を利用しない
  3. 代替となるプラグイン(拡張機能)を追加する
  4. テーマファイルを修正する

わりと多かったのが1つ目のscroll.jsを削除するという方法。しかしこれではせっかくのスクロール広告用エリアが無駄になってしまいます。2つ目の追尾機能そのものを利用しないのと同じです。

3つ目のプラグインに頼る方法もなるべく選びたくありません。プラグインの開発が停止してしまうとセキュリティ的な問題が発生する恐れがありますし、サイトの表示速度に与える影響も気になります。プラグインは便利ですしこのサイトでもまったく利用していないわけではありませんが、リスクは小さいに越したことがありません。

となればやはり4つ目ですね。STINGER 8に含まれているテーマファイル、scroll.jsの修正に挑んでみます。

スクロール問題を解決するJavaScriptコード

旧バージョンのSTINGER向けの修正コードはいくつかのブログで公開されていますが、STINGER 8ではscroll.jsの記述方法が変わっているため、それらをそのままコピペすることは不可能でした。

ちなみに参考にさせていただいたのは下記の2サイトで、どちらもやっていることは同じです。

参考:広告収益効果もアップ!wordpressのSTINGER5でサイドバーが消える問題を解決するには|物を捨てきれないなりにミニマリスト目指す。

参考:WordPress STINGER PLUS+ スクロールの途中でサイドバーが消える問題の解決方法|フィールドログ

そこで変数などの記述方法を読み替えてSTINGER 8に対応させてみたいのですが、そうすると今度はバナーが画面下部に張り付いてしまいました。。

あれこれ試行錯誤を続けた結果、上記のサイトで紹介されている修正内容を1つだけ行うことで完璧に正常に動作するようになりました!なんでやねん!

(function (a) {
  a(function () {
    var d = a(".st-main");
    var g = a("#side .st-aside");
    var i = a("#scrollad");
    if (d.length === 0 || g.length === 0 || i.length === 0) {
      return
    }
    var c = a(window);
    var e;
    var k;
    var j;
    var f = function () {
      if (typeof e !== "undefined") {
        return
      }
      e = {
        wrapper: {
          height: i.outerHeight(),
          offset: {
            top: i.offset().top
          }
        },
        side: {
          offset: {
            left: g.offset().left, //末尾にコンマを追加
            top: g.offset().top //この1行を追加
          },
          margin: {
            top: g.css("margin-top") ? g.css("margin-top") : 0,
            right: g.css("margin-right") ? g.css("margin-right") : 0,
            bottom: g.css("margin-bottom") ? g.css("margin-bottom") : 0,
            left: g.css("margin-left") ? g.css("margin-left") : 0
          }
        }
      }
    };
    var h = function () {
      if (window.matchMedia && window.matchMedia("screen and (min-width: 960px)").matches) {
        return true
      }
      return false
    };
    var l = function () {
      var p = g.outerHeight();
      var r = d.outerHeight();
      var o = d.offset().top + r;
      var m = c.scrollTop();
      var n = c.height();
      var q = (m > e.wrapper.offset.top) && (r > p) ? true : false;
      k = c.scrollLeft();
      j = !q ? "static" : (m + e.wrapper.height) > o ? "absolute" : "fixed";
      if (j === "fixed") {
        g.css({
          position: j,
          top: "",
          bottom: n - e.wrapper.height,
          left: e.side.offset.left - k,
          margin: 0
        });
        g.addClass("is-fixed")
      } else {
        if (j === "absolute") {
          g.css({
            position: j,
            top: o - p,
            bottom: "",
            left: e.side.offset.left,
            margin: 0
          });
          g.addClass("is-fixed")
        } else {
          g.css({
            position: j,
            marginTop: e.side.margin.top,
            marginRight: e.side.margin.right,
            marginBottom: e.side.margin.bottom,
            marginLeft: e.side.margin.left
          });
          g.removeClass("is-fixed")
        }
      }
    };
    var b = function () {
      if (!h()) {
        g.css({
          position: "static"
        });
        g.removeClass("is-fixed");
        return
      }
      g.css({
        position: "static",
        marginTop: e.side.margin.top,
        marginRight: e.side.margin.right,
        marginBottom: e.side.margin.bottom,
        marginLeft: e.side.margin.left
      });
      e.side.offset.left = g.offset().left;
      k = c.scrollLeft();
      if (j === "fixed") {
        g.css({
          position: j,
          left: e.side.offset.left - k,
          margin: 0
        });
        g.addClass("is-fixed")
      } else {
        if (j === "absolute") {
          g.css({
            position: j,
            left: e.side.offset.left,
            margin: 0
          });
          g.addClass("is-fixed")
        } else {
          g.removeClass("is-fixed")
        }
      }
    };
    if (h()) {
      f();
      l()
    }
    c.on("scroll", function () {
      if (h()) {
        f();
        l()
      }
    });
    c.on("resize", function () {
      if (h()) {
        f();
        l()
      }
      b()
    })
  })
})(jQuery);

そのまま載せてしまうと200行を超えるので29行目以降は折り畳みましたが、ダブルクリックするか右上のコピーボタンを押すとスクロールで全文が表示されるようになります。scroll.jsを一切書き換えていない方は、これをそのままコピペしてもらえればOKです。

実際にやったことは27行目に1行追加して、それに伴い26行目の末尾にコンマを追加しただけなので、scroll.jsをカスタマイズ済みの方はそのように修正してください。

また今後STINGER 8をアップデートするとscroll.jsの内容が書き換えられて問題が再発する可能性があります。その際はまたコピペするか、例の1行+コンマを追加する必要があるのでご注意を。

結果だけ見れば超簡単に解決しました。しかしここに至るまでが長かったです…疲れた…

なぜSTINGER 5やPLUSと同様の方法だと上手く動作しないのかは分かりませんが、今のところDigiLocusでは上記のコードで上手く動作しているはずです。もし異常が発生していればコメント欄などから教えてください。。

以上、お役に立てれば幸いです。

-ブログカスタマイズ
-,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

Akismet 設定

Akismetの設定は簡単!WordPressのスパム対策に必要なプラグイン

一生懸命作ったサイトに大量のスパムコメント…、そんな嫌な思いをしないで済むために、「Akismet Anti-Spam(アンチスパム)」のプラグインを使うのをおすすめします。 設定しておくと、自動でス …

STINGER8 新着記事 非表示

STINGER8のトップページで新着記事を非表示にする方法!易しい条件分岐

ブログをやってると、ここをもっとこうしたい~とか自分好みにカスタマイズしたくなってきますよね! でもそれって難しそう…? 今回は、まずブログカスタマイズの中でも簡単な部分から変えてみることにしましょう …

お問い合わせフォーム WordPress

お問い合わせフォームをWordPressのブログに設置!プラグインContact Form 7が便利

自分のブログに、「お問い合わせフォーム」って…つけた方がいいですよね? 自分のブログから連絡を取りたい!と思ってくれた方にとっても、連絡を受け取る側にとっても、分かりやすくスムーズに管理できるのがお問 …

ブログ 開設

ブログの開設と作成方法を初心者向けに解説!WordPressでの始め方

初心者の頃ブログを作るっていうと、「無料ブログでいいじゃん!」「WordPressなんて難しいの使わなくても、FC2とか…もっと初心者向けなブログあるでしょ?」と思う人が多いかもしれません。 確かに無 …

ブログ(WordPress)を複数人で管理する方法は?権限の違いも画像で解説

このブログ「DigiLocus」は今は2人、そのうち3人?の複数人で運営してますので、WordPressもそれぞれ使えるようにしてます。 WordPressを複数人で使えるようにすること自体は簡単です …