【はてなブログ】画面スクロール時に関連記事や注目記事を固定表示する

サイドメニューなどがある2カラム構成以上のはてなブログで、本文が長い記事を開いて画面を下へスクロールすると、記事の本文があるカラムは内容が続いているのに、サイドメニューなどがあるカラムは空っぽになってしまいます。

▼こういう状況

見た目のバランスも悪くなりサイドメニュー分の幅がもったいないと考え、この空きスペースに関連記事などを表示してはどうかと考えました。

▼こんなイメージ

この関連記事は、スクロールにあわせてフローティングして常に画面右側にいてくれるというわけです。

手順

方法自体は非常に簡単です。

まずは関連記事などの表示したいコンテンツのコードを準備します。自作しても構いませんし、今回私ははてなブログの標準の機能で表示させることが出来る「関連記事」を利用することにしました。

普段はサイドバーに表示させて、ある程度スクロールするとフローティングするようにしようという訳です。

始めに【フッタ】に以下のコードを追記します。

$(window).scroll(function(){
  var now = $(window).scrollTop();
  if(now > 2300){
    $("#box2-inner > .hatena-module-related-entries").addClass("floating-box");
  }
  }else{
    $("#box2-inner > .hatena-module-related-entries").removeClass("floating-box");
  }
 });

赤く示した2300の数字はサイドバーが途切れる位置になるように調整してみてください。数字を減らせば上へ、数字を増やせば下へ基準となる位置が動きます。

なお、関連記事ではなく注目記事を表示させたい場合にはhatena-module-related-entriesをhatena-module-entries-access-rankingに変更してください。

次に【デザインCSS】に以下のコードを追記します。

.floating-box{
  position:fixed;
  top:100px;
  right:100px;
  width:300px;

}

もし位置や表示サイズが気に入らない場合には、topで上下位置、rightで左右位置、widthで幅を指定できます。