Bloggerでサイドバーをスクロール固定する方法｜jQueryで簡単に実装

2026/02/15

Bloggerでサイドバーをスクロール固定する方法｜jQueryで簡単に実装

2/15/2026 By まつゆうカスタマイズ No comments

Bloggerで長い記事を公開していると、サイドバーにあるガジェット（人気記事、プロフィール、広告、SNSリンクなど）を常に表示させたいと思ったことはありませんか？

サイドバーをスクロールに追従させることで、ユーザーが便利にアクセスでき、回遊率の向上にもつながります。

今回は jQueryを使ったスクロール固定の方法を紹介します。CSSのみではテーマによって崩れることもあるため、jQueryでの安定した実装をベースに解説します。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

このスクリプトは jQuery が読み込まれていることが前提です。テーマに読み込まれていない場合は上のコードを <head> 内に追加してください。

固定したい要素の確認

今回は例として、固定したいガジェットが以下のようなHTMLの場合を想定します：


<div class="widget HTML" data-version="1" id="HTML4">
    <!-- 固定したいガジェット内容 -->
</div>

id="HTML4" を使ってjQueryで対象を指定します。

jQueryでスクロール固定

以下のスクリプトをテーマの </body> タグ直前に貼り付けます。


<script type="text/javascript">
jQuery(function($){
    var target = $('#HTML4');             // 固定対象の要素
    var offset = target.offset().top;     // 元の位置
    var originalWidth = target.width();   // 元の幅を保持

    $(window).scroll(function(){
        if($(window).width() > 768){  // タブレット以上のみ固定
            if($(window).scrollTop() > offset){
                target.css({
                    'position':'fixed',
                    'top':'0px',
                    'width': originalWidth + 'px',
                    'z-index':'10'
                });
            } else {
                target.css({
                    'position':'static',
                    'width':'auto'
                });
            }
        } else {
            target.css({
                'position':'static',
                'width':'100%'
            }); // スマホでは固定解除
        }
    });
});
</script>

scrollTop() で現在のスクロール位置を取得
元の幅を保持することで、固定時のレイアウト崩れを防止
top や z-index はテーマに合わせて調整可能
メディアクエリを入れることで、スマホ表示では固定を解除

スマホ対応とレスポンシブの注意点

従来のサイドバーは、画面幅が狭いスマホでは表示されない場合や、表示されてもメディアクエリによってスマホ・タブレット向けに最適化されるため、固定しても存在感が薄くなりがちです。

しかし、サイドバーは、人気記事やプロフィール、広告、SNSリンクなどをまとめて整理することで、ブログ全体のナビゲーションや情報提供の拠点として機能します。

長い記事でもユーザーは迷わず必要な情報にアクセスでき、PCで閲覧する場合にはスクロールに追従することで利便性も高まります。

注意点

幅の崩れに注意

固定時にサイドバーが横幅いっぱいに広がらないよう、jQueryで幅を元のサイズに保持します

レスポンシブ対応

スマホやタブレットでは固定を解除して自然な縦スクロールにする
jQuery内の if($(window).width() > 768) で固定を制御しています

高さの調整

長いサイドバーは画面に収まらない場合があるため、必要に応じてスクロール対応を追加


#HTML4 {
    max-height: 90vh;
    overflow-y: auto;
}

テーマによってはレイアウトが崩れる可能性があります。必ず事前にテーマのバックアップをとってください。

まとめ

Bloggerのサイドバーは jQueryで安定したスクロール固定が可能
固定時の幅・位置・高さに注意するとデザイン崩れを防げる
スマホ対応も組み込むことで、どの端末でも快適に利用可能
長い記事ページでは、固定サイドバーに人気記事やナビゲーションを置くと、ユーザーの回遊率向上に効果的

Blogger TIPS

2026/02/15