アドセンスをPCだけで表示してスマホではアドセンスを非表示にする方法。主に無料版はてなブログで、レスポンシブデザインの人向けになるかと思います。基本コピペで初心者でもできました。初心者の私がちょっとつまずいたところ含めて詳しめに書いておきます。前のリンクまとめ記事を見てできた人はこの解説は不要です。
もちろん自力ではなく、他の方のお知恵を借りています。(私自身はCSSやHTMLはさっぱりですので・・・)なんとかできたので詳しめに書いておきます。
前回記事
なんでアドセンスを貼るときにスマホを非表示にするの?という方向けに前回の記事です。
こちらを参考にしてます
要領がつかめず、うまくいかなかったので2つの記事を混ぜてます。
thetheorier.hatenablog.com
gssmboy.hatenablog.jp
まずデザインCSSにコードを貼り付け
私がやった手順を説明します。
スマホ表示の時は1つにしてみる
の部分にあるコードをデザイン→スパナのアイコン→デザインCSSの部分にコピペして貼り付けします。(他にもコードがある場合は一番下に貼り付ける)
アドセンスコードを取得
GoogleadsenseのサイトからアドセンスのURLを取得します。レクタングルで取得しました。
記事下に貼りつけるコードを作る
今回は記事下のシェアボタンの前にアドセンスを表示させます。
いくつかコードを貼ったり、コードをいじったりするので一旦メモ帳かWordでするのをおすすめします。
ちょっとややこしいので出来上がり図を画像で。
こちらからはコピペできないようにしてます。コードはこちらの元ネタブログ様でコピペできます。
↓
まずこちらの設置方法に書かれているコードをコピペします。(赤字部分)
設置方法
次に先ほど取得したアドセンスのコードを※ここにアドセンスのコード貼り付けの部分に貼り付けします。(青枠部分)
そして、アドセンスの名前をちょっと書きかえます(黄枠部分)
そしてスマホ表示の際に消したい方のGoogle AdSenseコードの<ins>タグにあるclassを下のように書き加えます.
記事下に貼りつけ
デザイン→スパナのマーク→記事→記事下にさっき作ったコードを貼りつけます。この時も他にコード貼っていたのですが、下に貼りつけしました。
実際の画面
とりあえず他のブログを拝見している限り、広告を表示させちゃうのはだめみたいなので広告部分をモザイクにしております。
PCの画面 。
こちらは画面を小さくしていったところ。(スマホやタブレット)
スマホでも確認していましたが広告は表示されていなかったので成功かと思います。
まとめ
とりあえず1つだけですがPCで表示、スマホで非表示の設定にすることはできました。もともとそんなにアクセスのないブログなので、PCだけにアドセンス貼ることでどれくらい効果があるのかはわかりませんが、しばらく試してみようと思います。