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

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

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

AICPのおさらい

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

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

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

AdSense-Invalid-Click-Protector

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

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

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

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

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

aicpプラグインを導入した場合の ショートコード化の解説
この 図の1行目 'your_shrtcode_name' が ショートコードネームになります。
ショートコード名・ファンクション名を作成し、アドセンス広告のコードを
貼り付けてコードを完成させます。

ウィジェットへの設置

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

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

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

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

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

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

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

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

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

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

コンテンツとウィジェット領域のサイズ変更
このサイドバーの領域ですが、先ほどの Rectangle 300x250px という事でしたので
301px 以上のサイズである必要があります。

注意

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

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

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

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

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

CSSにアドセンス広告のサイズ指定を紐付け
既定のサイズ指定のコードに 紐付けする 名前を書き込む箇所は 3箇所
サイドバーの領域で説明したように、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“にする場合もあります。

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