みらしん

読者の未来に、少しでも役立つネタを配信するブログ。

Affinger アドセンスをレスポンシブで記事内に入れる方法

更新日:


レスポンシブを入れる方法のブログ_導入画像

Affinger系のテーマを使っていて、アドセンスをレスポンシブで記事内に入れたい方に、読んでほしいブログです。

今まで記事内にアドセンスを貼っていたのですが、左右に余白ができていました。

レスポンシブを入れる方法のブログ_画像1

そんななか、他のブロガーさんのブログを見ていると、左右いっぱいにアドセンスが表示されるレスポンシブが増えていました。

レスポンシブを入れる方法のブログ_画像2

きっとレスポンシブのほうが広告が大きく表示されるので、収益性も高いんだろうな〜と思い、ついに私も導入してみました!

そこで今回は、アドセンスをレスポンシブで記事内に入れる方法を紹介したいと思います。

私のブログはAffinger4のテーマを使っているので、Affinger系のテーマであれば参考になると思います。

スポンサーリンク

PC300×250




レスポンシブの広告ユニットをつくる

まず最初に、アドセンスの管理画面で、レスポンシブの広告ユニットをつくります。

アドセンスの管理画面のメニューにある「広告ユニット」をクリックします。

レスポンシブを入れる方法のブログ_画像3

「新しい広告ユニット」をクリックします。

レスポンシブを入れる方法のブログ_画像4

テキスト広告とディスプレイ広告の「選択」をクリックします。

レスポンシブを入れる方法のブログ_画像5

広告サイズに「レスポンシブ」が表示されているのを確認します。

レスポンシブを入れる方法のブログ_画像6

広告ユニットの「名前」を適当につけて、あとは何もいじらずに「保存してコードを取得」をクリックします。

レスポンシブを入れる方法のブログ_画像7

レスポンシブを入れる方法のブログ_画像8_1

広告コードが表示されるので、コピーしておきます。

レスポンシブを入れる方法のブログ_画像9

この状態で、最初の広告ユニットの画面に戻ると、レスポンシブの広告ユニットができあがっています。

レスポンシブを入れる方法のブログ_画像10

作りたてはステータスが「新規」となっており、しばらく広告が表示されませんが、しばらくすると「アクティブ」になり、広告が表示できる状態になります。

レスポンシブを入れる方法のブログ_画像10_5

Affingerのウィジェットにコードを貼り付ける

次に、Affingerのウィジェットに先ほどのコードを貼り付けていきます。

WordPressの画面にある「外観」「ウィジェット」の順番にクリックします。

レスポンシブを入れる方法のブログ_画像11

ウィジェット一覧にある「テキスト」「広告・Googleアドセンスのスマホ用300px」「ウィジェットを追加」の順にクリックします。

レスポンシブを入れる方法のブログ_画像12

ウィジェットの「タイトル」を適当に入れて、「内容」に先ほど取得したアドセンスのコードを貼り付けます。

レスポンシブを入れる方法のブログ_画像13

「保存」をクリックします。

レスポンシブを入れる方法のブログ_画像14

これで、Affingerのウィジェットにコードの貼り付けが完了しました。

アドセンスが綺麗に表示されるように調整する

Affingerの場合、このままアドセンスを記事内に表示させると、広告の右側が切れてしまいます。

レスポンシブを入れる方法のブログ_画像15

そこで、アドセンスが綺麗に表示されるように調整していきます。

WordPressの画面にある「外観」「カスタマイズ」の順番にクリックします。

レスポンシブを入れる方法のブログ_画像16

「追加CSS」をクリックします。

レスポンシブを入れる方法のブログ_画像17

以下のコードを追加し、「公開」をクリックします。

レスポンシブを入れる方法のブログ_画像18

これで、アドセンスが綺麗に表示されるように調整できました。

記事内にアドセンスを貼る

最後に、記事内にアドセンスを貼り付けていきます。

Affingerの場合、投稿の画面で「アドセンス」というボタンをクリックすると、[]に囲まれたadsenseというコードが挿入されます。

レスポンシブを入れる方法のブログ_画像19

あとは記事を公開すれば、記事内にアドセンスがレスポンシブで表示されます。

レスポンシブを入れる方法のブログ_画像2

以上、Affinger系のテーマで、アドセンスをレスポンシブで記事内に入れる方法でした。

気になるレスポンシブの効果ですが、導入前に比べてクリック率が1.2〜1.5倍くらいになりました!

まだ導入していないようであれば、ぜひ検討してみてください!

お付き合い頂き、ありがとうございました!
何かあれば、ツイッターメールまで。

PC300×250




PC300×250




-ブログ運営

Copyright© みらしん , 2019 All Rights Reserved.