コーヒ豆通販はこちら

WordPressでモバイル専用広告を表示する方法｜CSS・JavaScript活用法

モバイル専用広告を表示する方法 社会人の勉強

1. はじめに

モバイルユーザーが急増する現代、スマートフォン向けに最適化された広告表示は収益化の鍵となります。しかし、「モバイル専用広告をどう設定すればよいのか？」と悩む方も多いでしょう。
本記事では、WordPressを利用してモバイルでのみ広告を表示する方法を、以下の3つのパターンに分けて詳しく解説します。

  1. CSSを使った表示制御
  2. JavaScriptを使った表示制御
  3. WordPress特有の関数「wp_is_mobile()」を使った方法

2. モバイル広告の重要性

モバイル市場の成長

スマートフォンやタブレットからのアクセスが急増しており、モバイル専用広告を設定することで、ユーザーの閲覧体験に合わせた最適な広告表示が可能になります。

収益化のチャンス

モバイル向けに最適化された広告は、クリック率（CTR）や広告単価（CPC）の向上につながり、結果として収益を最大化できる可能性があります。

3. モバイル専用広告を表示する悩みとその解決策

悩みの紹介

  • モバイル専用の広告を表示したいが、デスクトップ用広告も表示されてしまい、レイアウトや収益面で問題が生じる。
  • デバイスごとの広告切り替え方法が分からない。

解決策

WordPressでモバイル専用広告を表示するための具体的な方法を、以下の方法で段階的に紹介します。

4. WordPressでモバイル専用広告を表示する方法

4-0. AdSenseを使った広告設定方法

AdSenseでの準備

  • Google AdSenseにサインインし、レスポンシブ広告ユニットを作成します。
  • 作成した広告コードをコピーして、WordPressサイトに挿入します。

自動広告（Cocoonテーマの場合）

Cocoonテーマでは、管理画面内の「Cocoon設定」>「広告」から自動広告を有効にできます。
詳しく解説しているサイトが多数あるのでそちらを参考にして下さい。

  • メリット：手動でコードを追加する必要がなく、広告の表示位置や種類もテーマの設定で簡単に管理可能。
    （モバイル以外のデバイスにも表示されます）

手動広告の設定方法

特定の位置に広告を挿入する場合、以下のように手動でコードを埋め込みます。
例：投稿やサイドバーに手動広告を表示する場合

<!-- 広告コード -->
<div class="adsense-ad">
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({
      google_ad_client: "ca-pub-XXXXXX",  // 自分のAdSenseクライアントIDに置き換える
      enable_page_level_ads: true
    });
  </script>
</div>

4-1. CSSによるモバイル専用表示の設定

手動で挿入した広告をモバイル専用に表示するため、CSSのメディアクエリを使用します。
手順：

  1. WordPress管理画面から「外観」＞「カスタマイズ」＞「追加CSS」に以下のコードを追加します。
  2. 上記CSSは、広告コード内のクラスに適用され、モバイルデバイスでのみ広告が表示されるようになります。
/* モバイルデバイス（画面幅768px以下）のみに広告を表示 */
@media only screen and (max-width: 768px) {
  .adsense-ad {
    display: block;
  }
}

/* デスクトップデバイス（画面幅769px以上）には広告を表示しない */
@media only screen and (min-width: 769px) {
  .adsense-ad {
    display: none;
  }
}

4-2. JavaScriptを使った表示/非表示の切り替え

より動的な制御が必要な場合は、JavaScriptを利用して画面サイズに応じた広告表示を実現します。

if (window.innerWidth <= 768) {
  document.querySelector('.adsense-ad').style.display = 'block';  // モバイルなら表示
} else {
  document.querySelector('.adsense-ad').style.display = 'none';   // デスクトップなら非表示
}

4-3. WordPress特有の関数「wp_is_mobile()」を使った方法

WordPressには、モバイルデバイスかどうかを判別する wp_is_mobile() 関数があります。この関数を利用することで、モバイルデバイスの場合のみ広告を表示できます。

