ワードプレスでGoogle Adsenceのレンダングルをパソコンには表示したいけど、スマホには表示させたくない時ってありますよね。
僕(@ka__zz)の場合は、サイドバー最上部に設置してあるレンタングル(336×280の広告)が、スマホだと記事最下部のレンタングルと縦に連続で表示されてしまい、Google様の規約違反となってしまうという状況におちいりました(´Д｀)
そこでサイドバー最上部のレンダングルを、パソコンだけ表示してスマホでは非表示にしました。
ということで、初心者向けにわかりやすく手順を解説します。
WordPressでGoogle Adsenceの広告をパソコンで表示してスマホでは非表示する手順を初心者向けに図解で解説。
基本、コピって貼り付けるだけで完了するので、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・ウィジェットに貼り付ける
・設定→ウィジェット→アドセンスのタグを設置してあるテキストウィジェット
もともと設置してあったアドセンスのタグは綺麗に全部削除します。
・先ほどコピーしたhtmlを貼り付けます。
3・広告コードでIDをコピる
◼︎アドセンスの管理画面を開く
↓
・広告の設定をクリック
↓
・対象となる広告の”コードを取得する”をクリック
↓
・ca-pub(16桁の数字)と(10桁の数字)をコピー
4・数字を書き換えて完了！
◼︎WordPress管理画面のウィジェットを開く
・data-ad-client=”ca-pub-0000000000000000″←（0の部分を書き換え）
↓
・data-ad-slot=”0000000000″←（0の部分を書き換え）
↓
・保存ボタンをクリックして完了
スマホで自分のブログをチェックする。
最後にスマホで意図通りになっているかどうか確認して、表示されていなければ完了です。
はい、お疲れさまでした！
応用として4行目のblock;width:300px;height:250pxを、block;width:336px;height:280px にすればレンダングル大バージョンになります。
Image: PAKUTASO