【アドセンス】関連コンテンツの表示数や見た目をカスタマイズする方法！

みなさんは、アドセンスの「関連コンテンツ」を利用していますか？

 

一定の基準を超えたブログのみ利用できる関連コンテンツですが、コードに手を加えることで、表示数や見た目をカスタマイズできるので参考にしてみてください。

はじめに

 

今回紹介する内容は「アドセンスの関連コンテンツで見た目のカスタマイズをする方法」です。

関連コンテンツは、基準を突破したサイトにしか設置できないので注意してください。

 

関連コンテンツの見た目をカスタマイズすることで、以下のようなテキストの関連コンテンツにすることもできちゃいます。

 

 

他にも列や行の数もカスタマイズできるので、よりサイトデザインに合った関連コンテンツになると思います。

 

規約は大丈夫なの？

 

基本的に、改変NGなアドセンスですが、関連コンテンツの見た目に関しては「改変OK」なんです。

Googleヘルプにも表記されていました。

 

この記事で説明されている例は、AdSense 広告コードの許可されている変更方法です。これらの方法で関連コンテンツのコードを修正した場合は、AdSense プログラム ポリシー違反とみなされません。

アドセンスヘルプより引用

 

必須項目

 

今回紹介する方法は「レスポンシブ」の関連コンテンツでのみ利用できるカスタマイズです。

アドセンスの関連コンテンツユニットページで、カスタムを選択している場合、今回のカスタマイズは機能しないので注意してください。

 

 

では早速みていきましょう。

 

テキスト

 

まずは、先ほど画像で紹介した「テキスト」の関連コンテンツです。

関連コンテンツのアドセンスコードの中に、以下の記述を追加してください。

 

data-matched-content-ui-type="text"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"

 

実際に関連コンテンツを書き換えると以下のようになりました。

 

 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-matched-content-ui-type="text"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-XXXXXXXXXXXXX"
     data-ad-slot="00000000000"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

「data-matched-content-ui-type=」の部分が「text」になっていますよね。

関連コンテンツは、ここで指定した形式になるんです。

 

ここから紹介していくカスタマイズも、基本的にこの形になるので覚えておいてください。

「XXXX」や「000」になっている部分は、自分の関連コンテンツ広告コードに書き換えてくださいね。

 

カードタイプ

 

続いて「カードタイプ」の関連コンテンツです。

先ほど「text」と記述した部分を、今度は「text_card」に書き換えてください。

 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-matched-content-ui-type="text_card"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-XXXXXXXXXXXXX"
     data-ad-slot="00000000000"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

実際に表示させてみると、以下のようになりました。

 

 

はてなブログの「ブログカード」のような見た目になりましたね。

 

サムネイルの横にテキスト

 

次は「サムネイルの横にテキスト」を表示させてみましょう。

 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-matched-content-ui-type="image_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="2"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-XXXXXXXXXXXXX"
     data-ad-slot="00000000000"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

 

「image_sidebyside」を設定してください。

少しわかりづらいですが、サムネイルの右側にタイトルが表示されました。

 

サムネイルの横にテキスト（カード）

 

続いては、先ほどの「サムネイルの横にテキスト」のカード版です。

 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-matched-content-ui-type="image_card_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="2"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-XXXXXXXXXXXXX"
     data-ad-slot="00000000000"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

 

「image_card_sidebyside」を指定しました。

記事ごとにカードが作成され、サムネイルの右側にテキストが表示される関連コンテンツになったはずです。

 

サムネイルの下にテキストを表示

 

先ほどは右側に表示していたテキストを、今度は「サムネイルの下」に表示させてみましょう。

コードはこれまで通り「data-matched-content-ui-type」を編集します。

 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-matched-content-ui-type="image_stacked"
     data-matched-content-rows-num="2"
     data-matched-content-columns-num="4"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-XXXXXXXXXXXXX"
     data-ad-slot="00000000000"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

 

サムネイルの下にテキストを設置する関連コンテンツは「image_stacked」を指定します。

デフォルトの関連コンテンツと似ていますね。

 

サムネイルの下にテキスト（カード版）

 

最後はサムネイルの下にテキストを表示する（カード版）です。

コードはこれまでと同じように編集します。

 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-matched-content-ui-type="image_card_stacked"
     data-matched-content-rows-num="2"
     data-matched-content-columns-num="4"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-XXXXXXXXXXXXX"
     data-ad-slot="00000000000"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

もうわかりますね！

「image_card_stracked」を設定しましょう。

 

 

このようになりました。

 

行と列をカスタマイズ

 

実は、これまでのコードの中で、さりげなく表示する記事の数を変更していたのに気がつきましたか？

関連コンテンツに追加したコードの中で、まだ紹介していない部分が二行ありますよね。

 

data-matched-content-rows-num=""
data-matched-content-columns-num=""

 

の2つです。

 

 

つまり、「data-matched-content-rows-num」を「4」にすると、横並びに4つの記事が表示

「data-matched-content-columns-num」を「2」にすると、縦に2列の記事が表示

ということです。

 

サイトのデザインに合わせて表示する記事数を調整してみてください。

 

まとめ

 

今回紹介した方法を使えば、サイトのデザインや好みに合わせて関連コンテンツの見た目をカスタマイズできるようになりました。

関連コンテンツが許可されているサイトがあるなら、ぜひ試してみてください。

 

 

ではまた。