Affinger系のテーマを使っていて、アドセンスをレスポンシブで記事内に入れたい方に、読んでほしいブログです。
今まで記事内にアドセンスを貼っていたのですが、左右に余白ができていました。
そんななか、他のブロガーさんのブログを見ていると、左右いっぱいにアドセンスが表示されるレスポンシブが増えていました。
きっとレスポンシブのほうが広告が大きく表示されるので、収益性も高いんだろうな〜と思い、ついに私も導入してみました！
そこで今回は、アドセンスをレスポンシブで記事内に入れる方法を紹介したいと思います。
私のブログはAffinger4のテーマを使っているので、Affinger系のテーマであれば参考になると思います。
スポンサーリンク
レスポンシブの広告ユニットをつくる
まず最初に、アドセンスの管理画面で、レスポンシブの広告ユニットをつくります。
アドセンスの管理画面のメニューにある「広告ユニット」をクリックします。
「新しい広告ユニット」をクリックします。
テキスト広告とディスプレイ広告の「選択」をクリックします。
広告サイズに「レスポンシブ」が表示されているのを確認します。
広告ユニットの「名前」を適当につけて、あとは何もいじらずに「保存してコードを取得」をクリックします。
広告コードが表示されるので、コピーしておきます。
この状態で、最初の広告ユニットの画面に戻ると、レスポンシブの広告ユニットができあがっています。
作りたてはステータスが「新規」となっており、しばらく広告が表示されませんが、しばらくすると「アクティブ」になり、広告が表示できる状態になります。
Affingerのウィジェットにコードを貼り付ける
次に、Affingerのウィジェットに先ほどのコードを貼り付けていきます。
WordPressの画面にある「外観」「ウィジェット」の順番にクリックします。
ウィジェット一覧にある「テキスト」「広告・Googleアドセンスのスマホ用300px」「ウィジェットを追加」の順にクリックします。
ウィジェットの「タイトル」を適当に入れて、「内容」に先ほど取得したアドセンスのコードを貼り付けます。
「保存」をクリックします。
これで、Affingerのウィジェットにコードの貼り付けが完了しました。
アドセンスが綺麗に表示されるように調整する
Affingerの場合、このままアドセンスを記事内に表示させると、広告の右側が切れてしまいます。
そこで、アドセンスが綺麗に表示されるように調整していきます。
WordPressの画面にある「外観」「カスタマイズ」の順番にクリックします。
「追加CSS」をクリックします。
以下のコードを追加し、「公開」をクリックします。
.adsbygoogle {
overflow:visible;
}
これで、アドセンスが綺麗に表示されるように調整できました。
記事内にアドセンスを貼る
最後に、記事内にアドセンスを貼り付けていきます。
Affingerの場合、投稿の画面で「アドセンス」というボタンをクリックすると、[]に囲まれたadsenseというコードが挿入されます。
あとは記事を公開すれば、記事内にアドセンスがレスポンシブで表示されます。
以上、Affinger系のテーマで、アドセンスをレスポンシブで記事内に入れる方法でした。
気になるレスポンシブの効果ですが、導入前に比べてクリック率が1.2〜1.5倍くらいになりました！
まだ導入していないようであれば、ぜひ検討してみてください！