Google AdSense（アドセンス）の自動広告を記事の中のみ非表示にする方法

Google AdSense（アドセンス）の自動広告は、特に細かい設定をしなくても手軽に配信できる便利な機能です。

しかし、ブログの種類によっては、記事の中に広告が表示されるのは嫌だ...というケースもあると思います。

まさに私のブログがそれに該当します。技術系のブログだと、解説を読んでいる途中で広告が挟まるのはストレス過ぎました。

自動広告をオフにして、場所を一箇所ずつ指定して広告を配信する方法にすればこの問題は解決するのですが、スクロール追従型のアンカー広告や画面全体を覆うワイド広告も使えなくなってしまいます。

なので今回は、「自動広告はオンのまま」かつ「記事の中に広告は表示しないようにする」の方法を紹介しようと思います。

設定方法

Google AdSense（アドセンス）の管理画面を一通り探しましたが、記事の中のみ広告をオフにするような設定はありませんでした。

なので、CSSで記事の中の広告を非表示にしようと思います。

CSSを追加する

まず、記事のみを囲っている要素のクラスやidを調べます。デベロッパーツールで、記事を囲っている要素を調べて、クラスやidを見つけます。

上記の場合、.p-post-main__contentが記事のみを囲っている親要素になります。

ポイントは、「記事のみを囲っている要素を見つける」ことです。記事以外も囲っている要素にすると、記事以外の箇所の広告も非表示になってしまいます。

次に、CSSを追加します。記事のみを囲っている要素の中の広告にのみdisplay: noneを摘要させます。

.p-post-main__content .google-auto-placed {
  display: none !important
}

2021/10現在、広告のクラス名は.google-auto-placedですが、もしかしたら今後変わるかもしれません。もし、いつの間にか広告が表示されていたら、広告のクラス名を調べてみてください。

以上で作業は終わりです。試しにサイトを見てみましょう。

「記事の中には広告が表示されない、他の箇所の広告は表示されている」のようになっていれば成功です。