サイドメニューなどがある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で幅を指定できます。
