position:stickyでサイドバー追尾が効かないときのjQuery.stiky.js
目次
前置きはともかく方法を真っ先にしりたい方は → ここ から見てください。
ページをスクロールしても同じところに表示され続けるサイドバーのアドセンス広告を実装する方法をメモ。CCSで簡単に実現するつもりが失敗。代わりにjQueryで実現した方法。
発端は超低いアドセンス広告のクリック率
このブログにはAdSense広告を貼っていますが、悲しいことにクリック率が平均0.15％くらいしかありません。1万PVでやっと1.5クリックです。いろいろなアフィリエイトやAdSenseのブログ記事を見ると、クリック率は1～2％が普通みたいで、それから比べる10分の1くらい少ないです。
悲しくなってきたので、クリック率を上げるにはどうしたらいいか？検索して調べてみると、以下のような問題があるのではないか？というのを沢山見ました。
- 広告の配置が悪い
- 広告の数が多い
- 広告の種類が悪い
そこで、アドセンス広告の配置を見直すことにしました。このブログは主に『パソコンの困りごとをどうやって解決したか』という内容の記事がメインで、検索して訪問される方は『調べる』ということを目的に閲覧していると思います。その調べものがメインで来ているのに、広告がいきなりガチャガチャで出てくると印象が悪いと思います。そこがクリック率の低さに繋がっているのではないかと思いました。
そこで、印象をよく思っていただいた後にアドセンス広告を出すようしたいと思います。仮に、このブログに訪問者にとって価値がある情報があったとして、以下のように思っていただけたところに広告をだしたいと考えました。
- このページに来てある程度目的が達成できた
- 調べたいヒントがここにあった
- 知りたい内容がドンピシャだった
と思ってもらえることが大事で、『広告収入はおまけの位置づけ』のはずが、いつの間にか広告の方がメインになっていた気がします。
- このページを読むことを邪魔しない程度にしながらグイグイと広告を出す
- 読み終わってホッとしたところで広告を見せる
こういったところから、『サイドバーの一番下にアドセンスの追尾広告を出したい！』ということを思いつきました。
CSSによる追尾広告の設置に失敗して困った
サイドバーの一番下にAdSenseの『関連コンテンツ広告』を設置して、スクロールしてもずっと追いかけて表示できるように、一番簡単そうなCSSにposition: stickyと書いて追従表示する方法をとりました。position: stickyを使おうと思った理由が、ほぼすべてのブラウザが対応していて、簡単でシンプルだからです。
position: sticky;をサポートしているブラウザ
以下のページではposition: stickyに対応しているブラウザのバージョンがわかります。
コード例
たったこれだけす。簡単ですね。
<style>
.sticky {
postion: -webkit-sticky;
position: sticky;
top: 0;
}
</style>
<div class="sticky">
〜追従表示させたい要素〜
</div>
試したところピクリとも動かなったその原因
上記のコードを参考にテストしてみたところ、ページをスクロールしてもピクリとも動きませんでした。コードの書き方が悪かったかな？を思いながら試行錯誤してもダメでした。いろいろ検索して調べたらposition: stickyが効かない条件がありました。
先祖要素にoverflowが指定されていると動かない
親要素にoverflowを指定してfloatを解除している場合、position: stickyが効かないみたいです。これは、直近の親要素だけに限らず、先祖要素に一つでもoverflowが指定されているとダメみたいです。また、floatを使ったグリッドシステムもposition: stickyを使えない可能性が高いみたいで注意が必要です。
overflow: hidden、overflow: autoを使っているとstickyが効かないoverflow: scrollで高さの指定がないとstickyが効かないoverflow: scrollで高さの指定があれば、そのブロック内でstickyが効く
この場合、先祖要素にoverflow: hiddenが指定されていても関係ありません。overflow: visibleであればstickyは効く
Safariに限ってはinline-block要素で効かない
Firefox、Chrome、Edgeでは問題ないみたいですが、SafariとiOS Safariでは、スティックさせたい要素にdisplay: inline-blockを指定しているとposition: stickyが効かなくなるそうです。
原因がわかったところで対処できず
position: stickyが使えない（効かない）原因がわかったところで、ページのソースコードにoverflow: hiddenやfloatがあるが検索をしてみたら多用していました。自分で作ったレイアウトではなく、テンプレートを使用しているので、position: stickyが効くようにするためにoverflow: hiddenやfloatを取り除くとなると、もはや別のレイアウトを作ることになり、最悪は現在のレイアウトが総崩れで修復困難になる恐ろしいリスクも出てきて、手間や時間がかかりすぎるので、『追尾広告はあきらめようかな』と、心が折れかけました。
jQueryで実現する方法を見つけた！
ページの読み込みが重たくなるので、なるべくJavascriptやjQueryの追加はしたくないのですが、『クリック率は高めたい！あきらめるな！』という心の声で、もうひと踏ん張りして『別の方法で実現できないか？』と探してみたところ、方法を見つけました！
Javascriptで実現する方法があったのですが、サンプルのソースは行数が多く、自分用にカスタマイズしようにも理解できない感じでした。jQueryと使った方は実装方法がとてもシンプルで、既にj他のことでjQueryを導入していたので、jQueryを使った方法を試すことにしました。
jQuery.stiky.jsでうまくいった！
以下のページから jquery.sticky.js をダウンロードして使います。やってみたらちょっても簡単でした。CSSのposition: stickyとは違い、overflow: hiddenがあっても効きました。
サンプルコード
<script defer src="jquery.js"></script>
<script defer src="jquery.sticky.js"></script>
<script defer>
$(document).ready(function(){
$("#sticker").sticky({ topSpacing: 10 , bottomSpacing: 10 });
});
</script>
<div class="sidebar">
<div id="stikcker">
AdSenseのコード
</div>
</div>
ページの読み込みを速くするためにDeferで順番に遅延読み込みするようにしています。stickyというidが付いた<div>の部分がスクロールしても追随して表示されます。
ただ、この jquery.sticky.js はIEでは動きませんでした。ChromeとEdge（Chromium）では大丈夫でした。
position: sticky;を補助するJSもあった
今回は使いませんでしたが、position: sticky;が効かないときに補助してくれるjQueryプラグインも存在していました。特にIEに対応させたいときに使えそうです。