【簡単WordPress】アドセンス広告をPCで表示させてスマホには表示させない方法。

白鳥片栗粉

ワードプレスでGoogle Adsenceのレンダングルをパソコンには表示したいけど、スマホには表示させたくない時ってありますよね。
 
 
僕(@ka__zz)の場合は、サイドバー最上部に設置してあるレンタングル(336×280の広告)が、スマホだと記事最下部のレンタングルと縦に連続で表示されてしまい、Google様の規約違反となってしまうという状況におちいりました(´Д`)
 
そこでサイドバー最上部のレンダングルを、パソコンだけ表示してスマホでは非表示にしました。
 
ということで、初心者向けにわかりやすく手順を解説します。
 

Sponsored link

WordPressでGoogle Adsenceの広告をパソコンで表示してスマホでは非表示する手順を初心者向けに図解で解説。

macbook

基本、コピって貼り付けるだけで完了するので、WordPress初心者でも簡単にできるカスタマイズで、作業時間は3分ほどで終わります。
 
 
準備として、
 
GoogleアドセンスとWordPressの管理画面にログインしておいてください。
 

1.下のhtmlをコピる

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<style>
.res_2{display: none}
@media(min-width:500px){.res_2{display:inline-block;width:336px;height:280px}}
</style>
<ins class="adsbygoogle res_2"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

・まずは上記のhtmlをコピーしてください。
 
【重要】上記のタグは「レスポンシブ」です。対象となる広告タイプがレンダングルかレンダングル大の場合は、新しくレスポンシブで広告を作ってください。
 

2・ウィジェットに貼り付ける

adsence
Sponsored link

・設定→ウィジェット→アドセンスのタグを設置してあるテキストウィジェット
 
 
adsence
 
もともと設置してあったアドセンスのタグは綺麗に全部削除します。
 
・先ほどコピーしたhtmlを貼り付けます。
 

3・広告コードでIDをコピる

7-veg-20160329-adsence

◼︎アドセンスの管理画面を開く

・広告の設定をクリック

・対象となる広告の”コードを取得する”をクリック

・ca-pub(16桁の数字)と(10桁の数字)をコピー
 

4・数字を書き換えて完了!

adsence

◼︎WordPress管理画面のウィジェットを開く
 
data-ad-client=”ca-pub-0000000000000000″←(0の部分を書き換え)

・data-ad-slot=”0000000000″←(0の部分を書き換え)

・保存ボタンをクリックして完了
 

スマホで自分のブログをチェックする。

最後にスマホで意図通りになっているかどうか確認して、表示されていなければ完了です。
 
はい、お疲れさまでした!
 
 

KAZUAKI tani
応用として4行目のblock;width:300px;height:250pxを、block;width:336px;height:280px にすればレンダングル大バージョンになります。
 
Image: PAKUTASO
 

Sponsored link


白鳥片栗粉

共感したらシェアしよう

ABOUTこの記事をかいた人

職業→カウンセラー・WEBライター・自分メディアクリエイター・ブロガー・瞑想トレーナー   iPhone7plusとMacBookPro11を持ってカフェにでかけたり旅に出たりしている。インドの聖地をうろちょろするのが趣味。   野菜・穀物・果物・ときどきお菓子で生きる偏食な暮らし。宇宙の真理と気持ちのイイ生き方を追求している。