追尾型の固定スクロールの適切な解除でサイドバー下方部も見せる方法

Webデザイン

サイドバーの固定スクロールをやめる(解除)の方法

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

ゆめぴょんです。こんちはっ(^^)/

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

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

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

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

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

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

  • (運営側)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系の表示エリアがある場合などは、少し調整しないとうまくいきません。わかる人は好きなように改造してください。

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

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

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

ゆめぴょんでした。ちゃおっ!

タイトルとURLをコピーしました