サイドバーに追尾広告を設置する

Google Adsenseのポリシーアップデートにより、
追尾型広告の設置が認められるようになりました。

追尾型広告とは、
スクロールしても動かずに表示され続ける広告のことです。
記事を読んでいる場所に関わらず、
画面上に表示されているため、
より広告の効果が高まります。

もちろん、広告に限らず、
プロフィールや、関連記事など、
サイドバー等に常に表示して置きたいものを、
追尾型にすることも可能です。

今回は、サイドバーにスクロール固定で表示する方法を紹介します。

CSS を使って固定する

スクロールに沿って、
動的にコンテンツが移動するので、
javascriptが必要なのかなと思うところですが、
簡単なものはCSSでできてしまいます。

追尾する要素

追尾する要素にクラス名をつけておきます。
ここでは「sticky」クラスと呼ぶことにします。

追尾する要素は下のように記述します。

<div class="sticky">
ここに追尾する要素
</div>

はてなブログのサイドバーの場合は、
サイドバーのカスタマイズから、
「HTML」を選択して、下の図のように記述します。

追尾するサイドバーモジュール

ただし、追尾する要素はサイドバーの最後の要素にしておきます。

スタイルシート

次に、「sticky」クラスに対して、
表示を固定するためのスタイルシートを記述します。

.sticky{
  margin-bottom: -10000px;
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  }

はてなブログでは「デザイン」→「カスタマイズ」→「デザインCSS」に追記します。

position: stickyを指定することで追尾して表示することができます。
-webkit-stickyはSafari用のstickyです。

margin-bottomは追尾する長さを指定しています。
stickyでの追尾はサイドバーの領域までに限られるので、
サイドバーの伸びしろを準備しておかないと、
動く幅がなくなってしまいます。
そこで、margin-bottomでマージンを指定して、
サイドバーの伸びしろを用意しています。

最後にtopは上方向の余白です。

これで一応は追尾型サイドバーの出来上がりです。

追尾の長さを自動で設定する

上では追尾する長さをmargin-bottomで設定していましたが、
長いページもあれば短いページもあるので、
ページの長さに応じて設定したいですよね。

そこで、javascriptを使って、
ページの長さを取得して、
margin-bottomを設定します。

<script>
$(document).ready(function(){
    $(".sticky").css("margin-bottom", -1*$("div#wrapper").height());
})
</script>

はてなブログでは「デザイン」→「カスタマイズ」→「フッター」等に、
上のスクリプトを記述します。

ただし、jQueryを用いているので、
必要に応じてjQueryを読み込むようにしておきましょう。

まとめ

はてなブログでサイドバーに要素を固定して表示する方法について紹介しました。

スクロールに応じて表示の位置を変えるとなると面倒そうと思いきや、
基本的にはCSSのみで実現できてしまうので、
簡単に導入できますね。