アドセンスの広告をパソコンとスマホ別々で表示させる方法

アドセンスの広告をパソコンとスマホ別々で表示させる方法

Googleアドセンスの広告をパソコンとスマホ別々で表示させる方法を紹介します。この方法を使えばパソコンではアドセンスを横並びのダブルレクタングルに、スマホでは1つだけ表示させる事も可能です。

スマホでアドセンスが縦に2つ並ぶのはポリシー違反ですよ。

パソコンとスマホで同じ広告を使用していると、パソコンで横並びのダブルレクタングルに設定した場合、スマホでは縦に連続で表示されてしまいます。このままではアドセンスのポリシー違反になるので、パソコンとスマホで別々のアドセンスを表示させる必要があります。

どうやってアドセンスをパソコンとスマホで別々に表示させるのですか?

プラグインを使う方法もありますが、今回はfunctions.phpに条件分岐のコードを記述する方法を紹介したいと思います。

テーブル(表)を使ってバナーを横に並べてみる

まず初めに、テーブル(表)を使って広告バナーを横に2つ並べてみます。パソコンとスマホでどのように表示されるのか確かめていきましょう。

実験ですねw

WordPressブログ記事で、枠線なしのテーブルに、コードを2つ挿入しました。

アドセンスの広告をパソコンとスマホ別々で表示させる方法

パソコンでの見え方

パソコンで表示させると、300×300サイズの広告バナーが綺麗に横並びになりました。

アドセンスの広告をパソコンとスマホ別々で表示させる方法

完璧ですね。きれいに並んでいますね。

スマホでの見え方

先程横並びで設定した広告バナーを、今度はスマホから閲覧してみましょう。

アドセンスの広告をパソコンとスマホ別々で表示させる方法

スマホでも横並びになっていますね。しかし何だかバナーが小さいな~。

スマホでも広告バナーが2つ横並びで表示されましたが、大きさが半分ほどになってしまいました。これでは広告バナー自体が目立たないのでブログの訪問者にクリックされ難くなります。

困りましたね。

そこで、パソコンとスマホで別々に広告を表示させるコードを、functions.php に追加してやります。

functions.php! 失敗するとブログが真っ白になる例のアレですね?

functions.phpを編集する場合は、やり方を間違えるとWordPressがエラーになってしまうので、必ずバックアップを行いましょう。

スポンサーリンク

functions.phpに条件分岐のコードを記述

「ダッシュボード」➝「外観」➝「テーマの編集」➝「functions.php」と進みます。

アドセンスの広告をパソコンとスマホ別々で表示させる方法

functions.phpに下記のコードを追加します。

HTML

コピペでポチっと。最後に「ファイルを更新」をクリックします。

慎重に!

アドセンスの広告をパソコンとスマホ別々で表示させる方法

何とか成功したみたいですね。

アドセンスの広告をパソコンとスマホ別々で表示させる方法

ふぅ~、やれやれ。

ショートコードを使って広告を表示させる

無事functions.phpに条件分岐のコードを記述できたので、仕上げはショートコードを使ってパソコンとスマホ別々の広告を表示させていきます。

HTML

パソコンのみで表示させたい場合は[pc][/pc]で、スマホのみで表示させる場合は[sp][/sp]を使い、それぞれのコンテンツを囲いましょう。

アドセンスの広告をパソコンとスマホ別々で表示させる方法

icon-check-square-o パソコン

アドセンスの広告をパソコンとスマホ別々で表示させる方法

icon-check-square-o スマホ

アドセンスの広告をパソコンとスマホ別々で表示させる方法

お~、パソコンとスマホで別々に表示された!

では、パソコンでアドセンスを横並びに2つ表示、スマホでは1つだけのアドセンスを表示させてみましょう。

icon-check-square-o パソコン

アドセンスの広告をパソコンとスマホ別々で表示させる方法

icon-check-square-o スマホ

アドセンスの広告をパソコンとスマホ別々で表示させる方法

OK!上手くいきましたね。

まとめ

Google AdSense(グーグルアドセンス)の広告を2つ並べて横並びに表示させると、パソコンでは上手くいきますが、スマホで閲覧した時に、縦に連続して2列に表示されてしまいます。これはポリシー違反になります。

今回の方法でパソコンとスマホで別々に広告を表示するコードを追加すれば、パソコンでは2つ横並びに、スマホでは1つのみにという風に、コンテンツを別々に表示させる事が可能になります。

その他の使い方としては、、パソコンだけに広告を挿入する場合は[pc][/pc]で、スマホのみに広告を表示する場合は[sp][/sp]で囲ってやれば、単独でも使用できます。

また一つ勉強になりましたね!

2 COMMENTS

マッキー

はじめまして!
月乃塾ブログからマッキー事牧野といいます。
いつもワードプレスでブログを作成してますが、できることが多すぎてまだチンプンカンプンです(+_+)
是非ごりょんさんのブログを参考に勉強させていただきたいと思いますのでよろしくお願いします(^^♪

返信する
ごりょんさん

マッキーさんはじめまして。

こちらこそよろしくお願いします。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿や心無いコメントは無視されますのでご注意ください。(スパム対策)