アドセンス広告 – ショートコード化した時の画像サイズの設定

アドセンス広告の無効なクリックに対応するために
AICPプラグインを導入しましたが、このため、アドセンス広告のコードを
ショートコード化することで広告のサイズが画面からはみ出てしまう！！
という不具合が生じるケースがあります。

これを解消するための画像サイズ指定について分かりやすくまとめていきます。

contents - 目次 -

1. AICPのおさらい
2. CSS – ショートコードのサイズ指定
- 2.1. サイトの領域と広告のサイズ
- 2.2. スタイルシートにコードを指定する
3. 広告サイズが反映されない場合のチェック項目

AICPのおさらい

ここでは AICPについて簡単におさらいしてサイズの設定に進みたいと思います。

詳しい AICPの使いかたについては ↓こちらにまとめてあります。
AdSense 無効クリック対策プラグイン【 AdSense Invalid Click Protector 】

無効なクリック対策 – AICPプラグイン

サイトに設置してあるアドセンス広告を一人のユーザーが何度もクリックする行為は
禁止されており、無効なクリックとして扱われます。
無効というだけならいいのですが、サイトの運営をしている私たちがペナルティを課せられ
広告を停止させられたりといった被害に遭ってしまうのです。

このような悪質なクリック行為からサイトを守るための対策が
WP-プラグイン AdSense Invalid Click Protector ( AICP ) なのですが
このプラグインを導入しただけでは無効なクリックの対策は万全ではありません。
より完璧にするために必要なのが functions.php の編集です。

functions.php の編集 – AICPショートコード化

アドセンスで取得したコードが複数あると思いますが、
それぞれのアドセンス広告のコードに無効クリック対策 AICPを設置していきます。

通常ならこのアドセンス広告のコードをウィジェットにそのまま設置していますが
AICPを使用する場合、アドセンス広告のコードをショートコード化させる必要があり
functions.php の編集は、そのショートコードを作成するためのものになります。

この図の１行目 'your_shrtcode_name' がショートコードネームになります。
ショートコード名・ファンクション名を作成し、アドセンス広告のコードを
貼り付けてコードを完成させます。

ウィジェットへの設置

ウィジェットではここで作成したショートコードを記述するだけなのですが
PCの画面サイズの変更やスマホやタブレット、使用する媒体などのサイズによって
サイトのサイズから広告がはみ出てしまうという不具合が起きてしまいます。

この不具合を改善するため、スタイルシート（CSS）にサイズ指定のコードを記述します。

CSS – ショートコードのサイズ指定

広告のサイズを設定するコードを貼るにも指定したいサイズが良くわかっていないと
とても時間がかかってしまいますので、まずはサイトの領域や広告のサイズの基準を
知っておくことから始めます。

サイトの領域と広告のサイズ

サイトの領域は、外観カスタマイズで初めに設定していると思います。
ここで、記事 ( コンテンツ ) 領域とサイドバーの領域を指定しているのですが
広告にも既定のサイズがあり、それを踏まえて設定するという事が重要になります。

これは、ルクセリタスのウィジェット、アドセンス広告ウィジェットのサイズ画面です。
広告のサイズには主に正方形・縦長・横長の 3タイプに分けられます。

例えば、横長の広告【 Billbord 】ですが、このサイズは 970 x 250 と
横幅が広いため、サイドバーを使用しているサイトでは表示サイズが合いません。

レスポンシブの設定をしている場合、領域に合わせてサイズを変換してくれますが
今回の、ショートコードでは自動的に変換、という訳にはいかないので
表示させたい場所に合わせて、サイズを設定したショートコードを作成する必要があります。

今回は、分かりやすく 300 x 250px (Rectangle) というサイズで
設定方法を解説していきますが、まずは自分にとってどのサイズが必要なのかも
チェックしておきましょう。

このサイドバーの領域ですが、先ほどの Rectangle 300x250px という事でしたので
301px 以上のサイズである必要があります。

注意

サイドバーを広く取りすぎてもコンテンツの領域が狭くなり
表示させたい広告に影響が出る場合があります。

スタイルシートにコードを指定する

サイズの指定は、スタイルシート（CSS）に書き込みますので
functions.php に設定したコードと紐付けする必要があります。

functions.php でショートコード “ad_01" として設定したアドセンス広告のコードを一部編集します。

変更箇所は、紐付けするための名前 adsbygoogle の後にスペースを空けて
分かりやすく名前を付けます。今回は Rec_01 と付けました。
あとは、data-ad-format="auto" を削除
この、 Rec_01 をのサイズ指定をスタイルシート( CSS )に書き込みます。

/*Adsense-広告サイズ- ad_01  Rectangle*/
.Rec_01 { width: 300px; height: 250px; }
@media (min-width:500px) { .Rec_01 { width: 300px; height: 300px; }}  
@media (min-width:600px) { .Rec_01 { width: 300px; height: 300px; }}

/*Adsense-広告サイズ- ad_01 Rectangle*/

.Rec_01 { width: 300px; height: 250px; }

@media (min-width:500px) { .Rec_01 { width: 300px; height: 300px; }}

@media (min-width:600px) { .Rec_01 { width: 300px; height: 300px; }}

既定のサイズ指定のコードに紐付けする名前を書き込む箇所は３箇所
サイドバーの領域で説明したように、Rectangleの 300 x 250 で設定しています。

.Rec_01 { width: 300px; height: 250px; } 広告のサイズ
@media(min-width:●●px) ← 画面の幅が狭いとき { .Rec_01 { 画像サイズ } }
@media(min-width:●●px) ← 画面の幅が広いとき { .Rec_01 { 画像サイズ } }