【 AICP 】ショートコード化した広告が 画面からはみ出た時の対処方法は？

前回、アドセンス広告の 無効クリック対策のため AICPプラグインを導入し
ショートコードを使って 広告を表示するという設定を行いました。

この際に ショートコード化によって 本来の レスポンシブ機能
( ページのレイアウトによって広告サイズを自動調整してくれる ) が正常に働かず
広告のサイズが 画面からはみ出てしまう！！という不具合が生じるケースがあります。

AICP導入とショートコード化

AICPは 悪質なクリックからサイトを守るため のプラグインです。
導入がまだの方はこちらから↓
【AdSense 広告】無効クリックからサイトを守る【AICP】ワードプレス ｜プラグイン

この AICPによる 無効なクリックの対策を万全にするためには
① プラグインを導入と ② ショートコード化です。

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 )に書き込みます。

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

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

広告サイズが反映されない場合のチェック項目

サイトの領域に合ったサイズ設定をしていなければ 広告サイズが反映されず
はみ出たり、広告が途切れたりしてしまいます。

広告の表示場所によっては、style="display:inline-block“を
style="display:block“にする場合もあります。

広告自体が表示されない場合、コードのスペルが間違っていたり、
スペースが空いていなかったり、といった単純なミスも ありがちです。
些細なことでも 画像が表示されなくなりますので、一つずつチェックしてみてください。