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のみで実現できてしまうので、
簡単に導入できますね。