レスポンシブに対応したサイドバー固定Ver.2（はてなブログ向け）

サイドバーの固定は以前にも記事にしたのですが、テーマによってはうまくいかないことがあったので、一旦記事を下書きに戻しました。今回、コードを修正して再度記事を書き直しました。

サイドバーの固定って何？？

サイドバーの一番下に表示させている項目、当ブログですと「Recommend」って項目ですね。PCで2カラムになっている時、スクロールしてもこれが追従するように設定します。

私のブログではサイドバーの「Recommend」を固定しています。（15秒後に固定されるように設定しています。詳しくは後述）

現在、他のブログでもサイドバーを固定するコードは公開されているのですが、ウィンドウサイズを変えるとおかしな挙動をする問題があります。

ということで、ウィンドウサイズを変えて１カラムになっても大丈夫なようにしました。

そして、フッターまでスクロールすると、フッター直前で止まるようになっています。

既にサイドバーの固定を利用しているブログでも、ウィンドウの横幅を狭くするとサイドバーがおかしな場所に固定されることがあるかもしれません。その場合は当記事のコードに変えてみてはいかがでしょうか？（念のためにバックアップはとってね）

注意点：
ユーザーの設定によってはうまくいかない可能性もあります。例えば、CSSをいじって横幅を変えてる場合とか。

このコードはユーザー自身で書き換える箇所があるので、ちゃんと読んで行ってください。面倒ですが、頑張ってください。

アドセンスを固定にすると、規約違反になるので注意して下さい。

カスタマイズは自己責任でお願いします。

サイドバーを固定するコード

まずは、下記のjQueryの読み込み用のコードを「デザイン」→「カスタマイズ」→「ヘッダー」か「フッター」にコピペします。すでにjQueryの読み込みのコードがある場合は、不要です。

シェア数をカウントしている人はすでに読み込まれてるかと思います。

んで、その下に下記のコードをコピペします。（これで終わりじゃないよ！）

<script>
// ここはユーザーごとで書き換える
var oneColumnWidth = 919;
var fixTop = '50px';
var timer = 5000;
// サイドバーの固定
$(window).load(setTimeout(function (){
// サイドバーの一番最後のモジュール
var $module = $('.hatena-module:last');
var modulePosition = $module.offset().top;
var moduleHeight = $module.outerHeight(true);
// サイドバー全体
var sidebarHeight = $('#box2').outerHeight();
var sidebarWidth = $('#box2').width();
// メインコンテンツ
var mainHeight = $('#main').outerHeight();
// サイドバーを固定にする関数
function fixedLastModule(){
// メインコンテンツよりサイドバーが長い場合は無効化
if(sidebarHeight > mainHeight){return;}
// ２カラムで、モジュールの一番最後までスクロールされたらCSSの書き換え
if($(window).outerWidth() > oneColumnWidth && $(window).scrollTop() > modulePosition) {
			$module.css({
'position': 'fixed',
'top': fixTop,
'width': sidebarWidth
});
} else {
			$module.css({
'position': '',
'top': '',
'width': ''
});
}
// フッターの位置まで来たらストップ
// 高さの設定
var bodyHeight = $('body').outerHeight();
var windowHeight = $(window).outerHeight();
var footerHeight = $('#footer').outerHeight();
var scrollBottom = bodyHeight - windowHeight - footerHeight;
if(moduleHeight  > windowHeight - footerHeight){
if($(window).outerWidth() > oneColumnWidth && $(window).scrollTop() >= scrollBottom){
				$('#content').css({
'position': 'relative'
});
				$module.css({
'position': 'absolute',
'top': '',
'bottom': 0
});
} else {
				$('#content').css({
'position': ''
});
				$module.css({
'bottom': ''
});
}
}
}
// イベントの設定
	$(window).scroll(fixedLastModule);
	$('body').on('touchmove', fixedLastModule);
	$(window).resize(fixedLastModule);	
}, timer));
</script>

コード３行目のコードはテーマによって数値が異なるので書き換えて下さい。「Brooklyn」を使っている方は書き換え不要です。

var oneColumnWidth = 919;

↓↓使っているテーマによって以下の数値に書き換える

Innocent  1023
Brooklyn  919
DUDE  768
Blank  959
Naked  768
Written  768
CONTENTS  768
Spirea  900
Minimalism 769

もし、上記以外のテーマを使っている場合は、コメント欄にて質問して下さい。時間がある時に返答いたします。

コードの4行目。これは固定される位置です。

var fixTop = ‘50px‘;

 この数値を変えると、固定される位置を調整することができます。位置を変えたいときは、この数値を修正してください。

コード5行目。これは固定されるタイミングです。

var timer = 5000;

5000というのは「5秒」後に固定されるということです。なぜ、固定されるタイミングを遅らせるかというと、たまにサイドバーの表示に時間がかかって、おかしな位置で固定されることがあるからです。

私は念のために「15000（15秒後）」に設定していますが、基本的には5000のままで大丈夫だと思います。

ちゃんと読んで行えば、そんなに難しくはないと思います。

JavaScript（jQuery）やHTML・CSSを勉強して、自力でカスタマイズしたいという方には、こちらの記事がオススメです。

HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ

お知らせ

はてなブログの見たままモード編集を補完するChrome拡張機能を以前作りました。

はてなブログ編集用のChrome拡張機能を作りました（使い方の説明） | SHIROMAG

今回は「h2」と「背景をグレーにする」と「中央揃え」を使ってみましたが、我ながら便利だコレ＼(^o^)／

興味ある方はぜひ使ってみて下さい！