Simplicity アドセンスのビッグバナー広告を投稿タイトル上に設置

スポンサーリンク

Simplicity タイトル上広告

Simplicityの投稿タイトル上にアドセンスのビッグバナー広告を設置してみました。レスポンシブ広告なのでスマホやタブレットにも対応しています。

ブログリニューアル以前はタイトル下に横長のビッグバナー広告を設置していましたが、今回からそれを廃止してサイドバーにラージスカイスクレイパーを設置したところ、1PV当たりの収益が大幅に減ってしまいました。

いわしブログに大型広告のラージスカイスクレイパーは合わないようなので、もう一度ビッグバナー広告を復活させます。

Simplicityはウィジェットを用いて簡単にアドセンス広告の設定ができますが、メインコンテンツ内に728×90のビッグバナー広告を収めるためには、CSSを修正してブログの横幅を拡げる必要があります。

あと、AMPページでタイトル上に広告表示させる方法も紹介しています。

ラージスカイスクレイパーは失敗

リニューアル前のいわしブログでは、記事中にアドセンス広告を3枚設置していました。

使用していたブログテーマ「Stinger5」のデフォルト広告位置は、サイドバー上部に1枚、記事本文最後に2枚という構成ですが、最適な広告位置を探るためにこれを変更して、サイドバーの広告をタイトル下に移動させました。

Googleアドセンス STINGER5アドセンス広告配置移動

この変更によって、アドセンス収益は倍増という結果になりました。アドセンス広告は表示する位置によって収益が変わりますが、ここまで違うとは思いませんでした。

その後も横長ビッグバナーは高い収益を維持していましたが、今回のブログリニューアルを機に、さらなる収益向上を目指してアドセンス広告の位置を変更してみました。

ファーストビューの広告に、収益性が高いと言われる縦長のアドセンス広告「ラージスカイスクレイパー」をサイドバーに配置したのですが、これが思った以上に成績が悪かった。

クリック率が半分以下になり、全体の収益もかなり減少してしまいました。1週間ほど様子を見ましたが、以前の数値には戻りそうにありません。

アドセンス広告位置を改善して収益を向上させるためには、試行錯誤が必要です。とはいえ、今回の広告位置変更は完全に失敗でした。さっさと元の位置に戻します。

Simplicity タイトル上にビッグバナーを配置

では、Simplicityのウィジェットを使って、ビッグバナー広告を設置してみましょう。

ただし、実際に設置する広告ユニットは728×90のビッグバナーではなく、スマホやタブレットにも対応できる自動サイズのレスポンシブを使用します。見た目は正方形ですが、設置するとPC表示はビッグバナーと同等、スマホやタブレットでも横長の広告が表示されます。

事前にGoogleアドセンスの管理画面でコードを取得しておいてください。サイドメニューから「広告の設定」→「広告ユニット」で取得できます。

Googleアドセンス 広告ユニット

コードを取得したら、Simplicityのウィジェットからアドセンス広告を設定します。ダッシュボード左から「外観」→「ウィジェット」に進み、「[S]クラシックテキスト」をクリックします。

Simplicity ビッグバナー広告設定

ウィジェットのリストが表示されるので、「投稿タイトル上」を選択して「ウィジェットを追加」をクリックしてください。

Simplicity ビッグバナー広告設定

「投稿タイトル上」のウィジェット内で「タイトル:」に適当な名前を付けて「内容:」にレスポンシブ広告のコードを貼り付けます。最後に「保存」のクリックをお忘れなく。

Simplicity ビッグバナー広告設定

Simplicity CSSを修整して投稿スペース横幅を拡げる

これで投稿タイトルの上にビッグバナー広告が表示されるようになりました。スマホやタブレットも同様です。

でも、広告をよく見ると広告サイズがメインの横幅と合っていないようで、たまに小さめのサイズで広告が表示されています。

Simplicity ビッグバナーの幅

Simplicityの投稿ページは、横幅が680px(左右の余白は除く)になっています。ビッグバナーの横幅は728pxなので、本来のサイズから48pxほど不足していますね。

タイトル上に適切なサイズのビッグバナー広告を表示させるためには、CSSを修整して記事の横幅を拡げる必要があります。

Simplicityのテーマ編集から、子テーマの「スタイルシート (style.css)」に以下を追記してください。全体とメインの横幅を48pxずつ拡大して、ビッグバナーが収まるようにします。

/* 横幅拡大 */
#header-in, #navi-in, #body-in, #footer-in{
width: 1118px;
}

#main {
width: 788px;
}

これでビッグバナー広告が投稿の横幅と一致するようになりました。

Simplicity ビッグバナー広告

スマホではこんな感じで横長のアドセンス広告が表示されます。

Simplicity スマホ広告表示

Simplicity AMPページの投稿タイトル上広告設定

ただし、この方法では投稿タイトル上の広告はAMPページに表示されません。SimplicityのAMPページでは、「広告ウィジェット」を使った広告設定が出来ないためです。

いわしブログはAMPを有効化しているので、テンプレートの「amp-content.php」を編集して広告を表示させました。

まずは「amp-content.php」を子テーマに移動します。FTP等でサーバーに接続して、親テーマ(Simplicity2)から子テーマ(Simplicity2-child)に amp-content.php をコピーしてください。

Simplicity 子テーマにコピー

次に広告コードをAMPに対応させます。アドセンスの広告コード取得時に、広告ユニットのAMP対応についてヘルプが表示されるので、それを参考にしました。

以下が作成したAMP用のアドセンス広告コードです。

<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>
</pre>

最初に作成したレスポンシブ広告ユニットから「data-ad-client」と「data-ad-slot」の数字を抜き出して、上記のコードと置き換えてください。もちろん、新規で作成した広告ユニットのコードでもOKです。

data-ad-client=”ca-pub-1234567891234567
data-ad-slot=”1234567890

作成したAMP用の広告コードを、子テーマの amp-content.php に追加します。場所は<header>と<h1 class=”entry-title”>の間にそのまま貼り付けて下さい。

<?php while(have_posts()): the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <article class="article">
    <header>

<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

      <h1 class="entry-title">
        <?php the_title(); //投稿のタイトル?>

これでAMPページにもタイトル上の広告が表示されるようになりました。AMP Validatorでチェックしてもエラーはありません。

Simplicity AMPページ広告

これでアドセンス広告の収益が元に戻るといいのですが・・・(^^;

今回紹介した広告設置方法は、どんなブログにも効果があると思います。Simplicityでアドセンス広告の収益が伸び悩んでいるという方、ぜひ一度タイトル上に広告を設置してみてください。

スポンサーリンク
PC用
PC用

フォローする