関連コンテンツユニットのレイアウトをカスタマイズする方法
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」にしたいときは
data-matched-content-columns-num="1, 3"
と設定します。
モバイルが４行１列、パソコンが２行２列でのレスポンシブにする場合は以下で設定します。
その他おすすめ記事：
