さらばQuickAdsense！！moreタグ下へのアドセンスにプラグイン「AdMore」を使ってみた。

2015/01/04 2015/01/10

ブログで幸せになります宣言以後、色々と修正を加えていました。どうも、案外愚直でまじめな親父です。

特に急いでいたのはアドセンスの設定。広告ユニットを編集、追加して種類別・設置場所別に効果測定ができる状態にしようとしてました。

このブログには記事中moreタグあとにプラグインのQuickAdsenseを使ってアドセンスを置いています。Simplicityのカスタマイズ機能では記事中には本文下のレグタングル2個、もうひとつはサイドバートップもしくは記事中のh2タグ前が選択できます。

しかし、そうではなくサイドバーと記事本文中、そして記事下に置きたかったのでsingle.phpファイルを修正し、QuickAdsenseを使っていたんですね。

で、Simplicityの機能でサイドバートップと記事本文下、記事本文中はQuickAdsenseのmoreタグ下機能で3個のアドセンスを表示していました。

QuickAdsenseの挙動がおかしい

新たに広告ユニットを作成し、再度QuickAdsenseに設定したんです。そして保存っと、「Save」ボタンを押しました。。

いつも通りIEがグルグルと動作します。グルグル、グルグルと、、

グルグル、グルグル。。

。。。いつまでかかるんや。

普段の更新時にかかる明らかに時間とは違います。そしてとうとう出ましたよIEの悲鳴、

「oyaji-choice.comは反応してません」

なんと！なんかした俺？

そのあと何度か手順を繰り返したけど、やはり同じ反応。QuickAdsenseを編集しようとするとWordPressが正常に動作しません（他の動作は全く問題なし）。挙句の果てにはOSも停止する始末、セーフモードなんて久しぶりの経験。

エックスサーバーに変更した影響、それともSimplicityをバージョンアップしたからそのせい？などと色々考えましたが、サーバとテーマが悪いのであればそもそも動作もせんしログインもできんやろと。

やっぱりQuickAdsense、こいつかぁ。

もう2年も更新されていないQuickAdsense

ええ、そうなんです。2年間そのままなんです。

WordPressのプラグインページで検索すると表示はされるんですが更新は2年前。

大丈夫なのか？2年ってWordPressもサーバの環境も随分変わるぞ！？

試しにインストール済みのものをいったん削除、そして再インストールしました。それでもやはり同じ状況。他の設定項目の変更などは正常です。

QuickAdsenseが悪さをしていると疑わざるを得ない状況です。

もうええわQuickAdsense、やめやめ。

moreタグへのアドセンス設置、すごいプラグインを発見「AdMore」。

すっげー探しましたよ。

WordPressサイトのプラグイン検索でadsenseのキーワードでそれらしいのを見つけ出しては何度も都度インストールして設定を確認してみたり。。

ようやく発見したのがこの記事、

［WordPress］moreタグにAdsenseを追加できるプラグインAdMoreが素晴らしい！

この記事で絶賛されているプラグイン「AdMore」を使うことにしました。

このAdMore、何が凄いって記事本文の上中（moreタグ部）下に任意のhtmlタグを挿入できるんです。今回はmoreタグへの挿入機能しか使いませんが、考え方次第によっては色んなこと出来そうですよね。

こんな設定画面です。非常にシンプルです。

現在このブログは、

「マルチなSimplicity」

を利用させてもらってるので記事下へのタグ挿入は別にいいとして、記事上はアドセンス以外の広告とか置けそうです^^。

では、「記事のMoreの位置に挿入するタグ」へアドセンスの広告ユニットをコピペします。

GoogleAdsenseレスポンシブル広告ユニットのおさらい

レスポンシブル広告ユニットを設定する際、自分の戦略通りちゃんとサイズを指定しておきましょう。そのままだとスマホ表示時はモバイルバナーサイズになることが多いようです。

親父はスマホ表示時に300*250のレクタングルサイズで出したかったのです。なのでサイズを指定しました。

アドセンスの広告ユニット設定画面で最後の広告コードを取得するまでは同じです。そこで、「モード」を「アドバンス（コード変更が必要）」に変更してコードを作成します。こんなかんじです。

通常の広告コードのまえに見慣れぬ記載があります。レスポンシブル広告ユニットはここで、どんなときにどのサイズで表示させるか設定できるのです。

<style>
.xxxxxxxxxxxxxxxx { width: 320px; height: 50px; }
@media(min-width: 500px) { .xxxxxxxxxxxxxxxx { width: 468px; height: 60px; } }
@media(min-width: 800px) { .xxxxxxxxxxxxxxxx { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- xxxxxxxxxxxxxxxx -->
<ins class="adsbygoogle xxxxxxxxxxxxxxxx"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

ここでxxxxxxxxxxxxxは自分が設定したユニークな値です。

修正・設定するのは以下の赤字部分。

.xxxxxxxxxxxxxxxx { width: 320px; height: 50px; }
@media(min-width: 500px) { .xxxxxxxxxxxxxxxx { width: 468px; height: 60px; } }
@media(min-width: 800px) { .xxxxxxxxxxxxxxxx { width: 728px; height: 90px; } }

1行目がスマホ表示時、2行目が表示幅が500px以上の、そして3行目が表示幅800px以上時の広告サイズを指定しています。

上記の通りスマホ時は300*250、そしてそれ以外は336*280を設定します。

.xxxxxxxxxxxxxxxx { width: 300px; height: 250px; }
@media(min-width: 500px) { .xxxxxxxxxxxxxxxx { width: 336px; height: 280px; } }
@media(min-width: 800px) { .xxxxxxxxxxxxxxxx { width: 336px; height: 280px; } }

これで思いの通りのレスポンシブル広告ユニットが出来ました。あとはこれをAdMoreに貼り付けるだけです。