ドリリウム

趣味をとことん突き詰めるブログ。ペット / フィンチ / 鳥 / 文鳥 / ジュウシマツ / 写真 / カメラ / 高知 / 釣り / DIY / バイク / 車 / 家具制作 / アクアリウム / コーヒー / 地方移住 / ルノー・ルーテシア / SUZUKI ST250 E type / EOS Kiss M

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

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

▼こういう状況

f:id:katamichinijikan:20181102110313p:plain

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

▼こんなイメージ

f:id:katamichinijikan:20181102110440p:plain

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

手順

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

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

f:id:katamichinijikan:20181102110656p:plain

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

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

$(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-entrieshatena-module-entries-access-rankingに変更してください。

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

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

}

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

当サイトは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、 Amazonアソシエイト・プログラムの参加者です。