【jQuery】アドセンス広告をスクロールでサイドバーに固定表示する

投稿者: | 2021年3月7日
JQueryアイキャッチ画像

本日はグーグルアドセンスの広告をスクロールさせてからサイドバーの下の空白位置に固定表示する方法をjQueryとCSSを使用して解説していきたいと思います。

ってことで、以前は固定表示はポリシー違反だったのですが、現在はOKになりました\(^^)/

ですがいくつか固定表示に関してのルールがありますので、実装したい方は下記のYOUTUBE動画でGoogleの方が解説していますので、ご覧になってから実装してみてください。

 

それではいってみましょうヾ ^_^♪

 

実装手順

手順

・サイドバーの一番下の兄弟要素のすぐ後ろにアドセンスコードを挿入します。

・画面スクロールのTop座標を取得します。

・offsetメソッドでサイドバーの一番下の要素の座標を取得します。

・jQueryのaddClassとremoveClassでCSSの切り替え処理をします。

・CSSで固定fixedの設定をします。

大まかですがこんな感じで出来上がります!

 

アドセンスコード挿入

まずはご自身で取得したアドセンス広告のコードをサイドエリアの一番下に挿入します。

今回の広告のタイプはディスプレイ広告の縦長タイプを選択してコードを取得しました。

 

私のサイトの例でいうと下記のようなjQueryのコードになります。

・今回はdiv class = “lastArea_cm”をjQueryのinsertAfterで兄弟要素である.textwidgetの後ろに挿入し、lastArea_cmの中にアドセンスコードを格納します。

a+b+cは何かというと、アドセンスコードが長いので変数化しています。(ここはご自身の取得したアドセンスコードを記述します。)

 

スクロールイベント

【解説】

スクロールイベントでスクロールしたら実行します。

サイドバーの一番下の要素の座標を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】

これで画面をスクロールしてサイドバーの一番下の要素の境目で2つのCSSが切り替わるので、広告を固定したり解除したりできるようになります\(^^)/

もし切り替え処理が予想より早かったり遅かったりして切り替わってしまう場合は③、➄のofst.top+100もしくは-100みたいな感じでブラウザを見ながら微調整できます。

 

最後にレスポンシブの場合は、スマホでも固定されてしまうので下記の1文をCSSに追加してスマホの場合は非表示にします。

 

jQuery全サンプルコード

 

まとめ

暇だったのでブログ閲覧していたらアドセンスの固定表示がOKというのを本日知り、早速サイドバーにjQueryとCSSで固定表示させてみました。

慣れれば1時間もあれば実装できるのでこの機会にアドセンス広告が掲載できる人は実装してみてはいかがでしょうか(^O^)

 

【stickyを使用した固定】

現在はjQueryとCSSのstickyでサイドバーの広告は固定させています。

 

以上です。