【ブログ技術】固定スクロールの適切な解除でサイドバー全体を見せる方法

ブログなどでサイドバーのスクロールを固定して、自動追尾/追従させるのをよく見かけます。今回は画面の狭いディスプレイでも、サイドバー下端まで見れるように適切に固定を解除する方法を紹介します。

ゆめぴょん(@yume_pyon)です。こんちはっ！

サイドバーの固定スクロールは好まない人もいるため、派手な広告などは表示しない方がいいかもしれません。ソーシャルボタンを追従させる方法は、下記事を参考にしてください。

スクロール関連では、ページのトップ（最上部）へ戻るボタンの設置や、目次などをクリック時にスムーズにスクロールさせる方法なども記事にしていますので、読んでみてください。

サイドバー固定スクロールのメリット・デメリット

私が考えつくメリットは次のとおりです。他にあれば教えて下さい。

• （運営側）読者に見せたいものをアピールできる
• （運営側）記事が長い時、サイドバーを空白にしない
• （読者側）サイドバーが止まるとコンテンツに集中できる

これに対してデメリットは、次のとおり。

• （運営側）Google Adsenseを固定すると配信停止になるので注意
• （読者側）自動追尾は目ざわりで好まない人もいる
• （読者側）サイドバー下端まで見たいのに見えない場合がある

ちなみに私はスマホでは別テーマ（デザイン）に切り替えているため、サイドバーは表示していません。スマホのテーマ制作については、下記事を参考にしてください。

スマホのデザインでサイドバーを表示する場合は、固定スクロールは解除した方が無難です。ディスプレイサイズによっては、コンテンツ記事を読めなくなる場合がありますので。

デメリット3つめについては、実際に読者からSNSにて指摘をいただきました。そしてディスプレイのサイズによらずに、最後はサイドバーの下端まで見えるようにする方法を今回紹介します。

自動追従サイドバー（適切な解除）の設置方法

まず、あなたのブログ・サイトの構成を確認してください。私のブログは下のようになってるので、それぞれのclass値（まだはid値）をメモしてください。

• ヘッダーのclass値：私の場合「.header」
• 全体を囲むclass値：私の場合「.wrap」

classではなくidを使っている場合は、「.」（ドット）を「#」（シャープ）に変更してください。

そしてサイドバーのスクロール固定したいエリアを、classの「sideFix」で囲んでください。具体的には<div class=”sideFix”>と</div>で囲めばいいでしょう。

そして</body>タグの直前などに、下のコードをコピペすればOK！

5行目の「.header」と6行目の「.wrap」は、あなたの環境に応じて、上でメモしたclass値（又はid値）に変更してくださいね。

今回は「jQuery」を利用しています。既にあなたのブログ・サイトで利用中なら、1行目を削除してください。WordPressの場合は、標準で読み込んでいるので重複しないよう気をつけてください。

私は上のとおりで問題なく動いているのですが、後から読み込まれる広告や、非同期系・Ajax系の表示エリアがある場合などは、少し調整しないとうまくいきません。わかる人は好きなように改造してください。

まとめ：今日のゆめぴょんの知恵

今回の記事内容をざっくり言うと。

• サイドバーの固定スクロール設置はとても簡単
• 動画や広告などの固定は、好まない読者もいるので注意
• グーグルアドセンスを固定するとペナルティになるので要注意
• スマホ表示では、コンテンツの邪魔にならないよう配慮が必要

ご意見・ご感想などは、Facebook、Google+などでもお待ちしています。
ゆめぴょん(@yume_pyon)でした。では、ばいちゃお！ こてっZzz