記事の詳細

今回は「画面をスクロールした際にサイドバーのコンテンツが画面上に付いて来るように表示させる」方法をご紹介致します。
本記事ではWordPressを使用した場合の設定方法を詳細に記載します。

といっても、使用するプログラムはWordPressでなくても機能しますので、自身のサイトの構成に合わせてカスタマイズして頂ければ簡単に活用できると思います。

本記事を読むことで下記のような画面に付いて来るコンテンツを設置することができます。
01_サイドバーが付いて来るイメージ

なお、今回参考にさせて頂いたサイト様は下記になります。
解説付き!フッターで止まる、サイドバーを固定する方法【はてなブログ】
最近はやりのフッターに重ならない追尾するサイドバーをjQueryで作ってみました!

WordPressのウィジェットに画面に付いて来るコンテンツを登録する

WordPressのサイドバーのウィジェットに画面に付いて来るコンテンツを用意します。
今回は、下記のようにテキストのウィジェットを登録して、idを設定したdivといくつかの文言を設定しました。
02_ウィジェット登録

idを設定したdivが画面に付いて来るコンテンツになります。

これで、コンテンツの登録は完了になります。

画面についてくる機能を記載したJavaScriptを読み込む

下記のJavaScriptを読み込みます。
※jQueryを使用しているので、本コードを読み込む前に必ずjQueryのライブラリを読み込んでください。

3行目でターゲット(画面に付いて来るdiv)の要素、5行目でフッターの要素を取得しています。
この部分を各々のサイトに合わせて変更することで、そこそこうまく動いてくれると思います。

何故ターゲットの横幅を入力するのか

今回は、WordPressのサイドバーにテキストのウィジェットを登録して、テキストの中のdivを画面上に付いて来る要素として指定しました。
WordPressのテーマ次第ではあるのですが、基本的にdivには固定の横幅は設定されていません。
そのため、positionをfixedに変更する際に横幅を入力しなければ、下記のように横幅がサイドバーの領域を超えてしまう場合があります。
03_サイドバーの幅調整失敗

こういった部分を回避するために、事前にコンテンツの幅を取得しておいて、コンテンツが付いて来る設定に変更された際に横幅も設定するようにしています。

何故フッターの位置を監視しながら表示位置を変えるのか

フッターの位置を監視しなければ、下記のようにサイドバーのコンテンツがフッターを突き抜けてしまう場合があります。
04_サイドバーのフッター突き抜け

こういった部分を回避するために毎回フッターの位置を監視して、付いて来るコンテンツの位置を決めています。

【注意!】上記のコードでGoogle AdSenseの広告を画面に付いて来るように表示すると規約違反になります

今回ご紹介した「画面をスクロールした際にサイドバーのコンテンツが画面上に付いて来るように表示させる」方法ですが。
画面に付いて来るコンテンツの内容として、Google AdSenseの広告を貼り付ける行為は規約違反となりますのでご注意ください。
詳細は下記のサイト様をご参照ください。
上下にスクロールしたとき、Google AdSenseが一緒についてくる配置方法は利用規約違反

規約の細かい部分は見落としがちですが、しっかりと守ってアドセンスを活用しましょう!

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

仕事ではパソコンが使いこなせるのが当たり前

相模原市産業会館パソコン教室

AD

ページ上部へ戻る