【Cocoon】記事一覧にアドセンスのインフィード広告を導入。記事数の調整も!

Cocoon

メインブログで導入しているインフィード広告をこちらのブログでも導入してみることにしました。

インフィード広告とは?
トップページの記事一覧に挿入する広告のことです。
記事一覧に溶け込むように広告が入れられます。

▼こんなやつですね▼

なぜ今までこちらのブログではやってなかったかというと、メインブログで使っている有料テーマsangoでインフィード広告を設定したとき、めっちゃ面倒くさかったからです。

phpを触らんといけんかったり、表示できんくて頭沸騰しそうになったりとちょっとやっかいやったんですよね。

わたし
わたし
大変だった…

cocoon使ってるウェブサイトを徘徊していると、cocoonやったらアドセンス広告を表示させるのめっちゃ簡単やない!?ということに気づいたので早速やってみることにしました。

スポンサーリンク

インフィード広告を作成する

まずはグーグルアドセンスにログインして、広告ユニット→インフィード広告を作成します。

サイトのURLを入れると、そのURLのトップページを読み込み、適切なサイズや形式のインフィード広告を自動的に作成してくれます。

もっと細かく字体とかサイズとかも指定できますが面倒なので自動作成されたものをそのまま使っています。

モバイル版とpc版で記事一覧のデザインが違う場合や、それぞれ分けて収益率を比べたい場合は広告ユニットを別々に作成した方が良いかもしれません。
わたし
わたし
私は1つしか作っておりません!

インフィード広告のユニットが完成したら、コードをコピーします。

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

次に、ワードプレス にログインして、メニューバーの「ウィジェット」を選択します。

「利用できるウィジェット」一覧から、広告のウィジェットを探します。

pcもモバイルも同じ広告を表示させるときは「広告」のウィジェットにコードを貼ります。

pcとモバイルそれぞれに合わせた広告ユニットを2つ作った場合は、先程アドセンスで作成したユニットのコードをpcのコードなら→「pc用」
モバイルのコードなら→「モバイル用」
のウィジェットにそれぞれ分けて貼り付けるようになります。

ウィジェットを選択すると、挿入したい場所が表示されるので、「インデックスリストミドル」を選択してウィジェットを追加してください。

これでインフィード広告が挿入されました。

新しく広告ユニットを作成した場合は表示されるまで時間がかかるので、少し時間をあけてから確認すると良いです。

わたし
わたし

このような感じで表示されるよ〜〜!

記事一覧の数を調整しよう

トップページの記事は10件分が表示されることになっている方が多いと思います。

そこに広告を1つ追加すると、カードがずれ込んで記事1つ分余白ができてしまいます。

記事一覧を横長のカードにしている場合は1つ増えたところで特に違いはないと思いますが、私のように記事一覧をカードタイプや縦長に配列している場合はどうしても余白ができるんですよね。

これを解消するために、表示させる記事数を変更します。

ワードプレス の表示設定を変更

ワードプレス のメニューバーの設定→表示設定に進みます。

1ページに表示する最大投稿数を「10」から「9」に変更します。

これで記事一覧が揃いました。

cocoonは広告設定が簡単!

cocoonは私が今使っている有料テーマに比べても、広告の設定が簡単です!

デザインさえ気にいるものにできれば、すごく使いやすいテーマやなって心底思っています。

インフィード広告は生地一覧によく馴染んで視覚的にもうるさくないので、まだ設定されてない方は試してみてくださいね〜〜!

わたし
わたし

おつかれさまでした〜〜!