本日はグーグルアドセンスの広告をスクロールさせてからサイドバーの下の空白位置に固定表示する方法をjQueryとCSSを使用して解説していきたいと思います。
ってことで、以前は固定表示はポリシー違反だったのですが、現在はOKになりました\(^^)/
ですがいくつか固定表示に関してのルールがありますので、実装したい方は下記のYOUTUBE動画でGoogleの方が解説していますので、ご覧になってから実装してみてください。
それではいってみましょうヾ ^_^♪
Menu
実装手順
・サイドバーの一番下の兄弟要素のすぐ後ろにアドセンスコードを挿入します。
・画面スクロールのTop座標を取得します。
・offsetメソッドでサイドバーの一番下の要素の座標を取得します。
・jQueryのaddClassとremoveClassでCSSの切り替え処理をします。
・CSSで固定fixedの設定をします。
大まかですがこんな感じで出来上がります!
アドセンスコード挿入
まずはご自身で取得したアドセンス広告のコードをサイドエリアの一番下に挿入します。
今回の広告のタイプはディスプレイ広告の縦長タイプを選択してコードを取得しました。
私のサイトの例でいうと下記のようなjQueryのコードになります。
1 | $('<div class = "lastArea_cm">'+a+b+c+'</div>').insertAfter('.textwidget'); |
・今回はdiv class = “lastArea_cm”をjQueryのinsertAfterで兄弟要素である.textwidgetの後ろに挿入し、lastArea_cmの中にアドセンスコードを格納します。
・a+b+cは何かというと、アドセンスコードが長いので変数化しています。(ここはご自身の取得したアドセンスコードを記述します。)
スクロールイベント
1 2 3 4 5 6 7 8 9 | $(window).scroll(function() { //➀ let ofst = $('.textwidget p:last-child').offset(); //➁ if ($(window).scrollTop() > ofst.top) { //➂ $('.lastArea_cm').addClass('add'); //➃ } else if ($(window).scrollTop() < ofst.top) { //➄ $('.lastArea_cm').removeClass('add'); //➅ } }); |
【解説】
➀スクロールイベントでスクロールしたら実行します。
➁サイドバーの一番下の要素の座標をoffsetメソッドで取得し変数化します。私の場合はp要素が一番下なのでp:last-childですが、ご自身のサイトやブログのサイドバーの一番下の要素に合わせて、例えばliやddなどに変更します。
➂scrollTopでサイドバー1番下の要素の座標位置よりウィンドウのスクロール位置が大きくなったら、④addClassでaddを追加しCSSの切り替え処理します。
➄scrollTopでサイドバー1番下の要素の座標位置よりウィンドウのスクロール位置が小さくなったら、➅removeClassでaddを削除しCSSの切り替え処理をします。
動作確認は → ブラウザで確認
CSSだけでサイドの下に固定したい場合はこちら
CSSの作成
jQueryのaddClassで新たに作成、切り替え処理された.lastArea_cm.addのCSSを編集し固定fixedの処理をします。
【.lastArea_cm.add】
1 2 3 4 | .lastArea_cm.add{ position: fixed; width:297px; } |
これで画面をスクロールしてサイドバーの一番下の要素の境目で2つのCSSが切り替わるので、広告を固定したり解除したりできるようになります\(^^)/
もし切り替え処理が予想より早かったり遅かったりして切り替わってしまう場合は③、➄のofst.top+100もしくは-100みたいな感じでブラウザを見ながら微調整できます。
最後にレスポンシブの場合は、スマホでも固定されてしまうので下記の1文をCSSに追加してスマホの場合は非表示にします。
1 2 3 4 5 | @media screen and (max-width: 599px) { .lastArea_cm{ display:none; } } |
jQuery全サンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(function() { $('<div class = "lastArea_cm">'+a+b+c+'</div>').insertAfter('.textwidget'); $(window).scroll(function() { //➀ let ofst = $('.textwidget p:last-child').offset(); //➁ if ($(window).scrollTop() > ofst.top) { //➂ $('.lastArea_cm').addClass('in'); //➃ } else if ($(window).scrollTop() < ofst.top) { //➄ $('.lastArea_cm').removeClass('in'); //➅ } }); }); |
まとめ
暇だったのでブログ閲覧していたらアドセンスの固定表示がOKというのを本日知り、早速サイドバーにjQueryとCSSで固定表示させてみました。
慣れれば1時間もあれば実装できるのでこの機会にアドセンス広告が掲載できる人は実装してみてはいかがでしょうか(^O^)
【stickyを使用した固定】
※現在はjQueryとCSSのstickyでサイドバーの広告は固定させています。
以上です。