Simplicityテーマで、ページを下にスクロールしていくとサイドバー追従エリアの挙動がおかしくなってしまった時の対処法

Simplicityを使っていて、記事をスクロールダウンして読み進めていくと、サイドバーがビヨーンと上がって「追従エリア」がページ上部に、いきなりくっついてしまうなんてことになったことは、ないでしょうか?

今回は、そういった事が起きた場合の対処方法を紹介します。

スポンサーリンク

サイドバーがビヨーンとなる原因

ページをスクロールしていくと、サイドバーがビヨーンとちらつく原因は、非同期読み込みのブログツールなどに原因があります。

例を挙げると例えば以下のようなTwitterのブログパーツです。

ここでページをリロードしてみてもらえるとわかると思うんですが、このようなブログパーツはページ読み込みに負担をかけないよう後から読み込まれる、非同期読み込みになっています。ですので、「ページ読み込み時」と、「完全にページの読み込みが終わるとき」の表示が違います。(acebookのライクボックスも同様に非同期読み込みになっています。)

こういったブログツールはページ読み込み時、以下のような状態であるのに対し

Twitterブログパーツページ読み込み時

ページが完全に読み込まれた時は、以下のようになります。

Twitterブログパーツページが完全に読み込まれたとき

この高さの違いが、サイドバーの高さをページ読み込み時にjQueryで取得している「追従エリア」に以下のように影響をおよぼしています。

  1. ページ読み込み時(非同期読み込みはまだ終わっていない)サイドバーの高さを取得する
  2. そのときのサイドバーの高さに合わせてjQueryで追従エリアが作動する高さを設定する
  3. 「非同期読み込み」が終わってサイドバーの高さが変わってしまう
  4. 追従エリアはページ読み込み時(非同期読み込みはまだ終わっていない)の高さを想定して動作しているのでビヨーンとなる

僕も、非同期読み込みが完全に終わってから、サイドバーの高さを設定できるようにするため、いろいろ調べたのですが、「これは!」という情報が見つからず、これといった対策はできませんでした。

(※どなたか、jQueryかJavaScriptに詳しい方で、解決法をご存知の方は是非教えていただけると幸いです。)

というわけで、テーマ側で「非同期読み込みパーツ」の対策はできませんでしたが、対処法はいくつかあります。

対処法

僕が思いつく対処法は、以下の3つです。

  1. 「スクロール追従エリア」のウイジェットに中身を入れない
  2. 「スクロール追従エリア」を使う場合は「非同期読み込みパーツ」を使わない
  3. 「スクロール追従エリア」と「非同期読み込みパーツ」両方をサイドバーで使いたい場合は、「非同期読み込んパーツ」が入っているエリアの高さをCSSで初めから指定してやる

以下でそれぞれについて詳しく説明します。

追従エリアのウイジェットに中身を入れない

スクロール追従エリアのウイジェットに中身を入れないと、jQueryが動作しないようにしてあるので追従エリアに特にこだわりがない場合は、中身を空にしておくとサイドバーがビヨーンとなりません。

スクロール追従領域

「非同期読み込みパーツ」を使わない

どうしても追従エリアにウイジェット入れて使いたい場合は、サイドバーに「非同期読み込みするブログパーツ(後から読み込まれるブログパーツ)」を使用しないと、サイドバーがビヨーンとなることはありません。

何個も非同期読み込みブログパーツを使用している場合は、高さの落差が激しいので、よりビヨーンとなります。

CSSを高さ指定する

「追従エリア」も「非同期読み込みパーツ」も使用したいという場合は、CSSで「非同期読み込みブログパーツ」が使われているエリア(要素)の高さをあらかじめ指定してやるとビヨーンとなりません。

ついた非同期読み込みの高さ

非同期ブログパーツの読み込みが完全に終わってから、ブラウザの開発ツールなどで、こんな感じでエリアを選択します。

ブログパーツのエリアを選択

あとは選択エリアのタグを見てウイジェットのIDを取得します。

ウイジェットエリアのID

今回のを例に挙げるとIDは「text-16」でした。

後でstyle.cssに、このIDで高さを指定してやります。

Chromeの開発ツールで要素の高さを見るには、「Computed」タグを選択します。

Chrome高さを見る

FirefoxのFireBugだとレイアウトタブとか。

Firefoxで高さを見る

開発者ツールの使い方がわからないという方は、ピクセル定規を使用しても良いと思います。

これで高さが433pxということがわかったので、style.cssに、先程取得したIDと合わせてmin-heightを指定してやります。

#text-16{
  min-height:443px;
}

するとページ読み込み時(非同期ブログパーツの読み込みがまだ終わってない時)にもブログパーツエリアの高さが保たれるので、サイドバーが不可解な動きをすることはなくなると思います。

※非同期パーツによっては、高さが変わるもの(例えばタイトルの長さが長い記事のリスト読み込んだとき、文字列の折り返しなどで高さが変わるもの)もあるので、完全とまではいかないですが、不可解な動作を最低限に抑えることはできます。

まとめ

「サイドバーチラチラするのが嫌だ」「サイドバーが変な動きをするのが気になる」という方は、上記の3つの対処法のどれかを試してみてください。

GitHubリポジトリ

不具合等ありましたらGitHubに、ご連絡いただけると幸いです。

yhira/simplicity2

スポンサーリンク
アドセンス(大)
アドセンス(大)

フォローする

スポンサーリンク
アドセンス(大)