【アドセンス】「関連コンテンツユニット」のレイアウトをモバイルとPCで変える方法【サンプル多数】

5 min 2 views
adsense関連コンテンツユニットカスタマイズ
イズミケイタ

イズミケイタ

漫画描いてます。日常をコマ割りに。
描き殴れ手直しはその後だ。いろんな種類の漫画をアップしていくぞ。
Beauty is in the eye of the beholder.

FOLLOW

[say img=”https://kitsunepublishing.com/wp-content/uploads/2017/12/prof.jpg” name=”ワタシ”]うおおお、アドセンス関連コンテンツユニットが解放された!

でも、なんか見え方がイマイチだな。って思ってたら公認カスタマイズがあった。何個も試したから読んでみてください。[/say]

ちなみに通常の関連コンテンツユニットの表示はこちら

モバイルは一番上の広告が横いっぱい、2番目と4番目に広告、さらに一番下に3行のリンクユニットが一緒になっている。

PC表示では2×4の枠線なしで、その中の3つが広告。

モバイルでの表示は凄い好きなんだけど、PCの2×4の見え方が好きじゃない。カスタマイズ出来ないか調べていたらなんと、公式に認められているカスタマイズがあった。基本的にアドセンスのコード改変は重大なポリシー違反なんですが、この行と列・レイアウトのカスタマイズは認められています。

レスポンシブ対応の関連コンテンツ ユニットをカスタマイズする方法

レイアウトの変え方

通常の関連コンテンツユニットのコードにたった3行追加するだけです。
[codebox title=”コード”]

<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-matched-content-rows-num="3"
     data-matched-content-columns-num="2"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

[/codebox]

黄色、赤色、緑色のマーカーを引いた3行を追加でOKです。
どうなったかサンプルを見てみましょう。

アドセンス 関連コンテンツ 表示

data-matched-content-rows-numの数字が”行”

data-matched-content-columns-numの数字が”列”

data-matched-content-ui-typeが”レイアウトの種類”となるわけです。

この場合は“行”が3、“列”が2で“レイアウトの種類”がimage_stackedですね。自分で数字やレイアウトを選んでカスタマイズ出来る。

モバイルとPCで違うレイアウトにする方法

続いてモバイルとPCでレイアウトを変えてみましょう。先ほどのコードを少しいじるだけなので簡単です。

[codebox title=”コード”]

<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-matched-content-rows-num="4,3"
     data-matched-content-columns-num="1,2"
     data-matched-content-ui-type="image_sidebyside,image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

[/codebox]

では、実際の表示を見てみます。

アドセンス 関連コンテンツ モバイル PC 別表示

例えばdata-matched-content-rows-num=”4,3″なら,で区切った前のパラメーターがモバイルになります。

行も列もレイアウトも同様です。

最初のサンプルのようにカンマで区切らず一つの値だけ入力すると、モバイル・PCともに共通の設定となります。

[alert title=”注意”]モバイル、PCともに表示できる行や列の上限が決められている。表示不可能な数字を入力するとユニット自体が表示されなくなるか自動で適切な表示に調整される。

表示されなくなった場合は数字を表示可能な数まで戻せばまた表示される。[/alert]

レイアウトによってもまた表示可能な数が変わる。例えばモバイルの場合はcard_stackedでは2列までという風に。3列で指定しても2列で表示される。

[say img=”https://kitsunepublishing.com/wp-content/uploads/2017/12/prof.jpg” name=””]次にレイアウトの種類を見ていきます。[/say]

レイアウトは3種類x2パターンの6個

レイアウトの種類は3種類で、さらに通常タイプとカードタイプ(枠線表示か立体表現)の2パターンあるんです。つまり6種類。

見た方が早いので画像貼っておきます。PCの記事下で表示された時のサンプルです。

テキストのみ/カード内

テキスト大好きマンや、こだわりミニマリストさんにはオススメ。普通のブログでも背景が白ならいいかもしれない。

関連コンテンツユニット 表示例 テキスト

[codebox title=”テキストのみ”]

data-matched-content-ui-type="text"

[/codebox]

[codebox title=”カード内にテキストを表示”]

data-matched-content-ui-type="text_card"

[/codebox]

[tensen]

画像とテキストを横に並べて表示/カード内

横に並べた表示です。PCならいいですけどモバイルで1列しか表示されない。

関連コンテンツユニット 表示例 横画像

[codebox title=”画像とテキストを横に並べて表示”]

data-matched-content-ui-type="image_sidebyside"

[/codebox]

[codebox title=”画像とテキストを横に並べてカード内に表示”]

data-matched-content-ui-type="image_card_sidebyside"

[/codebox]

[tensen]

テキストの上に画像を配置/カード内

マテリアルデザインに馴染んだデザイン。SANGOユーザーには特におすすめ。

詳しくはこちらのブログで>>>関連コンテンツをカスタマイズしてブログを収益化しよう

関連コンテンツユニット 表示例 画像上

[codebox title=”テキストの上に画像を配置”]

data-matched-content-ui-type="image_stacked"

[/codebox]

[codebox title=”テキストの上に画像を配置してカード内に表示”]

data-matched-content-ui-type="image_card_stacked"

[/codebox]

[say img=”https://kitsunepublishing.com/wp-content/uploads/2017/12/prof.jpg” name=””]自分でいろいろ試してみよう。

困ったら公式サイトを読むことをおすすめする。情報は常に新しくなるからチェックしときましょう。[/say]

[sanko href=”https://support.google.com/adsense/answer/7533385?hl=ja&ref_topic=6111161″ title=”レスポンシブ対応の関連コンテンツ ユニットをカスタマイズする方法” site=”AdSenseヘルプ”]

サムネイルと記事の内容があってない時は?

試しまくってたらアドセンス関連コンテンツユニットのサムネイルと違う記事の内容が表示されるようになってしまった。
全部の関連記事が違うわけでなく、2,30記事に1つくらいの確率です。

「関連コンテンツユニット」をカスタマイズして頻繁にいじっている時に発見した。その直前にカテゴリー変更したり、ドメインの統合したりしてたからそれも原因だと思われる。

正確な理由は不明だが、おそらくOGP関連なので素人の私には手が出ません。放っておいたところ3日ほどで正常に表示されるようになっていた。

サムネイル画像自体が表示されない時もある。それもしばらく待ってみよう。

結論:時間がたてば大丈夫

[say img=”https://kitsunepublishing.com/wp-content/uploads/2017/12/prof.jpg” name=””]ちなみにウィジェットを頻繁にいじってると自動広告のインフィード広告もしばらく表示されなくなるぞ。外したり表示させたりしてるからだね。Googleがブログを解析して自動で広告出してるから、その処理がリセットされちゃうんだろう(予想)[/say]

アドセンス関連コンテンツのカスタマイズまとめ

[list class=”li-niku li-mainbdr main-c-before”]

  • レイアウトを変えて自分のブログに合わせよう
  • コードを3行追加するだけ
  • 行と列のカスタマイズは数字を選ぶだけ
  • レイアウトのカスタマイズは種類を選ぶだけ
  • モバイルとPCでレイアウト変えられる

[/list]

[say img=”https://kitsunepublishing.com/wp-content/uploads/2017/12/prof.jpg” name=”私…”]1つのコードで、通常の関連コンテンツのモバイル表示とカスタマイズしたPC表示を設定したかったが出来なかった。

なので、モバイルとPCでウィジェット別にして設置した…。今のところ私はそんな状態です。誰か教えて下さい![/say]

関連コンテンツユニット(サンプル)

ここからはおまけでレイアウト例をひたすらアップします。気になるのがあったら採用しましょう。自分のブログのデザインとの兼ね合いですからね。

PC表示のサンプル

adsense 関連コンテンツユニット 表示サンプル
PC表示なら横3列がみやすいかな。
adsense 関連コンテンツユニット 表示サンプル
硬派な人はコレ。かな?
adsense 関連コンテンツユニット 表示サンプル
PC表示ならsidebysideは横2列がいいですね
adsense 関連コンテンツユニット 表示サンプル
大量表示してみた。archiveにいいかもしれない。サムネに自信ある人なら使いこなせる。
adsense 関連コンテンツユニット 表示サンプル
5×5。クリックされる気がしない。

モバイル表示のサンプル

adsense 関連コンテンツユニット モバイル表示サンプル
テキスト一列、潔し。
adsense 関連コンテンツユニット モバイル表示サンプル
sidebyside。このタイプなら標準表示を採用しますよね。
adsense 関連コンテンツユニット モバイル表示サンプル
モバイルで3列はナシかな。

[say img=”https://kitsunepublishing.com/wp-content/uploads/2017/12/prof.jpg” name=””]果てしなく疲れた。そしてカスタマイズ戻して普通の標準のユニット使いそうな自分がいる…。[/say]

イズミケイタ

イズミケイタ

漫画描いてます。日常をコマ割りに。
描き殴れ手直しはその後だ。いろんな種類の漫画をアップしていくぞ。
Beauty is in the eye of the beholder.

FOLLOW

カテゴリー:
関連記事