Bloggerへの道 「コンテンツをスクロールの途中で固定する方法」

例えばブログ等で、ブログの長さに対してサイドバーのコンテンツが少なく、ブログ下部にかけて余白が広がっていることってありませんか？その余白を無駄なく利用する一つの方法として「ウィジェットの固定化」があります。

Sample Page1/Page2

例えば、Sample Page1では右下の"Flyer"というウィジェットを固定しています。本来なら一番下までスクロールすると、画面の上に消えていくウィジェットを、「"Flyer"がウインドウの上から20pxの位置に来た時にその位置で固定する」と設定しているので、スクロールに合わせて追随してくると思います。そうすれば、余白を無駄なく利用し、ウィジェットの情報効果を高める事が出来ます。

この設定は、多くの方がウェブサイトやブログでそのやり方を説明してくれているので、初心者でも比較的簡単に設定出来ます。今回はそのやり方を紹介したいと思います。
「HTMLやCSS、javascriptが比較的わかるよ」って人は、下記の参考サイト様をご覧になると直ぐ出来ると思うので是非。

(参考サイト) Unformed Building / スクロール途中から位置が固定されるナビゲーションを作ってみる

1. 固定したい要素・コンテンツのID（名前）を取得

まず、固定させたい要素・コンテンツのIDをチェックします。知る方法としては色々あると思いますが、大体のブラウザで出来る「要素を検証・要素を調査」という方法でチェックしてみます。

知りたいウィジェットやコンテンツに対して右クリックします。左図の場合は固定したいウィジェット"Flyer"のタイトルを右クリック。するとGoogle Chromeの場合[要素を検証]という欄があるのでクリック。

するとブラウザ下部にHTMLソースが表示されます。その中で青く選択されているコード…それが先程右クリックした場所のコードです。今回の場合、
<h2 class="title">Flyer</h2>
ですが、ココには求めるIDがありませんね。その上を見てみると
<div class="widget HTML" id="HTML1">
とあります。この中の"id=HTML1"の"HTML1"というモノが今回知りたい要素のIDです。



※基本的にIDは、その要素を構成するコードの一番上にあります。なので見当たらない場合は上に遡ってみるとと良いと思います。遡り過ぎると別の要素のIDかもしれませんが…。この際、要素を検証中にコードにマウスカーソルを合わせてみるとそのコードに対応する部分がブラウザに青く表示されるので、本当にそのコードが求める要素のIDか確認する際便利。慣れると数秒でIDを取得出来ます。

2. CSSを設定する

Blogger管理画面で、[テンプレート]→[カスタマイズ]で[Bloggerテンプレートデザイナー]を起動します。そして[上級者向け]→[CSSを追加]に下記コードを入力。※色のついた文字部分はコピーしなくても良いです。

.fixed {
  position: fixed; /* ポジション（position）を絶対位置で固定（fixed）という意味*/
  top: 20px; /* ウインドウ上部（top）から固定する要素との距離（今回は20px） */
}

このtopの値はお好みで設定して下さい。今回はサイドバーにあるウィジェットなので20pxにしました。0pxにするとウインドウの一番上に張り付いちゃってるので、デザイン的に微妙かなあと思いまして。逆に、ウインドウに対して並行にあるメニューバーなんかは0pxでも面白いかなあと。

3. jQueryをHTMLに追加する

Blogger管理画面で、[テンプレート]→[HTMLの編集]で[HTMLエディタ]を起動します。そこで</head>直前に下記コードを入力。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
var nav    = $('#HTML1'),
    offset = nav.offset();
$(window).scroll(function () {
  if($(window).scrollTop() > offset.top - 20) {
    nav.addClass('fixed');
  } else {
    nav.removeClass('fixed');
  }
});
});
</script>

上から5行目の'#HTML1'という部分には、先程調べた「固定したい要素のID」に[#]を付けたものを入力します。今回の場合は['#HTML1']です。必ず['']で囲って下さい。
また、8行目の[offset.top - 20)]という部分。この"- 20"の部分は、上記で設定したtopからの距離の値と一致させて下さい。今回は20px距離を空けるので[- 20]と入力。[0px]の場合は[offset.top]以降の数値は入れなくてOK。

これで終了です。説明がくどかったりして、記事的には長くなりましたが、やること自体は少ないので慣れれば直ぐ出来るようになります。

おまけ

サイドバーのウィジェットを固定する方法は結構オススメですね。特に音楽情報系ブログなどで、1ページ辺りが長い場合は、サイドバーが結構余ってる事が多いですし。どうしてもプッシュしたい情報のウィジェットをサイドバーのウィジェットの中で一番下に設定し、固定化すれば、一番下まで読み進める際にずっと付いてくるので、宣伝効果として期待が出来ると思います。

今回はサイドバーのウィジェットを固定してみましたが、これをトップにあるメニューバーを固定しても面白いですよね。

Sample site: World's On Heroin

例えば僕のレビューブログではそういう風にしていて（現在はしていません）、スクロールに合わせてトップのメニューバーが追随してきます。記事によっては長めの記事もあるので、HOMEに戻ったり他の記事を検索書ける時に便利だと思って設定しています。ただこの場合、記事本文に被さってしまうため、デザイン上見難くなることもあります。なので、一つ一つの記事が特に長いものではなかったり、情報を得る上でメニューバーが重要なのでなければ、特に設定する必要もないものかもしれません。邪魔なだけですしね。
色々バランスを考えて、様々なモノに設定しみては如何でしょうか。