【はてなブログ】サイドバーの一番下にあるモジュールを固定する方法
こんばんわ。佐伯(@saeki_teizidash)です。
今日は、あるといろいろ捗るサイドバー固定のカスタマイズを紹介したいと思います。
サイドバー固定とは
上の画像の赤枠で囲われた部分（サイドバー）が下にスクロールしてもずっとついてくることを指します。
通常、サイドバー固定などをしていない場合、下にスクロールをしていると右側に空白が生まれてしまいます。
それはもったいない、もっと自分の記事やプロフィールを見て！！ということでサイドバー固定をする人が増えてきています。
ちなみに、サイドバー固定は便利な機能ですが広告を常時固定しておくのはアドセンス規約違反になってしまうので気を付けてくださいね。
広告を固定している人はなんらかの契約をしている場合があるので普通の人はできないようです。
詳しくは下の記事を参照。
なにわともあれ、サイドバー固定はとても便利なので活用していきましょう。
サイドバー固定方法
参照したサイト
参考サイトは以上の２つを参照しました。ありがとうございました。
参考にした記事のコードで問題が発生
参照した１番目のサイト（
コピペ一発！サイドバー固定！ - ゆとりごと
）で紹介されているソースコードでは、サイドバーの１番上にあるカスタマイズしたプロフィールが固定されてしまうという問題が発生してしまいました。
javaScriptにあんまり詳しくないので確かなことはわかりませんが、導入したソースコードではカスタマイズしたプロフィールのタグを認識してしまいサイドバーの一番下にあるモジュールを認識してくれないことが原因として挙げられると思います。
また、参照した２番目のサイト（はてなブログのサイドバーの一番したのモジュールをスクロール固定してみる - IT Geek Girl）ではサイドバーの一番下にあるモジュールは固定されるのですが、サイドバーの幅が大きくなってしまうなどの不具合がありました。
なので、今回紹介するソースコード（コピペコード）はそのような問題を解決してあるコードを表記しています。
コピペコード
お待たせいたしました。
以下のコードをデザイン＞カスタマイズ＞フッタに表記します。
<!--jQuery--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <!--サイドバー固定--> <script> $(window).load(function() { var sideLast = $(".hatena-module").filter(":last"); var sideLastTop = sideLast.offset().top + 450; var sideLastWidth = sideLast.width(); var win = $(window); win.scroll(function(){ if(win.scrollTop() > sideLastTop) { sideLast.css("position",'fixed'); sideLast.css("top",'20px'); sideLast.css("width",sideLastWidth); }else{ sideLast.css("position",'relative'); }; }); }); </script>
７行目の 450 の部分は、下にスクロールされたときにサイドバーを固定するタイミングです。
１４行目の 20px の部分は、サイドバーを固定した時の表示場所です。数字が大きいほど画面上から離れて表示されることになります。
ここの値は、それぞれのブログに合わせて表記を変えてください。
これでサイドバーの一番下が固定されたかと思います。
最後に
今回は、自力で解決することができましたが今後またブログカスタマイズをしている際に不具合が起きた場合に解決できるかどうか…
そのためにもweb系の言語を学ぶのもやはり重要になってきますね。
ブログをカスタマイズする上で、html・css・javaScriptはやはり少しは学ばないとダメですね。
というわけで、サイドバーの一番下のモジュールを固定する方法を紹介させていただきました。
ぜひぜひ真似してみてくださいね。
おしまい。
