三上つかさの雑談ブログ

新しいニュースから生活お役立ち情報、茶道、ブログなど雑多な話。

【コピペOK】wordpressでアドセンス広告を2つ横並びさせる方法(Stinger6)

  公開日:

最近広告の置き方を少し見直してみたりした三上つかさです。

広告に背景をつけてみたり、配置する数だったり場所だったりを変えてみたり、スマホとPCで変えてみたりといろいろと試行錯誤してみましたが、今の段階では

  • サイドバートップに1つ
  • h2前に1つ
  • 記事の下に横並びで2つ

というふうに計4つのアドセンス広告を配置しています。

アドセンスの配置制限数がなくなったので、4つにしてみたというわけです。ただ試しで今このような配置にしてあるというだけですので、もしかしたらみなさんが見ているときには違う配置になっているかもしれませんね。

 

さて、さっそくですがこの記事でメインとしているのは、

wordpressでアドセンス広告を2つ横並びさせる方法

です。

 

よく「記事下に2つ横並びにするといい」と書いてある記事があるので、それをやってみました。

私はStinger6というテーマを使っているので、違うテーマの人にはもしかしたら使えないかもしれません。ただ、CSSの変更はせずにsingle.phpに直接アドセンスをぶちこむだけなので、応用は簡単だと思います。

 

スポンサーリンク


wordpressでアドセンス広告を2つ横並びさせる方法

 

実はこの横並びをするにあたって、いろいろなサイトを見てみました。

 

……が、よくわからなかった!!!

 

試してみたけど、うまくいかなかったのです。残念です。

ちゃんとした方法(?)がわかればきれいに横並びにすることができたのでしょうが、残念ながら私にそのような技術はなかったので、無理やりに横並びにしています。

 

こんな感じです。

見てもらえばわかると思うのですが、広告を枠で囲んでいますよね。

もうお気づきの方もいると思いますが、<table>タグで2つの広告を横並びにしてしまっているのです。

 

だってほかに方法が思いつかなかったから!!!

今ところこれで不便を感じたことはないので、何もおかしなことがおこらなければこれで続けていこうと思っています。

 

コピペでOK。<table>タグ

 

これを好きなところにコピペして、終わりです。

stinger6の場合、single.php<?php the_content(); //本文 ?>の後におけば問題ないと思います。

 

<table>
<tbody>
<tr>
<td>アドセンスコード</td>
<td>アドセンスコード</td>
</tr>
</tbody>
</table>

 

アドセンスコードと書いてあるところに、自分のアドセンスコードを書いてくださいね。

また、私の場合

<font size=”1″ ><div align=”center”>スポンサーリンク</div></font>

をその下に追加しています。

 

※そして、これを使うに当たって、注意点があります。

 

注意点

 

コピペでOKとか言いつつも、この方法にはいくつかの注意点があります。

 

もともとのアドセンスを外す

single.phpに直接アドセンスコードを書き足している状態なので、もともとあった広告はそのままのはずです。

それを外して使わないと、同じ場所に4つアドセンスが入ってしまうことになります。

 

テーマそのものから広告のコードを消すか、stinger6の場合ウィジェットのアドセンスコードを消せば大丈夫です。

またその場合は、サイドバーのアドセンスコードが今度は消えてしまうので、そちらは別途、sidebar.phpに書き込むなどして、広告を表示させる必要があります。

 

スマホの表示が崩れる

上のコードをコピペするだけだと、PCにもスマホにも同じく表示されてしまいます。

 

そのため、スマホとPCでの表示を分ける必要があります。

以下のコードでわけることができます。

<div style=”padding:20px 0px;”>
<?php if(st_is_mobile()) { //スマホの場合 ?>
<?php } else { //PCの場合 ?>

さっきのコード

<?php } ?>
</div>

これをさっきのと合わせると、

下のようになります。

<div style=”padding:20px 0px;”>
<?php if(st_is_mobile()) { //スマホの場合 ?>
<?php } else { //PCの場合 ?>

<table>
<tbody>
<tr>
<td>アドセンスコード</td>
<td>アドセンスコード</td>
</tr>
</tbody>
</table>

<?php } ?>
</div>

 

スマホとPCの表示をわけるコードは便利なので、ぜひ覚えておきたいですね。

<?php if(st_is_mobile()) { //スマホの場合 ?>の後にスマホで表示させたいコードを書き、

<?php } else { //PCの場合 ?>の後にPCで表示させたいコードを書くだけです。

 

上のコードでは<?php if(st_is_mobile()) { //スマホの場合 ?>の後に何も書いていないので、スマホの場合何も表示されません。

 

横幅が足りるか問題

 

サイトの横幅を広げていないと、もしかしたらアドセンスがはみでてしまうかもしれません。

その場合は、広げるしかありません。

 

サイトの横幅の変更は

【簡単3分】Stinger6でPC記事の幅を変える方法

で説明していますので、そちらを参考にしてください。

 

おわりに

 

どうでしょうか、wordpressでアドセンス広告を2つ横並びさせる方法はおわかりいただけたでしょうか。

 

つたない説明、しかもコードのコピペ以外の注意点が結構あって簡単には使えない方法かもしれません。ただ、やり方がわからない、もしくはすでにネット上に転がっている情報ではうまくいかなかったという人は、こういう方法でやっている奴もいるんだぞということが伝わればうれしいです。

 

もちろん、バックアップをとることは忘れずに。

 

以上、三上つかさでした。

スポンサーリンク