ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

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

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

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

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

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

コピペでOK!ソーシャルボタン設置と追尾方法。プラグイン不要コピペでOK!ソーシャルボタン設置と追尾方法。プラグイン不要

ブログ・サイトにソーシャルボタンを自力で設置する方法です。いま流行りのスクロール…

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

jQueryで簡単設置!ページ先頭,トップへ戻るボタンの高機能な設定方法jQueryで簡単設置!ページ先頭,トップへ戻るボタンの高機能な設定方法

ブログ画面の右下にページの先頭(トップ)へ戻るボタンを設置しました。フワッと現れ…

コピペでOK!スムーススクロールでページ内リンクやトップへ移動!#なしでコピペでOK!スムーススクロールでページ内リンクやトップへ移動!#なしで24 shares

記事が長い場合、目次やページ先頭「#」へのページ内リンクはとても便利です。しかも…

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

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

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

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

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

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

【WordPressテーマ】スマホサイト作成工程と役立ったツール類をご紹介【WordPressテーマ】スマホサイト作成工程と役立ったツール類をご紹介

このブログはスマホ表示時には、便利なWordPressプラグイン「WPtouch…

【WordPress】スマホサイト作成!テーマファイルの効率化【WordPress】スマホサイト作成!テーマファイルの効率化48 shares

WordPress用のスマホテーマを作成した時に配慮した、PC版とは違ったテーマ…

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

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

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

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

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

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:コピペでOK!ソーシャルボタン設置と追尾方法。プラグイン不要ウェブ制作やSEOも解決!アイコンWebフォントLigature SymbolsはLINE・はてブも使えるよ:次記事»
ページ
↑先頭
ホーム