はてなブログのサイドメニュー・サイドバーを固定表示する方法
下まで読んでもついてくるサイドメニューの設定。
WEBサイトを見ていると、下まで見ていったときにもメニューがついてくるサイトがあります。
サイト内で情報を探すにあたり、メニューが常に画面内にあるというメリットは大きいものです。
今回はサイドメニューを固定で表示する方法についてご紹介します。
【このページを読むメリット 】
- サイドメニューを固定表示する方法がわかる
- サイトの閲覧数・閲覧時間が伸びる
- 収益が上がる
それでは今回のコンテンツです。
固定表示用コードをコピペするだけ
サイドメニューを固定表示する手順はたった１つだけ。
以下のコードをコピーするのみです。
<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>
こちらのコードはあるサイトからお借りしました。ありがとうございます。
【はてなブログ】サイドバーの一番下にあるモジュールを固定する方法 - 明日こそ、定時
こちらのコードを、デザイン設定 ＞ カスタマイズ ＞ フッタ に張り付ければ、サイドメニューの固定が完了です。
サイドメニューで一番下に表示しているパーツが、画面を下にスクロールしてもついてくるようになります。
偉大な先輩に感謝。
サイト内の巡回率もアップ！
せっかくいいコンテンツがあっても、閲覧者が気づかなければ素通りされてしまいます。
記事を読んでいる途中に閲覧者が求めている情報がないことに気付き、サイトを離脱してしまう可能性があるときに、サイドメニューが常に横にあれば次のページへ促すことができます。
よりよいサイト構成のために、活用いただけると幸いです。
【関連ページを表示したら収益化も】
アフィリエイトは自分のサイトに広告を表示し、申込の件数によって報酬がもらえる仕組みです。メディアを持っていれば、働かなくても収入が得られるビジネスとして、根強い人気があります。
興味のある方は下記のリンクからご覧ください。
【バリューコマース】
【もしもアフィリエイト】
