1. 第2回 【WordPress】 Google AdSense 「全幅左右見切れ対策」や「サイズの種類」について
環境:Ubuntu 20.04 php 7.3 LiteSpeed 1.7.10 MariaDB 10.4 Cocoon
目的:①「全幅・左右見切れ対策」と、②「サイズの種類」
PCとモバイルでは表示が異なります。
特にモバイルでの表示で気をつけたいポイントです。
どんな環境であってもテーマ「Cocoon」を問題なく利用できていれば、設定としては同様にできると思います。
- 実例と実際のコードを記載していきます。
まず、どんな時か。
- どんなときに全幅表示されるのか。
- どんなときに左右が見切れてしまうのか。
主に「true」か「false」かの違いによるものです。
- 「true」:モバイル、カラム幅を超えて全幅表示。メインカラムではほとんど左右見切れることはありません。
※モバイルでサイドバーを下部に表示させる時、気をつけなければならないポイントは、「広告ウィジェット」ではなく「カスタムhtml」でコード記載することです。
理由は、モバイルでサイドバーを下部に表示させる時、AdSense広告側は全幅表示させようとしますが、WordPress側ではカラム幅におさめようとしますので左右が見切れて表示されることになります。 - 「false」:モバイル、カラム幅に合わせて表示。左右見切れることはないと思います。
私は両方を使い分けています。メインカラム本文では「true」、ウィジェットエリアでは「false」
広告サイズの種類は4種類
- 広告サイズの種類によって表示のされ方が変わります。
4種類:auto, rectangle, horizontal, vertical
- auto:Googleが自動判断する広告を表示。
PCでも、モバイルでも、自動的に表示される広告です。 - rectangle:正方形的・長方形的な広告を表示。
PCで、長方形的な四角い広告が表示されます。
モバイルでも、同様に正方形的な四角い広告が表示されます。 - horizontal:長方形的な横長の広告を表示。
PCで、長方形的な(レクタングルに比べて高さの低い)横長の広告が表示されます。
モバイルでは、「rectangle」と同様の正方形的な四角い広告が表示されます。 - vertical:長方形的な縦長の広告。
PCで、長方形的な縦長の広告が表示されます。
モバイルでは、「rectangle」と同様の正方形的な四角い広告が表示されます。
1. auto 自動
- auto:Googleが自動判断する広告を表示。
PCでも、モバイルでも、自動的に表示される広告です。
「カスタムhtml」に記載するコード
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- tohyo2020.org -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-自分のコード" data-ad-slot="自分のコード" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script></script>
- モバイル時、実際の広告表示は画面幅いっぱいに全幅表示になります。
data-full-width-responsive="true"
を
data-full-width-responsive="false"
に置き換えると、モバイル時、カラム幅に合わせて表示されます。これはモバイル時において4種類全てで同様です。
2. rectangle レクタングル 正方形
- rectangle:正方形的・長方形的な広告を表示。
PCで、長方形的な四角い広告が表示されます。
モバイルでも、同様に正方形的な四角い広告が表示されます。
「カスタムhtml」に記載するコード
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- tohyo2020.org -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-自分のコード" data-ad-slot="自分のコード" data-ad-format="rectangle" data-full-width-responsive="true"></ins>
<script></script>
- モバイル時、実際の広告表示は画面幅いっぱいに全幅表示になります。
繰り返しになりますが、左右が見切れて表示されてしまうのは、メインカラムではなく、ウィジェットエリアです。外観>ウィジェット>広告ウィジェットで「true」表示させた時です。
3. horizontal ホリゾンタル 横長
- horizontal:長方形的な横長の広告を表示。
PCで、長方形的な(レクタングルに比べて高さの低い)横長の広告が表示されます。
モバイルでは、「rectangle」と同様の正方形的な四角い広告が表示されます。
「カスタムhtml」に記載するコード
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- tohyo2020.org -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-自分のコード" data-ad-slot="自分のコード" data-ad-format="horizontal" data-full-width-responsive="true"></ins>
<script></script>
- モバイル時、実際の広告表示は画面幅いっぱいに全幅表示になります。
4. vertical バーティカル 縦長の広告
- vertical:長方形的な縦長の広告。
PCで、長方形的な縦長の広告が表示されます。
モバイルでは、「rectangle」と同様の正方形的な四角い広告が表示されます。
「カスタムhtml」に記載するコード
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- tohyo2020.org -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-自分のコード" data-ad-slot="自分のコード" data-ad-format="vertical" data-full-width-responsive="true"></ins>
<script></script>
- モバイル時、実際の広告表示は画面幅いっぱいに全幅表示になります。
広告を中央寄せしたい時
- 1行目と最終行を追加して囲みます。
<div style="margin:auto;text-align:center">
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- tohyo2020.org -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-自分のコード" data-ad-slot="自分のコード" data-ad-format="vertical" data-full-width-responsive="true"></ins>
<script></script>
</div>
1.1 ダッシュボードからCocoonの広告設定
私の実際の設定
1.2 アドセンス設定
- すべてのアドセンス広告を表示「✔」
- 広告コード入力
1.3 アドセンス関連コンテンツコード入力
- アドセンス関連コンテンツコード入力
私は設定していません。他ジャンルのWebサイトであるために、「アドセンスの関連コンテンツ表示」ですと、「スポーツカテゴリ」を見ているのに「社会・経済カテゴリ」が表示されていたりするので利用していません。
上記の理由によって、広告クリック率も多くなく、「Cocoon設定>投稿>関連ページの設定」を個別に行っています。私にとっては、その方が離脱率や滞在時間を見る限り有益なのでそうしています。
広告については、関連ページ単独ウィジェットの「投稿本文上下」「SNS上下」「関連記事上下」など定期的に実験しています。現在は「ウィジェットの本文下」にレクタングルを2つ並べています。「パソコンでは両並び」「モバイルでは縦並び」で見えます。そのコードは画像の下に記載します。
人によっては、「アドセンス関連コンテンツ広告」は有益になると思いますので、ご自身で判断されるのが良いと思います。
- レクタングルを2つ並べる時のコード:
<div class="column-wrap column-2">
<div class="column-left">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- tohyo2020.org -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-自分のコード"
data-ad-slot="自分のコード"
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="column-right">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- tohyo2020.org -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-自分のコード"
data-ad-slot="自分のコード"
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
data-full-width-responsive="true"
が初期設定ですが、
data-full-width-responsive="false"
にしないと左右が見切れてしまう場合があります。
1.4 Cocoonの広告表示位置の設定
当初は、「✔」するだけだったので便利に利用させて貰っていましたが、現在では「どこにどの種類の広告を挿入したいか」というのを個別に設定しています。ですので「✔」していません。
4種類の広告を簡単に利用できるように「再利用ブロック」に設定しています。
1.5 再利用ブロックの編集
投稿編集画面の右上に「縦の三点リーダ」があります。マウスのカーソルを合わせるとオプションと表示されます。左クリックします。
1.6 再利用ブロックの編集画面を新しいタブで。
- 「すべての再利用ブロックを管理」右クリックして新しいタブで開きます。
1.7 ダッシュボードからCocoonの広告設定
下記画面はすでに登録している私の画面です。「link」があるのは「リンクユニット」の広告があった時の名残りです。新規追加ボタンをクリックして作成します。
1.8 再利用ブロックでは「true」
再利用ブロックはメインカラムで利用するものですので「true」で設定しています。
1.9 再利用ブロックを利用する時
段落を選択してカーソルが点滅している時、「+」ボタンクリック>全て表示>再利用可能をクリックします。
1.10 再利用可能なブロックが出てきます。
クリックすると、本文に再利用ブロックが挿入されます。赤枠下部の「すべての再利用ブロックを管理」でも新規追加や編集することができます。
1.11 ウィジェットで広告設定する時は「false」
外観>ウィジェットをクリックして、ウィジェットエリアの編集をできるようにします。
1.12 ウィジェットで広告設定する時は「false」
広告を好きな場所に表示できるように追加します。サイドバー一番上の広告です。実際のコードは画像の下に記載します。
<div style="margin:auto;text-align:center">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- tohyo2020.org -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-自分のコード"
data-ad-slot="自分のコード"
data-ad-format="auto"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div style="margin:auto;text-align:center">
1行目と最終行をこのコードでで挟んでおくと少し小さい広告がずれて表示されるとこを防止できます。たまにずれてますが。
</div>
↑実際の広告表示は、すべてのページで共通して表示しているので実際にご確認ください。
1.13 サイドバースクロール追従
ほとんどと行っていいほど見かけるのは、「rectangle」正方形か、「vertical」縦長です。私の場合は「rectangle」をダブルにしています。理由は2種類の広告がスクロール追従してくれることによってクリック率が上がるからです。
「スポンサーリンク」と表示するようになったのは、広告へ誘導させるようなデザインや、デザインに凝りすぎて、どれがデザインで広告かがはっきりしないブログが増えたことによるものでしょう。
私はどの広告にもスポンサーリンクとは記載していません。どれが広告かほとんどの人がわかるようになっていると思います。ですので、下記の実際のコードは自己責任でご利用ください。
<div style="margin:auto;text-align:center">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- tohyo2020.org -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-自分のコード"
data-ad-slot="自分のコード"
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- tohyo2020.org -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-自分のコード"
data-ad-slot="自分のコード"
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
↑実際の広告表示はPCで確認してみてください。すぐ右にあるはずです。
【コメント】 ※「メールアドレス不要」