ブログ

    はてなブログのサイドバーを追従(固定)するコピペカスタマイズ

    はてなブログのサイドバーを追従(固定)するコピペカスタマイズ

    パソコンからが読者来た場合、サイドバーを追従していないとスペースがあまって不格好ですよね。

    はてなブログを使っている人は、簡単にCSSだけでサイドバーの追従ができますよ。

    以前Googleが「広告は追従しちゃダメ」なんて言っていましたが、今は解禁になっているので、アドセンスの広告も入れることが出来るし、他にもカテゴリを入れたり、おすすめ記事を追従したりと、好きなもの何でも固定できます。

    コピペで出来るので2分あれば完成します。

    サイドバーを固定(追従)する方法

    これは当然PCのみですが、サイドバーを追従するカスタマイズです。

    読者が記事を読み進めて下の方に行くと、サイドバーって見えなくなりますよね?なので、モジュールを追従するように設定してあげます。

    これはサイドバーの最後のモジュールを追従する方法なので、下図のように固定したいモジュールをサイドバーの最後に持ってきてください。

    まずは「デザイン」→「カスタマイズ」→「サイドバー」に行き、好みの項目をサイドバーの最後に持っていきます。私は、「アフィリンクもOK」というASPのHTMLを貼り付けたものです。(サイドバーに広告を貼る方法はこちらからどうぞ)

    はてなブログのサイドバーを固定する方法

    次に以下のコードを、フッタにコピペしてください。

    はてなブログのサイドバーを固定する方法

    <!–サイドバー固定–>
    <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>

    するとこんな感じになってと思います。

     

    最後に

    ほんとに2分で終わったでしょ?

    他にもいろいろなカスタマイズを紹介しているので、こちら「はてなブログのカスタマイズ集・すべてコピペでOK」も一緒にどうぞ。