はてなブログのサイドバーを固定するコードを作りました。
サイドバーにはいくつか項目（モジュール）がありますね。はてブの多い順やプロフィール、カテゴリ、月毎の表示など。
私が作ったコードは、一番下に設定したモジュールが固定されます。
このようなサイドバーの固定は他のブログでも紹介されていますが、いくつかの問題点がありました。
問題点
- サイドバーが長くて、フッターを覆ってしまう。
- メインのコンテンツよりもサイドバーが長い場合、おかしな挙動をする。
- スマホでおかしな挙動をする。
- ウィンドウサイズが変わった時、おかしな挙動をする。
- 固定される位置がおかしい
これらの問題点が見つかりましたので、これを解決できるコードを書いてみました。
実装したかった機能としては、フッターの手前で止まり、スマホでは固定を解除。
これらをすべて解決できるようにコーディングしました。
このブログでも途中で固定されるサイドバーにしているので、PCで観ている方は動作確認できると思います。フッターまでスクロールすると、フッター手前で止まります。
そして、ウィンドウサイズを狭くすると、固定が解除されて通常の位置に戻ります。
目次
コピペ一発でサイドバーの固定
今回は二つのコードを用意しました。通常は最初のコードでOKなんですが、私みたいに欲張ってサイドバーをズラーっと長くすると読み込み時間が遅くなることがあります。
読み込みが遅いと、一番下のサイドバーが変な場所に固定されてしまう不具合が発生してしまいます。そんな、読み込みが遅いサイドバー用のコードも作りました。
基本的にはコピペ一発でOKなんですが、注意事項もあるので読んでください。そして、ウィンドウサイズを変えたり、一番下までスクロールしたりなどの、動作チェックは一応して下さい。
スポンサードリンク
スタンダード版
※ここにコードが表示されない場合は再度ページを読み込んでください。
このコードをデザイン→カスタマイズ→フッターにコピペしてください。
コード内に'top': '10px'と書いている部分が固定される位置です。数値を大きくすると、固定する位置を下に調整することができます。上部に固定のヘッダーやメニューとかぶっている場合は値を大きくして位置を下げてください。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
↑↑この部分を他の場所で既に記述している場合は削除してください。
サイドバーの表示が遅い人向け
こんなブログはサイドバーの表示が遅くなります。
- 欲張ってたくさんの項目をサイドバーに表示させている。（私のような人）
- パンくずリストを利用するために、カテゴリ欄の書き換えが発生する。（私のような人）
- TwitterのTLを表示している。（私のような人）
私は上のリストにすべて当てはまるので、サイドバーの表示が遅くなってしまいました。
サイドバーの表示が遅いと、一番下のモジュールが変な位置で固定されてしまうので、下記のコードを利用してください。
このコードは、サイドバー固定の動作を「5秒後」に動作するようにしています。
※ここにコードが表示されない場合は再度ページを読み込んでください。
コードの一番下にある数字「5000」は5000ミリ秒、つまり「5秒」を意味します。「10000」に書き換えると10秒後に書き換えることができます。数秒後に動作させて、サイドバーの読み込み遅延に対応させることができます。
コード内に'top': '10px'と書いている部分が固定される位置です。数値を大きくすると、固定する位置を下に調整することができます。上部に固定のヘッダーやメニューとかぶっている場合は値を大きくして位置を下げてください。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
↑↑この部分を他の場所で既に記述している場合は削除してください。
注意事項
- 当記事で紹介したコードを利用して万が一不具合が起きた場合、責任は負いかねますので、カスタマイズは自己責任でお願いします。
- ウィンドウサイズを変えたり下までスクロールしてみたり、スマホで表示を確認するなどの動作チェックは念のために行ってください。
- アドセンス広告をサイドバーに固定表示させるのはアドセンス規約違反です。
もし不具合などあれば、ご一報ください。
サイドバー固定の効果
私は「関連するエントリ」をサイドバーに固定配置していますが、「ページ/セッション」は特に変化していません。まだ数日しか経ってませんが。他の項目なども試しつつ様子を見てみようと思います。
他にもこんな記事書いてます。