Bloggerのサイドバーにスクロール時に表示位置を固定するガジェットを追加する

Signage
Bloggerのサイドバーに、スクロールしても付いてくるガジェットを追加する方法を紹介します。

photo credit: "Cowboy" Ben Alman via photopin cc



BloggerでjQueryを有効にする


Bloggerでは、公開されているファイルを読み込むことで、 jQueryを使えるようになります。 </head>の上に以下を追記します。


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" />



Bloggerのサイドバーにスクロール時に表示位置を固定するガジェットを追加する方法


そして、上で追記した箇所の下に jQueryのコードを書いていきます。

<script>
$(function(){
$("#fixed-box").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 4300) {
$('#fixed-box').slideDown(100);
} else {
$('#fixed-box').slideUp(100);
}
});
});
});
</script>



ちなみに、 4300の箇所ですが、ガジェットが現れる位置を指定しています。指定する値は、スクロール幅と関係しているようです。つまり、数字が大きければ、それだけスクロールしないと表示されないことになります。


これは、サイドバーにある空白がどれくらいスクロールすれば現れるかで指定すればいいと思います。Chrome要素の検証機能を使って調べましょう。





次に、CSSを記述します。


#fixed-box{
position: fixed;
top: 10px;
z-index: 0;
}

.footer-outer {
position: relative;
z-index: 1;
background-color: #FCFCFC;
}



background-colorは、 #ffffffだとうまく表示できないので、色を付けてみました。限りなく白に近い白を指定しても良かったのですが、フッターにはちょっとだけ色を付けたほうがしっくり来ました。


その他の要素についての解説は、こちらが参考になります。


後は、管理画面から レイアウト > ガジェットを追加 > HTML/JavaScriptを選択して、表示したいコンテンツを表現したタグを以下のタグで囲みます。ちなみに、タイトル入れなくてもいいです。


<div id='fixed-box'>

(コンテンツ)

</div>



自分の場合は、 はてなブログパーツを表示してみました。





<div id='fixed-box'>
<script language="javascript" type="text/javascript" src="http://b.hatena.ne.jp/js/widget.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
Hatena.BookmarkWidget.url = "http://mba-hack.blogspot.com/";
Hatena.BookmarkWidget.title = "人気エントリー";
Hatena.BookmarkWidget.sort = "count";
Hatena.BookmarkWidget.width = 250;
Hatena.BookmarkWidget.num = 10;
Hatena.BookmarkWidget.theme = "default";
Hatena.BookmarkWidget.load();
</script>
</div>