<?php if ( wp_is_mobile() ) : ?>
  <!-- モバイルデバイス用の広告コード -->
  <div class="adsense-ad">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
      (adsbygoogle = window.adsbygoogle || []).push({
        google_ad_client: "ca-pub-XXXXXX",
        enable_page_level_ads: true
      });
    </script>
  </div>
<?php endif; ?>

このコードは、テーマのテンプレートファイル（例えば、single.php、page.php、sidebar.phpなど）に記述します。モバイルデバイスの場合にのみ、内部の広告コードが実行されます。

（※このページの全てのコードはコピペはOKですが自己責任でお願いします）

5. WordPressプラグインを使ったモバイル広告表示

おすすめプラグイン紹介

  • Ad Inserter:
    広告の挿入位置を細かく管理でき、モバイル専用の広告表示もサポートしています。
  • Advanced Ads:
    デバイスごとに広告を切り替える設定が可能で、モバイル、デスクトップ、タブレットごとに最適な広告表示を実現できます。
  • WP Quads:
    レスポンシブ広告や特定の位置に広告を挿入する機能があり、モバイル広告の設定が容易です。

これらのプラグインを利用すれば、手動でコードを記述する手間が省け、直感的に広告表示をカスタマイズできます。

6. モバイル広告で収益を最大化するためのポイント

  • レスポンシブ広告の活用:
    モバイルに最適化されたレスポンシブ広告を使用することで、デバイスに合わせた表示が可能になります。
  • ターゲットを絞った広告表示:
    ユーザーの行動や興味に合わせた広告を表示することで、クリック率（CTR）の向上が期待できます。
  • 広告の配置とタイミングの調整:
    広告がユーザー体験を損なわない位置に表示されるよう、配置や表示タイミングを工夫します。
  • アナリティクスの活用:
    Google AnalyticsやAdSenseのデータを活用して、広告パフォーマンスを継続的にモニタリングし、最適化を図ります。

7. モバイル広告を表示した結果、得られた効果

実際にモバイル専用広告を実装したサイトでは、以下のような効果が報告されています。

  • 収益化の向上:
    モバイル専用広告の導入により、クリック率が20%向上し、月間収益が大幅に増加した事例があります。
  • ユーザー体験の向上:
    適切に広告が配置されることで、サイトの閲覧体験が向上し、離脱率の低下にもつながっています。
  • 広告単価の改善:
    ターゲットに合わせた広告表示により、広告単価（CPC）が向上し、収益性が改善されるケースが多く見受けられます。

8. 注意点

  • AdSenseのポリシー遵守:
    広告の配置や表示方法は、Google AdSenseのポリシーに準拠する必要があります。違反すると広告配信が停止される恐れがあるため、必ずガイドラインを確認してください。
  • wp_is_mobile()の限界:
    wp_is_mobile()は簡易的なモバイル判定関数です。タブレットなど一部のデバイスで正確に判別されない場合があるため、より精度の高い判定が必要な場合は、JavaScriptやカスタムユーザーエージェント判定の併用を検討してください。
  • キャッシュの影響:
    広告が表示されない場合、キャッシュプラグインなどが影響している可能性があります。キャッシュのクリアや設定の再確認を行ってください。

9. まとめ

モバイル専用広告を正しく表示することで、サイトの収益化やユーザー体験の向上につながります。WordPressでは、Cocoonテーマの自動広告設定、手動広告のコード挿入、CSS・JavaScript、そして「wp_is_mobile()」関数を使った方法など、多彩なアプローチが可能です。
ご自身のサイトに合った方法を選び、効果的な広告表示を実現しましょう。

10. よくある質問（FAQ）

Q: モバイルデバイス以外で広告が表示されないようにするには？
A: wp_is_mobile() 関数を使う、またはCSSメディアクエリでデスクトップでの表示を非表示に設定する方法があります。

Q: 広告が表示されない場合、考えられる原因は？
A: 広告コードが正しく挿入されていない、AdSenseの設定が不適切、またはキャッシュの影響が考えられます。コードや設定を再確認してください。

この記事が、モバイル専用広告の実装と収益化のヒントとなれば幸いです。ぜひ、実際に設定を試しながら最適な方法を見つけてください！

タイトルとURLをコピーしました