ブログ運営主について

ぱっかんのツイート

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

本日のおすすめ記事

【SAWシリーズ】「好きな被験者ランキング」TOP10を発表するよ

こんにちは。ぱっかんです。 僕はSAWシリーズが好き過ぎて、SAW ~ SAW3D(ソウ・ザ・ファイナル)まで何度も何度も観てます。 ...

だいたいの人におすすめの記事
この記事はたぶん 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(筆者のバンド)のオリジナル曲

本日のおすすめ記事

【SAWシリーズ】「好きな被験者ランキング」TOP10を発表するよ

こんにちは。ぱっかんです。 僕はSAWシリーズが好き過ぎて、SAW ~ SAW3D(ソウ・ザ・ファイナル)まで何度も何度も観てます。 ...

だいたいの人におすすめの記事

コメントを残す

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

CAPTCHA


この記事をこねた人

名前:ぱっかん
「臆病なのに幸福度で言えばたぶん福岡でTOP3に入る」と自負してます。また、病みやすいのを良いことにあんまり頑張らずに生きてます。
幸せ。

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

目指せ1日30,000pv
【職業】web諸々
【趣味】考えをまとめる
【好きなファッション】ウォーキングデッドに出てきそうな奴
【好きな食べ物】ネオソフト・きなこご飯
【好きなダメージの与え方】お前の姉ちゃんの四股名なんだっけ?
【ストレングスファインダーの結果】着想/最上志向/内省/共感性/運命思考

音源公開してます。
youtubeチャンネル