サイドバーコメントを書く今回は「画面をスクロールした際にサイドバーのコンテンツが画面上に付いて来るように表示させる」方法をご紹介致します。本記事ではWordPressを使用した場合の設定方法を詳細に記載します。いっても、使用するプログラムはWordPressでなくても機能しますので、自身のサイトの構成に合わせてカスタマイズして頂ければ簡単に活用できると思います。本記事を読むことで下記のような画面に付いて来るコンテンツを設置することができます。今回参考にさせて頂いたサイト様は下記になります。AdSenseの広告を画面に付いて来るように表示すると規約違反になりますWordPressのウィジェットに画面に付いて来るコンテンツを登録するWordPressのサイドバーのウィジェットに画面に付いて来るコンテンツを用意します。今回は、下記のようにテキストのウィジェットを登録して、idを設定したdivといくつかの文言を設定しました。idを設定したdivが画面に付いて来るコンテンツになります。これで、コンテンツの登録は完了になります。画面についてくる機能を記載したJavaScriptを読み込む下記のJavaScriptを読み込みます。※jQueryを使用しているので、本コードを読み込む前に必ずjQueryのライブラリを読み込んでください。"auto"});}});});3行目でターゲット(画面に付いて来るdiv)の要素、5行目でフッターの要素を取得しています。この部分を各々のサイトに合わせて変更することで、そこそこうまく動いてくれると思います。ターゲットの横幅を入力するのか今回は、WordPressのサイドバーにテキストのウィジェットを登録して、テキストの中のdivを画面上に付いて来る要素として指定しました。WordPressのテーマ次第ではあるのですが、基本的にdivには固定の横幅は設定されていません。そのため、positionをfixedに変更する際に横幅を入力しなければ、下記のように横幅がサイドバーの領域を超えてしまう場合があります。いった部分を回避するために、事前にコンテンツの幅を取得しておいて、コンテンツが付いて来る設定に変更された際に横幅も設定するようにしています。フッターの位置を監視しながら表示位置を変えるのかフッターの位置を監視しなければ、下記のようにサイドバーのコンテンツがフッターを突き抜けてしまう場合があります。いった部分を回避するために毎回フッターの位置を監視して、付いて来るコンテンツの位置を決めています。AdSenseの広告を画面に付いて来るように表示すると規約違反になります今回ご紹介した「画面をスクロールした際にサイドバーのコンテンツが画面上に付いて来るように表示させる」方法ですが。AdSenseの広告を貼り付ける行為は規約違反となりますのでご注意ください。詳細は下記のサイト様をご参照ください。規約の細かい部分は見落としがちですが、しっかりと守ってアドセンスを活用しましょう!ではまた!この記事であなたの課題を解決することができましたか?疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。裕介Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。Animateを利用したアニメーションを作ってみる。超初心者なのでプログラミング学習のProgeteをやってみました。2020年2月4日AD最近の実績/おすすめ記事2018-4-13プロゴルファー大城さつき様のHPを制作しました2016-11-21イベント集客にタウン誌は効果的?相模原の大・手づくり市!アートフェスティバルinさがみはらが開催されました!2015-12-7ブライダルスタッフの派遣なら!有限会社アーリーバード様のHPを制作させていただきました!2016-8-10横浜市港北の格安板金『フレエム屋』フレーム修理も出来る技術力で任せて安心!フレーム屋様のWEBサイトをスマホ対応させていただきました。ホームページ制作、WEBマーケティングページ上部へ戻る。