コピペでOK!サイドバーの広告を固定してスクロールに追従させる方法 | うぇぶ小屋

コピペでOK!サイドバーの広告を固定してスクロールに追従させる方法

コピペでOK!サイドバーの広告を固定してスクロールに追従させる方法

こんにちは、@webgoyaです。

最近ちょくちょく見かける、スクロールアウトした後もサイドバーの要素が固定されて付いてくるメニューを当ブログにも導入してみましたので、その設置方法の解説です。

導入自体は簡単なのですが、よく見てみるとスクロールに追従してそのままフッタ―部分に重なってしまってるブログやサイトも多くて、それはなんだかイケてない気がしたので、今回紹介するものは当ブログのようにスクロールに追従後、今度はフッタ―前になるとピタリと止まってくれるやつにしました。

当ブログでは広告をローテーションバナーでランダムに表示させていますが、広告だけでなく、ソーシャルボタンや各種ブログパーツなども固定して追従させる事ができます。

ちなみにAdSenseでこれをやるのはGoogleの規約で禁止されているので違反行為です。
クリック率は間違いなく上がるのでやりたくなるかもしれませんが、アカウント停止などのリスクが無いとも言えませんので止めておいた方が良いでしょう。

参考:Google プロダクトフォーラム

それでは設置方法です。

まずはjQueryのライブラリファイルを用意します。

jQuery公式サイトに「PRODUCTION (32KB, Minified and Gzipped)」というタイプのJavaScriptfファイルがあるので、ダウンロードします。
jQuery公式サイト

Download

ファイルが開いたら右クリックで保存↓ ファイルが開いたら右クリックで保存

ファイルがダウンロードされました。
ファイルがダウンロードされました。

確認できたらアップロードします。

アップロードしたら、下記コードのパス部分を自分のものに書き換えてHTMLの<head>~</head>内にそのコードを挿入します。

これで下準備は完了です。
次に以下のコードをHTMLの<head>~</head>内に挿入します。


これだけで設置完了です。

たぶん、つまずくとしたらこの部分の

IDが分からない場合だと思いますが、HTMLをよく探すと <div id="contents">のような形であったりとか<div id="Side">のような形で、何かしらメインカラムやサイドバーのIDがあるはずですので見つけてみてください。

IDが見つかったら、それを自分のものに書き換えて指定してあげるだけです。
広告を包む要素のIDの場合も同じですが、もしIDの無いものを固定したい場合は

のようにclass指定して、それを

のように書き換えればOKです。

調べると結構色々なやりかたがあるのですが、今回紹介した方法が一番簡単で動作も満足のいくものでした。

参考にした記事:
ライブドアみたいにスクロールしたらサイドバーの広告を固定する – ぼくはまちちゃん!(Hatena)
関連記事

スポンサード リンク

TwitterやFacebookページでは日々うぇぶ小屋が気になった情報(ウェブ制作・運営、ブログの収益化に関する事が多い)をつぶやいていますのでこの機会にぜひ"フォロー"または"いいね"をよろしくお願いします。


Twitterアカウント → @webgoya
Facebookページ → webgoya
RSSフィードを配信しています → RSS購読はこちら

コメント一覧

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2016/06/13 Mon 15:14 | URL

うぇぶ小屋

http://code.jquery.com/jquery-2.0.2.min.jsでいけませんか?

2013/06/09 Sun 19:10 | URL

通行人

PRODUCTION (32KB, Minified and Gzipped
というファイルが見当たらないのです…
もしよければ、ダウンロードURLを教えていただけないでしょうか?

2013/06/09 Sun 12:25 | URL

この記事にコメントを残す
管理者にだけ表示を許可する

人気記事

最新のエントリー

カテゴリ

ライター募集!