ジロウ（旧名：わたぼん）のブロ具

WordPressでアドセンス広告を横並びに設置する方法と注意するべきポイント

WordPress便利帳 NO IMAGE

こんにちは♪　ジロウです。

 
アドセンス広告を記事の下に2つ横並びで設置しているブログってよく見ますよね？

 
“ダブルレクタングル”なんて呼ばれているそうです・・・(・ε・｀｡)ﾝ?

 
こんな感じ

 

adsenseimage.jpg

 
おいらが目指したのは、

 
PC上では「336×280レクタングル（大）」を2つ表示させつつ、スマホ画面では推奨されてもいる「300×250レクタングル」を1つだけ表示させる

 
ということ・・・。

 
利用しているWordPressテーマは、バズ部オリジナルのフリーテーマ「Xeory base」ですが、設置画面の幅さえ十分にあれば、ほかのテーマにも対応できると思います・・・。

 
約束はできないけど、おいらも苦労してたどり着いた方法なんで、試す価値はあると思います。

 
でも、ダメだったゴメンなさい・・・|ω・)

 
そんなわけで、今回は、WordPressを利用している場合のコイツの設置方法と、注意するべきGoogleアドセンスのルールについてご紹介します♪

 

アドセンス広告の横並び表示の注意点

 
最初に注意するべきGoogleアドセンスのルールについてお話しします。

 
アドセンス広告を2つ横並びに表示できれば、ページが整頓されて見栄えが良くなりますよね。

 
でもこれ、スマホで表示されたときは縦に2つ続けざまに表示されちゃうんですよね。

 
実はこれ、Googleアドセンスの規約に反する状況なんだそうですよ。

 
だからおいらは、「PCでは2つ横並び、スマホでは1つだけを表示」させたいと思ったんですね。

 
で、PC画面上では、でっかい「336×280レクタングル（大）」を2つ並べて、スマホ画面上では、クリック率が高い上に推奨もされている「300×250レクタングル」を1つだけ表示するようにしようというわけです。

 
ご利用なさっているテーマのメインカラム（記事本文が表示される部分）の幅が狭いと、広告がはみ出しちゃいます。ポロリってやつです。

 
少なくとも700pxくらい（？）は欲しいところなんですが、足りない場合はcssを修正して広げてください。

 
その方法は、ゴメンなさい・・・ググッてね♪　ｍ(＿ ＿；)ｍ

 
ではでは、とっとと作業に取りかかりましょう！！

 

「single.php」にコードを設置する

 
まずはアドセンスコードを3種類用意しておきます。

 
スマホ表示用の「300×250レクタングル」1つ、
PC表示用の「336×280レクタングル（大）」2つ、

 
って感じですね。

 
それぞれ別々のコードを取得するのは、クリック率のデータを取る際に便利だからです。

 
次に、「外観」→「テーマの編集」から、「単一記事の投稿（single.php）」をクリックして選択。

 
中央よりやや上くらいに下記のような記述を見つけてください。

 

</section>
<footer class=”post-footer”>
<?php bzb_social_buttons();?>

 
これの「すぐ上」に、以下のコードにアドセンスコードを追加したものをコピペしてください。

 



スポンサーリンク




ここにスマートフォン用の広告コード







ここに左に設置する広告コード




ここに右に設置する広告コード

 
コピペしたら忘れずに「ファイルを更新」をクリックして保存してくださいね。

 
次に、このままではアドセンス広告が縦に並んで表示されちゃうので、cssに追記することで指示を出すようにします。

 
「スタイルシート（style.css）」をクリックして選択し、最下部に、以下のコードをコピペしてください。

 

/* スポンサードリンクというラベルの部分 */
.ad-bottom-label {
text-align:center;  /* ラベルを中央寄せ */
margin-top:15px;  /* 上に余白 */
}
/* 横並び広告全体部分 */
.ad-bottom-main {
margin-top:20px;  /* 上に余白（ラベルとの距離） */
margin-bottom:20px;  /* 下に余白（下のコンテンツとの距離） */
}
/* 広告左 */
.ad-bottom-left{
float:left;  /* 広告を左寄せ */
margin-right:10px;  /* 右に余白（２つの広告の間の余白） */
}
/* 広告右 */
.ad-bottom-right{
float:left;  /* これも広告の左寄せ */
}
/* 最後に左寄せを解除するための記述 */
.ad-bottom-main:after {
content:"";
display:block;
clear:both;
}

 
「ファイルを更新」をクリックして保存すれば、完了です♪

 
さっそくサイトを表示させて、どれか記事を選んで確認してみましょう。

 
で、これがおいらにもよく分からないんですが、もし、アドセンス広告が縦に並んで表示されていたら、記事ページの頭に戻って、パソコンのキーボードの「F5」をクリックしてみてください。

 
再びアドセンス広告の表示部分にまでスクロールしていくと、横並びに表示されるようになっていませんか？
おいらの場合、「ダメじゃん！」って思ったけど、これをやったら成功したんですよね・・・

 
ヽ(￣▽￣;)ノ

 
参考にさせて頂いたサイトには、

 

これで一度保存して、サイトを表示させ、「F5」を押してリロードさせて確認

 
と書かれているんですが、表示させた状態で、キーボードの「F5」キーを押すと、ページが更新されて反映されるってことです♪

 
参考：　http://affiliate150.com/side-by-side

 
これで上手くいくと思いますんで、一発でダメでも、2度くらい試してみてくださいませ。

 
あ、PC画面が上手くいったら、念のためスマホでも表示を確認してくださいね。

 
ちゃんと「300×250レクタングル」が1つだけ表示されているはずです♪