Googleアドセンス広告をスマホだけ非表示にする方法

このご時世、ブログへの半数以上のアクセスがスマホからになっています。

スマホはPCよりも画面が小さいため、PCと同じだけ広告を表示してしまうと閲覧の妨げになります。ページのみづらさに、読むのをやめてしまう閲覧者も多いかもしれません。

そこで今回はスマホでアドセンスを非表示にする方法をご紹介します。

【この記事を読むメリット】

スマホの画面はシンプルに。

それでは今回のコンテンツです。

画面の大きなPCと異なり、スマホではアドセンス広告が画面の半分以上を占めることもあり、非表示にしたいこともあるかと思います。
スマホではアドセンス広告が非表示になるように、設定をしておくことで、読み手の離脱を防ぐことができます。

HTMLとCSSをそれぞれ編集て、設定をしていきましょう。

まずは広告のコードを取得します。

アドセンスやアフィリエイトなど、それぞれのサイトからHTMLのコードを取得してください。

アドセンスであれば、下記のようなコードが確認できます。

【広告を消す】スマホだけアドセンスを非表示にする方法

赤の下線がある

<ins class="adsbygoogle"

となっている箇所に下記赤字のコードを追加します。

<ins class="adsbygoogle phone-no-display"

これだけでHTMLは準備完了です。CSSの編集へ進みましょう。

HTMLにスマホ非表示のサインを付けます。

次にCSSをコピペします。

初めてはてなブログでCSSを編集される方は、こちらの手順をご参照ください。

下記のコードをコピーして貼り付けるだけです。

.phone-no-display{
display:block;
}

@media screen and (max-width: 480px) {
.phone-no-display{
display:none;
}
}

イメージとしては広告に「phone-no-display」という印をつけて、その印がある場合にはスマホでの表示をしないように指示をする流れです。
これでPC画面では広告を表示、スマホ画面では広告を非表示とすることができます。

うまくいかない場合、画面のサイズ設定があっていない可能性があるため、青字の数字を大きくしてみてください。より大きな画面でも、広告を非表示にすることができます。

簡単、便利。最高ですね。

今回の作業で、PCでは表示している広告をスマホでは消すことができるようになりました。
この設定をしておくと、スマホの小さい画面に何度も広告が表示され、閲覧者が疲れてしまうという最悪の状況を防ぐことができます。

出先でのスマホからの閲覧は多く、スマホで見やすい設定をしておくことはとても大事です。

ぜひ導入してみて頂ければと思います。

▽スマホ対策はこちらもおすすめ