WordPressの記事内でコンテンツをPCのみ スマホのみで別々に表示させる方法

WordPressの記事内でコンテンツをPCのみ スマホのみで別々に表示させる方法

WordPressブログの任意の記事で、Google AdSense(グーグルアドセンス)を非表示にしたい場合があると思います。

Simplicityで特定の記事やカテゴリだけGoogle AdSenseを非表示にする方法
WordPressの無料テーマ simplicityで 特定の記事やカテゴリだけGoogle AdSenseの広告を非表示にする方法 ...

当ブログは無料テーマの Simplicity を使用しているので、Google AdSense(グーグルアドセンス)を簡単に設置する事が出来ます。下記の様にパソコン用とスマホ用に、別々にウィジェットを設定する事が可能です。

WordPressの記事内でコンテンツをPCのみ スマホのみで別々に表示させる方法

Google AdSense(グーグルアドセンス)の無くなったスペースに、別の広告を貼りたいのですが、中々上手くいきません・・・。

記事中で広告バナーを横並びにすると、パソコンでは上手く表示されるのですが、スマホで見てみると、広告バナーが小さくなったり、横にはみ出たりします。

飼いヌコ
今の時代はスマホの方が閲覧は多いですからね。

そこで、functions.phpに条件分岐のコードを記述して、パソコンでは横並びの広告バナー、スマホでは1つだけの広告バナーという風に、コンテンツをPCのみ スマホのみで別々に表示させる方法を紹介したいと思います。

スポンサーリンク

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

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

飼いヌコ
実験ですねw

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

WordPressの記事内でコンテンツをPCのみ スマホのみで別々に表示させる方法

パソコンでの見え方

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

WordPressの記事内でコンテンツをPCのみ スマホのみで別々に表示させる方法

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

スマホでの見え方

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

WordPressの記事内でコンテンツをPCのみ スマホのみで別々に表示させる方法

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

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

飼いヌコ
困りましたね。

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

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

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

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

WordPressの記事内でコンテンツをPCのみ スマホのみで別々に表示させる方法

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

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

飼いヌコ
慎重に!

WordPressの記事内でコンテンツをPCのみ スマホのみで別々に表示させる方法

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

WordPressの記事内でコンテンツをPCのみ スマホのみで別々に表示させる方法

飼いヌコ
ふぅ~、やれやれ。

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

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

パソコン

WordPressの記事内でコンテンツをPCのみ スマホのみで別々に表示させる方法

スマホ

WordPressの記事内でコンテンツをPCのみ スマホのみで別々に表示させる方法

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

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

パソコン

WordPressの記事内でコンテンツをPCのみ スマホのみで別々に表示させる方法

スマホ

WordPressの記事内でコンテンツをPCのみ スマホのみで別々に表示させる方法

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

まとめ

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

今回の方法でパソコンとスマホで別々に広告を表示するコードを追加すれば、パソコンでは2つ横並びに、スマホでは単独という風に、別々に表示させる事が可能になります。その他の使い方では、パソコンだけに広告を挿入する事や、スマホのみに広告を表示する事も可能になります。

飼いヌコ
また一つ勉強になりましたね!
スポンサーリンク

フォローする

コメント

  1. マッキー より:

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

コメントをどうぞ

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