アドセンス広告 – ショートコード化した時の画像サイズの設定
アドセンス広告の 無効なクリックに対応するために
AICPプラグインを導入しましたが、このため、アドセンス広告のコードを
ショートコード化することで 広告のサイズが 画面からはみ出てしまう!!
という不具合が生じるケースがあります。
これを解消するための 画像サイズ指定について 分かりやすくまとめていきます。
AICPのおさらい
ここでは AICPについて 簡単におさらいして サイズの設定に進みたいと思います。
詳しい AICPの使いかたについては ↓こちらにまとめてあります。
AdSense 無効クリック対策プラグイン【 AdSense Invalid Click Protector 】
無効なクリック対策 – AICPプラグイン
サイトに設置してある アドセンス広告を 一人のユーザーが 何度もクリックする行為は
禁止されており、無効なクリックとして扱われます。
無効というだけならいいのですが、サイトの運営をしている私たちが ペナルティを課せられ
広告を停止させられたりといった 被害に遭ってしまうのです。
このような 悪質なクリック行為から サイトを守るための対策が
WP-プラグイン AdSense Invalid Click Protector ( AICP ) なのですが
この プラグインを導入しただけでは 無効なクリックの対策は 万全ではありません。
より完璧にするために 必要なのが functions.php の編集 です。
functions.php の編集 – AICPショートコード化
アドセンスで取得したコードが複数あると思いますが、
それぞれの アドセンス広告のコードに 無効クリック対策 AICPを設置していきます。
通常なら このアドセンス広告のコードを ウィジェットに そのまま設置していますが
AICPを使用する場合、アドセンス広告のコードを ショートコード化させる必要があり
functions.php の編集は、その ショートコードを作成するためのものになります。
この 図の1行目 '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 )に書き込みます。
1 2 3 4 5 |
/*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; }} |
既定のサイズ指定のコードに 紐付けする 名前を書き込む箇所は 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“にする場合もあります。
広告自体が表示されない場合、コードのスペルが間違っていたり、
スペースが空いていなかったり、といった単純なミスも ありがちです。
些細なことでも 画像が表示されなくなりますので、一つずつチェックしてみてください。