
先日ようやくAdSense(アドセンス)の関連コンテンツユニットが収益化されて広告が表示されるようになりました。
広告が表示されない関連コンテンツユニットが解放されてから収益化できるようになるまで約2か月半かかりました。
以前は雲の上の存在に思えた関連コンテンツユニットが解放される条件も緩くなっていますが、嬉しいことに変わりはありません。
けれど最近スマホ表示で関連コンテンツユニットの表示が崩れ、下の方の関連記事はサムネイル画像が表示されないだけでなく、途中で途切れてしまっています。
※いつのまにか表示は正常になり、現在はリンク広告のようなものが表示されています。
そこでレスポンシブ対応の関連コンテンツユニットをカスタマイズして表示形式を整えることに挑戦してみることにしました。
レスポンシブ対応の関連コンテンツユニットをカスタマイズ
関連コンテンツユニットを収益化できるようになった日に、関連コンテンツユニットのカスタマイズに関する新着情報がアドセンスの管理画面に表示されました。
レイアウト パラメータに値を 1 つだけ指定した場合、モバイルでも PC でも、同じレイアウトで関連コンテンツ ユニットが表示されます。一方、レイアウト パラメータに値を 2 つ指定すると、最初の値はモバイル、2 番目の値は PC に適用され、それぞれ異なるレイアウトで関連コンテンツ ユニットが表示されます。
引用元:AdSenseヘルプ レスポンシブ対応の関連コンテンツ ユニットをカスタマイズする方法
リンクされているヘルプ記事を読んでみると、レスポンシブ対応の関連コンテンツユニットは許可された範囲内でカスタマイズができるそうです。
そして「レイアウトを変更」したり、「列や行」を変えたえり、「モバイルとPCでの表示を切り替える」こともできるようです。
関連コンテンツのカスタマイズ方法
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="1234567890"
パラメータを追加
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
アドセンスのヘルプ記事を熟読すると、関連コンテンツユニットの基本のコードにパラメータを追加すればレイアウトを変更したり、列や行を自由に設定できるようです。
よく見ると「data-ad-format=”autorelaxed」の記入位置だけ変わっています。
元々の位置でパラメータを追加しても上手く反映されなかったので、例示通りに1番最後にこのコードを持ってくる必要があるようです。
関連コンテンツユニットをカスタマイズするには、このコードが基本の形になります。
列と行を変更する
data-matched-content-rows-num="任意の数字"
このコードで関連コンテンツの行を、
data-matched-content-columns-num="任意の数字"
このコードで関連コンテンツの列を指定するそうです。
そして関連コンテンツのスタイルも指定しないと表示されないようです。
試しにデフォルトのスタイルのコードを指定して4行3列のレイアウトにカスタマイズしてみます。
data-matched-content-rows-num="3"
data-matched-content-columns-num="4"
data-matched-content-ui-type="image_stacked"
基本のコードにこのパラメータを追加してみました。
すると関連コンテンツユニットが3列4行で表示されるようになりました。
ただ、この方法だとPCとスマホで同じレイアウトで表示されるらしく、スマホ表示でも3列になってしまいます。
PCとモバイルの表示形式をそれぞれ指定する
data-matched-content-rows-num="3,3"
data-matched-content-columns-num="1,4"
data-matched-content-ui-type="image_stacked"
数字を「,」で区切ると、前の数字がモバイルで後ろの数字がPCの表示になるようです。
この例だとモバイルでは3×1、PCでは3×4の表示になります。
ただ、数字を変えて何度も挑戦しましたが、上手くいきませんでした(笑)
原因はわかりませんが、テーマと関連があるのかもしれません。
別の方法でスマホとPCの表示を切り替える
<!-- 関連コンテンツ -->
<?php if (wp_is_mobile()) :?>
スマホ用のコード
<?php else: ?>
PC用のコード
<?php endif; ?>
<!-- 関連コンテンツ終了 -->
テーマのアドセンスのコードを記述しているなら、条件分岐タグでスマホとPCの表示を切り替えることになります。
ただ、関連コンテンツを表示できるようになったブログはSimplicityを使っています。
Simplicityの場合はテーマを編集しなくても、記事下にウィジェットで簡単にスマホ表示とPC表示を切り替えることができます。
Simplicityの場合はPC用とモバイル用のテキストウィジェットが用意されています。
PCに表示させたいコードをPC用テキストに、モバイルで表示させたいコードはモバイル用のテキストにコードをペーストすればPCとモバイルの表示を切り替えられます。
関連コンテンツのスマホ表示の列数
先ほど3列で表示させましたがスマホで3列の表示だとさすがに見にくいです。
そこで2列表示にしてみましたが、スマホは画面幅が小さいためか記事タイトルが22文字しか表示されません。
記事タイトルが22文字では「何の記事なのか記事タイトルを見てもわからない」と思うので、1列表示にしてみました。
1列表示にすると、全て大きい画像になってしまいます。
この画像の大きさだと5行までしか表示されず、値で6行以上指定すると何も表示されなくなってしまいます。
Simplicityにウィジェットで実装する方法で1列に指定すると、関連記事は5つまでしか表示させれないようです。
スマホ表示を整えるため関連コンテンツユニットをカスタマイズすることにしましたが、当分スマホ表示はデフォルトのままにしようと思います。
スマホ表示をデフォルトにした理由
関連コンテンツユニットの下の方が途切れてしまうのは自分だけだと思っていましたが、Simplicityを使用している他の人のブログを見ても関連コンテンツユニットが途中で途切れています。
そのため、SimplicityのSNSボタン下のウィジェットの幅の大きさの問題なのかと思っていました。
けれどもっといろんな人のサイトを見てみると、関連コンテンツユニットをデフォルトで使用しているサイトは全て途中で途切れているような気がします。
この記事を書いている段階では、どうやらアドセンスの関連コンテンツユニット自体の問題のようです。
さすがにGoogleがこのままの状態を放置するわけないと思うので、当分デフォルトで使用して様子を見ることにします。
けれどそれ以上に、スマホではなるべく関連コンテンツユニットをデフォルトで使いたい大きな理由があります。
デフォルトで使いたい1番の理由
関連コンテンツユニットはスマホでは試験的?に、新しい表示形態が採用されます。
少し前までは関連コンテンツユニットの下にリンクユニットのようなものが表示されていました。
当時関連コンテンツユニットの収益化が解放されていなかったので、関連コンテンツユニットの下にリンクユニットを貼り付けていると勘違いしていました。
現在はリンクユニットのようなものは表示されず、関連コンテンツユニットの1番上だけ大きなブログカードになっています。
このように関連コンテンツユニットのスマホ表示では試験的な試みがなされるので、なるべくデフォルトの方がいいような気がします。
ということで、スマホはデフォルトのままでPC表示だけスタイルを変えてみることのしました。
関連コンテンツユニットのスタイルのカスタマイズ
data-matched-content-rows-num="3"
data-matched-content-columns-num="3"
data-matched-content-ui-type="image_card_stacked"
「image_stacked」を「image_card_stacked」にすると、カード形式で表示されます。
ただ、3列にするとまた記事タイトルの文字数が少ないです。
記事幅を広げればいいのかもしれませんが、とりあえず2列表示にしてみました。
2列にするとサムネイル画像も大きくて見やすいだけでなく、記事タイトルも36文字表示されるようになりました。
しばらく5×2のカード形式で統計を見ようと思いますが、画像が大きすぎてスクロールしないと関連記事が全て表示されません。
ただ関連記事をスクロールしてまで見てくれるような凄い記事は書けないので、デフォルトの方がいいかもしれません(笑)。
他にも関連コンテンツユニットのスタイルは何種類かあり、AdSenseヘルプに詳しく書かれています。
AdSenseヘルプ「レスポンシブ対応の関連コンテンツ ユニットをカスタマイズする方法」
まとめ
関連コンテンツユニットをAMPページに表示させる場合は、AMPページ用にコードを修正する必要があります。
関連コンテンツユニットはカスタマイズ性が高く、自分の好みに表示形式を変更できるので面白いと思います。
面白さと比例して収益も上がれば言うことはないと思いますが、そんな簡単に上がったら誰も苦労しないと思います(笑)。
今日のたつじんへの一歩

サイトにマッチするようにカスタマイズできる広告が増えてきましたが、美術が2の自分には難しいです(笑)。
サイトデザインと同じで、カスタマイズの時間と記事を書く時間を考えて作業しないといけないと思います。
関連コンテンツの表示を修正したくて検索しており、こちらの記事を参考にさせていただきました!
「PCとモバイルの表示形式をそれぞれ指定する」の部分ですが、data-matched-content-ui-typeのパラメータについてについてもPCとモバイルそれぞれ指定するとうまく表示されましたよ。
data-matched-content-ui-type=”image_stacked”
⇒data-matched-content-ui-type=”image_stacked,image_stacked”
(参考)https://support.google.com/adsense/answer/7533385?hl=ja