かとのぼのマイコード・マイライフ

プログラミング初心者とアプリの個人開発者向けのブログ。たまに銭湯

関連コンテンツユニットのレイアウトをカスタマイズする方法

この記事をシェアする

f:id:katonobo:20190828125859p:plain

Adsenseの関連コンテンツのレイアウトを設定する

グーグルのアドセンスのユニットである関連コンテンツですが、フォントや文字の色の変更以外にもレイアウトをカスタマイズできます。

詳しくはアドセンスヘルプをご覧ください。こちらでは簡単な説明をしています。

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

カスタマイズができるのは、3つの項目です。

  • 画像とテキストの配置
  • 広告の横列数
  • 広告のたて列数

画像とテキストの配置

画像とテキストの配置のカスタマイズには「data-matched-content-ui-type」で設定します。パターンは

  • テキストが写真の横にならぶ「image_sidebyside」
  • テキストの上に写真が乗る「image_stacked」
  • テキストだけは「text」
  • テキストが写真の横に並ぶ+カード内に設定が「image_card_sidebyside」
  • テキストの上に写真が乗る+カード内に設定が「image_card_stacked」

があります。

広告の横列の指定

広告の横列数は「data-matched-content-columns-num」で設定します。

横2つ並べるときは「data-matched-content-columns-num="2"」と設定します。

広告のたて列数

広告のたて列は「data-matched-content-rows-num」で設定します。

縦に3列並べるときは「data-matched-content-rows-num="3"」と設定します

で設定をします。

レイアウトのカスタマイズ例

例えば、たて3列、横1列で、カードタイプのテキストが写真の上に乗る設定はこちらです。

f:id:katonobo:20190828125021p:plain

 モバイルへのレスポンシブ対応

モバイルとパソコンでレイアウトを変えたい場合は、それぞれパソコンとモバイルの数値を入力します。最初がモバイル、次がパソコンです。

横の数をパソコン「3」、モバイル「1」にしたいときは

data-matched-content-columns-num="1, 3"

と設定します。

モバイルが4行1列、パソコンが2行2列でのレスポンシブにする場合は以下で設定します。

 

その他おすすめ記事:

www.katonobo.com

www.katonobo.com

www.katonobo.com

www.katonobo.com