福岡散歩ブログ

カテゴリー

Jstorkテーマ、サイドバーのスクロール領域がズレる問題の解消

Jstorkテーマ、サイドバーのスクロール領域がズレる問題の解消

本日のおすすめ記事

【水ダウ】「新元号当てるまで監禁企画」がマジで名場面の連続だった【感想】

まさか「水曜日のダウンタウン」で涙を流すとは思いませんでした・・・。かねてより話題だった「新元号当てられるまで脱出できない生活」企画...

この記事はたぶん 2 分で読めます。
ぱっかん
執筆者:ヘタレブロガーのぱっかん(@pakkan316

ワードプレスの有料テーマ「Jstork」。
1万円で購入し当ブログで僕に適用しているのですが、「サイドバーのスクロール追従箇所が上手く機能しない」というバグに遭遇しました。

※当記事は
「Jstork サイドバー バグ」
「Jstork スクロール固定 ズレる」
「Jstork スクロール追従 ズレる」
などのワードで検索される方におすすめです。

バグの内容

PC版右側のサイドバーには、「人気記事」というコンテンツが表示されていると思いますが、ここを「スクロール領域」に設定しています。

だから、スクロールして「人気記事」という項目が画面上部に到達したら、そのままFixされスクロール固定となるはずです。

しかし、ちょうど上部で固定されるはずなのに、ちょっと上部に入り込んで固定されてしまいます。

つまり、「人気記事」のタイトルは画面外に行ってしまい、そのコンテンツの途中から始まってしまうということです。

Jstorkテーマを導入した時点でこの問題が発生していました。

僕の場合は、この「スクロール追従エリア」に「人気記事」が表示されるようにしてたんですが、バグ発生によって見事に見出しの「人気記事」が上にズレこんでます。

 

なんでや。

原因

原因は「Google Adsenseの自動広告」でした。

自動広告が始まったのはつい最近のことです。
本来アドセンス広告は、挿入したい箇所に自分でコードを貼り付けて表示させる必要がありました。

しかし自動広告を導入すると、Googleのアルゴリズムによって最適だと判断された箇所にも自動で何かしらの広告が表示されるようになります。

今回のバグは、その兼ね合いで発生したバグのようです。

自動広告を導入したら、サイドバーにも広告が表示されるようになりました。
そしてそれは、ページによってあったり無かったりします。

で、表示された場合はバグが発生します。

これは、サイドバーに広告が表示された場合、Jstork君が、「そんな後付けで表示される広告にまで対処できないよ!」と言っているからなんですね。

解決法

 

jstorkテーマフォルダの中にある「sidebar.php」の19行目付近

$(document).ready(function() {

$(window).load(function() {

に書き換えてあげると解決します。

解決する理由

$(document).ready

 

というのは、「HTMLが全部読み込まれてからこのプログラム(スクロール追従)を発動するよ」という意味です。

しかし「$(document).ready」には、「画像」は含まれません

対して
$(window).load(function() {
は、

「画像含む全てのHTMLが読み込まれてから発動するよ」という宣言なので、自動広告(ほぼ画像だし)が読み込まれてから発動するんです。

まとめ:もっと良い解決策があるかも

いかんせんjquery初心者なので、もっと他に良い解決策があるかもです。
もしくはJstork開発者がバージョンアップで対策してくれるかも。

もし公式がバージョンアップ版をリリースしたら、素直にそちらを反映させましょう。




Trash Area(筆者のバンド)のオリジナル曲

コメントを残す

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

この記事をこねた人

名前:ぱっかん
web系の会社で働きつつ、副業(趣味)でメディア運営をやっています。

運営してるメディア
ぱっかんブログ(当サイト)
やるゲーブログ
福岡散歩ブログ

「内省」という資質に優れており、それを活かした映画系の記事が得意。
→「当ブログ」と「ぱっかん」について

【職業】web諸々
【趣味】考えをまとめる・散歩・映画
【好きなファッション】ウォーキングデッドに出てきそうな奴
【好きな食べ物】ネオソフト・きなこご飯
【ストレングスファインダーの結果】着想/最上志向/内省/共感性/運命思考