リニューアルからシンプルな2カラムにしてから非常に気になってたことが解決しました。

それがなにかっていうと、

サイドバー下部の空白！！

です！！

たまに長い記事を書いたりするとどうしてもサイドバーが本文より短いためにフッターに達するまでず～～っとサイドバーの下は空白になっちゃうわけです。

それはなんだかもったいない！

と思うのです。
記事はそれぞれ長さが違うのでそれに合わせてサイドバーの内容も増やせればいいのですけど、それはちょっとナンセンスですよね。

そんな問題を解決する方法はいくつかありますけど、今回は
「サイドバーの下が表示されたらそこでサイドバーを固定する」
という方法を取ってみることにしました。

で、検索して見つけたのがこの記事。

prasm | jQueryでフッターに重ならずに「空いた領域をフルに使い切る追尾型サイドバー」を実装する方法

ナイスじゃないですか～♪　そう！これですよこれ！

詳しい内容はprasmさんの記事をみてくださいね。

記事をじっくり読みつつ、コードをペタリ（もちろん自分の環境にあわせて）。

できました

ほんともうステキです♡

これでうちの貧弱なサイドバーも少しは見てもらえるようになるのではないでしょうかw

スクロール終了後に動くように変更してみた

javascriptとかにはめっぽう弱いのですが、これだとスクロール中ずっとサイドバーの位置やらなんやらを追い続けているような気がしました。
それって負荷ってやつではないかと。。。

そこで、スクロールが終わった直後に動くようにしてみました。

$(function(){
	var contentHeight = $("html, body").height();
	var windowHeight = $(window).height();
	var target = $("#fix-box");
	var targetHeight = target.outerHeight();
	var targetPosition = target.position();
	var footer =$("#page-footer");
	var footerHeight = footer.outerHeight();
	$(window).resize(function(){
		windowHeight = $(this).height();
	});
	var timer =false;
	$(window).scroll(function(){
		if (timer !== false) {
			clearTimeout(timer);
		}
		timer =setTimeout(function(){
			var scrollTop = $(this).scrollTop();
			var visibleBottom = scrollTop + windowHeight;
			var targetBottom = targetPosition.top + targetHeight;
			if (visibleBottom >= targetBottom) {
				if(footerHeight > contentHeight - visibleBottom) {
					target.css({position:"fixed" , bottom: footerHeight - ( contentHeight - visibleBottom)});
				} else {
					target.css({position:"fixed", bottom:0});
				}
			} else {
				target.css({position:"static", bottom: "auto"});
			}
		}, 10);
	});
});

このコードだと、スクロール終了後10ミリ秒後に動くようになってます。
あってるかどうかもわかりませんが、なんとか動いてるようなのでこれでOKにしておきますw。

コードの読み込み

上のコードをfixed-sidebar.jsとかの名前で保存してテーマ内に保存したら、テンプレートファイルをイジイジします。

    <?php wp_enqueue_script('fixed-sidebar', get_template_directory_uri() . '/js/fixed-sidebar.js'); ?>

うちではこれをfooter.phpのwp_footer()の直前に挿入しました。

こんな面倒くさいことしなくても<script>～</script>で書いてもいいと思います。

まとめ

サイドバーを固定したらなんとなくカッコ良くなったw　というのが今回のまとめです♪

特に問題は出てないと思うのでしばらくはこれでいきます。
なにか問題があればコメント欄で教えてください。

ではﾉｼ