Change Forward

「かわる」をアシストする

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

 

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

 

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

 

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

 

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

 

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

 

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

  • スマホでページを見やすくできる
  • 閲覧者・リピート率が上がる

 

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

 

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

 

   

HTMLとCSSをコピーする

今回はHTMLとCSSをそれぞれ編集します。

 

  1. HTMLをコピペする
  2. CSSをコピペする

 

それでは早速みて行きましょう。

 

 

1.HTMLをコピペする

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

 

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

 

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

 

 

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

 

赤の下線がある

 

<ins class="adsbygoogle"

 

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

 

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

  

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

 

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

 

 

2.CSSをコピペする

次にCSSをコピペします。

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

 

www.biz-thinking-k.com

 

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

 

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

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

 

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

 

これでPC画面では広告を表示、スマホ画面では広告を非表示とすることができます。

 

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

 

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

 

 

読みやすければ滞在時間は増える

今回の作業で、PCでは表示している広告をスマホでは消すことができるようになりました。

 

これを表示しておくと、スマホの小さい画面に何度も広告が表示され、閲覧者が疲れてしまうという最悪の状況を防ぐことができます。

 

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

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

 

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

www.biz-thinking-k.com

www.biz-thinking-k.com

 

2019.7.26 公開