MENU

1分で完了!はてなブログのサイドバーを固定する方法

f:id:bunntinnmalu:20180113171847p:plain

 

 

サイドバーを固定する方法

その①:フッタに以下のコードを張り付ける

まず、「ダッシュボード」から「デザイン」を開いてください。すると、こんな画面が出てくるので、青丸で囲まれた部分をクリックして画面を切り替えてください。

f:id:bunntinnmalu:20180112163257p:plain

次に、「フッタ」を選択して以下のコードを張り付けてください。

f:id:bunntinnmalu:20180112163453p:plain

<!--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>

 これで一番下のモジュールが固定されました。お疲れ様でした。

最後に

最後までお読みいただきありがとうございました。とても簡単な設定でしたね(^^♪

これで右サイドの空白を活用することが出来ます!