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

ホーム / JavaScript / コピペでOK!サイドバーの広告を固定してスクロールに追従させる方法
  • 2013/01/26
  • コピペで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

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

    人気記事

    最新のエントリー

    カテゴリ

    ライター募集!