>【STINGER5】サイドバーのスクロール広告が消える!ズレる時の対処法と解説【WordPress】2015/09/17当サイト「はぴすぷ」ではWordPressのテーマ「STINGER5」を使っています。自分で色々と手を加えていく内に、サイドバーのスクロールしても付いてくるコンテンツが、思った位置に止まってくれなくなっていることに気づきました。原因を探るべく、それっぽいものを削除していくと、どうやら一番下に付けていたA8.netのローテーションバナーが原因のようです。外せば直るんですが、外したくはない...。いうわけで解決方法を探しました!スポンサーリンク有力そうなサイトが2つ見つかるどちらもコピペするだけですぐに解決できそう!良かった!今日のブログのネタはコレでサクッと終わらせよう(^q^)そう思って取りかかりました。手を入れる箇所が3行程と少ないので、先にこちらを参考にさせてトライしてみました。広告収益効果もアップ!wordpressのSTINGER5でサイドバーが消える問題を解決するには試してみると、記事の途中なのにサイドバーの一番下の広告が画面の下端に貼りつくようになりました...。́・ω・`)何かエラー出てて、scrolladのdivに色塗ったりして動かしてみるも、付いて来ませんでした。怖いのでバックアップは取っておいて、さっそくコピペして上書きして保存!そして画面を更新っと!なんじゃこりゃあああ!!サイドバーがえらいとこに表示されてスクロールも変な感じに動く...。参考にしているサイトのサイドバーはちゃんと機能している...。僕の場合はこれだけで解決しましたがどうしても解決しないという場合はプラグインで対応しましょう。Extensionどちらかを使えば良い感じに固定できるでしょう。Widgetがおすすめです。記事の終わりにこう書いてるし、もしかしたらプラグイン使うようにしたのかな...?一応、ソースを覗いてみる。記事の内容の「scroll.js」を使っていそうな感じ。プラグインは入れたくない...。勉強の為に自分で何とかする一応今回のサイドバーがうまく動かないのは、「STINGER5」に内蔵されている「js/scroll.js」が原因です。ファイルを開いてみると分かりますが、こちらの方が作成したものをほぼそのまま取り込んでいます。ライブドアみたいにスクロールしたらサイドバーの広告を固定するとりあえず、何をしているかソースを追いつつ考える。CSS分からん...。苦戦すること半日程!何とか謎が解けました!対応することサイドバーや、スクロール広告の高さを監視して、変化があれば吸収してあげる。何でそんなことをしないといけないかと言うと。本来jQueryは画面が準備出来たよ!っていうタイミングで実行されるので自分のサイト内で完結する場合は問題ないことが多いです。広告とかSNS連携ボタンというのは、同じくらいのタイミングで外部サイトにファイル取りに行って、それから作り始めます。「scroll.js」の初期処理が始まる時には、まだ広告等の準備が出来てないので、その高さ分だけズレたりします。「scroll.js」でスクロールを検知するタイミングで、変化があったかをチェックして反映してあげます。対応したソースコードこちらをコピペしてもらうか、GitHubのページからダウンロードして下さい。浮かす必要が無いならstaticでそのまま。画面上部の高さ+広告以下の高さを合わせて、コンテンツの高さを超えるならabsoluteで終端を揃える。それ以外はfixedで広告の頭を固定で浮かして表示する。広告の頭が画面上部に合うように引っ張り上げる。サイドバーが開始する高さまでは除去しないとずれる。浮いてる時に高さが変わるとズレる可能性があるので、上部まで戻れば直るように保険をかける差分が分かりやすく確認できるようにGitHub上に履歴残してあります。気になる人は見てみて下さい。実は2つ目に紹介した方法と大体は同じ後から確認してみると、変数の持ち方や、高さの測定・計算の仕方などで違いはありますが、大体同じようなことをしていました。浮いてる時に更新した時にズレるかもしれないな~と思っていたので、保険かけてるっぽい所は参考にさせてもらいました。同じようなことしてるのに何で、最初にあんなおかしなことになったのかですが、以下が原因でした。サイドバーのIDこれの「#side」が付いて無かったんです。最新?の「STINGER5」だと、投稿ページに<aside>タグが2つ存在します。サイドバーの<aside>タグだけが対象にならずバグっていました...。終わりにこれで広告を載せても、正しく表示されるようになりました!「はぴすぷ」では、サイドバーでスクロールしても付いてくる広告枠でランキング上位記事を表示するようにしています。それが見出しと1位~2位が隠れちゃって、何のリストか分からない状態だったので早めに直せて良かったです。終わらせるつもりが、かなり時間かかってしまった!次に困る誰かの役に立てば幸いです。コメントをキャンセルメールアドレスが公開されることはありません。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*「日本語が含まれない」「URLが4つ以上含まれる」場合は無視されます。【WordPressプラグイン】アンケートを取りたいならコレ!【WP-Polls】日本語翻訳しました!前々からサイト内で、アンケートを取りたいなーと思っていました。...ファビコンを設定する。WordPressにも対応。前回Facebookページを作成して困ったことがありました。...【WordPress】コメント入力フォームのカスタマイズ2jQueryのスライド機能で表示を切替える前回コメント入力フォームが大きくて邪魔だなぁ。...PREV【WordPress】コメント内のURLを自動でリンクにさせない方法!make_clickableを取り除くNEXTどんなお願いも500円~!?【ココナラ】頼むも受けるも自分次第!出品してみた!プロフィールまちゃぬ2015年5月までIT系のエンジニアやってました。現在はフリーランスです(・∀・)雑食系のブログですが婚活をメインにしたいと思っています。一個も婚活記事書いてないけどw詳しくは「当サイトについて」をご覧下さい。(16)スポンサーリンク↑の広告スペースを「ココナラ」にて販売中です。エロ注意】監獄学園11話が面白すぎる!【プリズンスクール】エリンギ・ブロコビッチ【マクドナルド】裏ワザは本当だった!グランドビッグマックのグランドセットで色々試してみた!【エロ注意】【ドラマ監獄学園】8話のネタバレと感想【プリズンスクール】XAMPPのMySQLをコマンドプロンプトから使用する。