[CSS] AdSense広告のCLSを改善した

AdSense広告の読込み途中で画面ズレが生じるので、あらかじめ高さを設定するようにしました。

/** 広告のCLS 改善
 * */

.ad-auto .ad-wrap, .ad-area .ad-wrap{
    min-height:280px;
}
@media screen and (max-width: 480px){
    .ad-auto .ad-wrap, .ad-area .ad-wrap{
        min-height:calc(83vw);
    }
}

このCSSコードでは、ウェブサイト上の広告表示でのレイアウトシフト（CLS）を減らします。

1. 広告エリアの最小の高さ設定

まず、広告を表示するエリアに最小の高さを設定しています。
これは、「ad-auto」や「ad-area」というクラスを持つ要素の中にある「ad-wrap」クラスの要素に適用されます。

通常のデスクトップ画面では、この最小の高さを280ピクセルに設定しています。

2. スマートフォン向けの調整

画面の幅が480ピクセル以下の場合、つまりスマートフォンなどの小さな画面では、広告エリアの最小の高さを画面の幅に応じて変更します。
具体的には、画面幅の83%を最小の高さとして設定します。

これで広告が読み込まれる際にページのレイアウトが大きく変わることを防ぐことができました。

こちらもどうぞ。

[Cocoon] AdSense配信停止を避けるためログイン時に広告コードをなしにした

管理者が広告を表示するだけでも「厳密にはアドセンス規約違反になる可能性がある」ようです。なので、念のため ログイン時に AdSenseコードを出力しないようにします。Cocoonテーマで表示している「広告コード」を管理者に表示しないフックを functions.php に追加しました。Google Adsense配信停止への対策Google Adsenseは、サイトに規約違反があると広告配信が制限されることがあります。第三者がわざと広告をクリックする（いわゆる「アドセンス狩り...

chiilabo.com

アンカー広告が印刷に表示される [Google Adsense, Cocoon]

自分のブログを印刷していたら、アンカー広告が印刷されてしまうことに気づきました。ページごとに下部に広告が表示されてしまっています。◆追記（2022年4月3日）Cocoon 2.4.2の更新で直ったかもしれません。これまでは、本文内のAdsense広告は、印刷されないように設定されていました。印刷時のスタイルを、@media print で指定することができるからです（WordPressのCocoonテーマを利用しています）。しかし、最近（2021年7月19日から）表示されるよ...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。