For the complete documentation index, see llms.txt. This page is also available as Markdown.

ネイティブ広告の設定

作成する ネイティブ広告 ゾーンの作成は簡単で、しかも非常に柔軟にカスタマイズできます。ニーズに応じて、ネイティブ広告ゾーンの設定には少し異なる手順を使うことができます:

  • シナリオ A:アドゾーンを設定し、ネイティブ広告ゾーンの画像のアスペクト比を選んでから、サイト上のアドゾーンのサイズを合わせたいだけです。

  • シナリオ B:カスタムの画像サイズまたは比率に合わせてアドゾーンを設定し、サイトと同じ見た目でぴったり収まるようにしたいです。

  • シナリオ C:サイト上に特定サイズのゾーンがあり、それに合って見栄えの良いアドゾーンを作成したいです。

どのシナリオを選んでも、最初に行うべきことはネイティブ広告ゾーンを作成することです。

ネイティブ広告ゾーンの作成

パブリッシャーとしてログインしたら、 Sites & Zones, 新しいゾーンをクリックし、 Native セクションを展開して、Native Ad 形式を選択し Recommendation Widget をクリックします 次へ.

ゾーンを作成 ネイティブ

ゾーンの詳細を入力して、 次へ.

このシナリオでは、管理画面で画像のアスペクト比を設定し、合計のアドゾーンサイズを設定する必要はありません。 クイックレイアウトを使用すると、作成したアドゾーンは、配置したコンテナのサイズに自動的に適応します。

1

手順 1

ネイティブ手順 1

を選択します。 クイックレイアウト タブを開き、 デスクトップレイアウト セクションで、デスクトップに表示したい広告の列数と行数を設定します。

2

手順 2

ネイティブ手順 2

次に、 画像設定 ドロップダウンから画像のアスペクト比を選択します。選択できるのは 1:1, 4:3 または 16:9、サイト上のサムネイルに合わせるためです。

3

手順 3

ネイティブ手順 3
  • アスペクト比を選んだら、チェックボックスを使ってテキストを表示するかどうかを選び、表示位置を決めます。

  • このテキストは タイトル説明で構成されています。必要であれば、 タイトル説明 セクションでそれぞれ個別にオン/オフできます。

  • 右側のプレビューを確認してアドゾーンの見た目を見て、必要なら設定を再調整してください。

4

手順 4

ネイティブ手順 4
  • 上記の手順 1~3 を モバイルレイアウト セクションで繰り返し、モバイル用にアドゾーンを設定します。

5

手順 5

ネイティブ手順 5
  • 画面右側で デスクトップモバイル の両方のプレビューを確認します。デスクトップ表示とモバイル表示の切り替わるブレークポイントは、 モバイル ブレークポイント のドロップダウンで 詳細オプション.

  • で設定できます。ブレークポイントは 800px をiPad向け、 450px をモバイル向け、そして 非レスポンシブに設定できます。ブレークポイントを変更すると、デスクトップレイアウトの設定がデスクトップとiPadの両方に適用されるか、デスクトップのみに適用されるかが変わります。

  • プレビューに満足したら、 作成.

6

手順 6

ネイティブ手順 6
  • をコピーし、 ゾーンHTMLタグ をサイトに追加します。

  • アドゾーンは、タグを挿入したコンテナの100%の幅に自動的に調整されます。つまり、コンテナが大きいほど、ゾーンと広告の両方も大きくなります。

このシナリオでは、画像サイズと広告の間隔をサイトに合わせて変更できるようにしたいはずです。ネイティブ広告を、まるでサイトの編集コンテンツの一部のように見せたい場合にこれを行います。

1

手順 1

ネイティブ手順 7
  • を選択します。 クイックレイアウト タブを開き、 デスクトップレイアウト セクションで、デスクトップに表示したい広告の列数と行数を設定します。

2

手順 2

ネイティブ手順 8
  • で、 画像設定 ドロップダウンから カスタムサイズ を選択し、サイトに合わせて画像の幅と高さを設定します。サイトに meta タグが含まれていてレスポンシブである場合、サイトを表示すると画面サイズが小さくなるにつれて画像もそれに応じて変化します。 ウィジェットサイズ画像サイズ の情報は、プレビューの上の右上隅に表示されます。

3

手順 3

ネイティブ手順 9
  • 画像サイズを設定したら、 テキスト チェックボックスを使ってテキストを表示するかどうかを選び、表示位置を決めます。

  • 右側のプレビューを確認してアドゾーンの見た目を見て、必要なら設定を再調整してください。

4

手順 4

ネイティブ手順 10
  • の手順 1~3 を繰り返し、 モバイルレイアウト セクションで繰り返し、モバイル用にアドゾーンを設定します。

5

手順 5

ネイティブ手順 11
  • で、 詳細オプション セクションで、 縦方向の間隔横方向の間隔 を各広告の周囲に何ピクセル入れるか設定できます。

:これらの設定を変更すると、アドゾーン全体のサイズが変わります。

6

手順 6

ネイティブ手順 12
  • 画面右側で デスクトップモバイル の両方のプレビューを確認します。デスクトップ表示とモバイル表示の切り替わるブレークポイントは、 モバイル ブレークポイント のドロップダウンで 詳細オプション.

  • で設定できます。ブレークポイントは 800px をiPad向け、 450px をモバイル向け、そして 非レスポンシブに設定できます。ブレークポイントを変更すると、デスクトップレイアウトの設定がデスクトップとiPadの両方に適用されるか、デスクトップのみに適用されるかが変わります。

  • プレビューに満足したら、 作成.

7

手順 7

ネイティブ手順 13
  • をコピーし、 ゾーンHTMLタグ をサイトに追加します。

  • サイト上のアドゾーンサイズが、先ほど作成したゾーンのサイズと一致していることを確認してください。

このシナリオでは、サイトの要件に合わせてアドゾーンのサイズを設定し、広告が適切に表示されるように設定を微調整したいはずです。

1

手順 1

ネイティブ手順 13

を選択します。 カスタムレイアウト タブを開き、 デスクトップレイアウト セクションで、作成したい合計のアドゾーンの 高さ を設定します。

2

手順 2

ネイティブ手順 14

次に、アドゾーンに表示したい広告の 列数行数 を選択します。選んだサイズに対してどの設定が合うか、右側のプレビューで確認してください。

3

手順 3

ネイティブ手順 15

希望する列数と行数を選んだら、 テキスト チェックボックスを使ってテキストを表示するかどうかを選び、 テキスト位置 のドロップダウンで表示位置を選択します。

4

手順 4

ネイティブ手順 15

の手順 1~3 を繰り返し、 モバイルレイアウト セクションで繰り返し、モバイル用にアドゾーンを設定します。

5

手順 5

ネイティブ手順 16
  • 画面右側で デスクトップモバイル の両方のプレビューを確認します。デスクトップ表示とモバイル表示の切り替わるブレークポイントは、 モバイル ブレークポイント のドロップダウンで 詳細オプション.

  • で設定できます。ブレークポイントは 800px をiPad向け、 450px をモバイル向け、そして 非レスポンシブに設定できます。ブレークポイントを変更すると、デスクトップレイアウトの設定がデスクトップとiPadの両方に適用されるか、デスクトップのみに適用されるかが変わります。

  • プレビューに満足したら、 作成.

6

手順 6

ネイティブ手順 17

をコピーし、 ゾーンHTMLタグ をサイトに追加します。

モバイル ブレークポイントで非レスポンシブを選択する

  • 詳細オプションでモバイル ブレークポイントを非レスポンシブに設定すると、以下のモーダルが画面に表示されます。

非レスポンシブ2
非レスポンシブ3
  • モーダルで 続行 をクリックすると、モバイルやタブレットを含むすべてのデバイスで広告にデスクトップレイアウトが配信されます。

  • 非レスポンシブが選択されると、モバイルレイアウトはユーザーによる編集ができなくなります。

  • 以前に保存されていない場合、画像設定はデフォルトのカスタムサイズ(幅 200px、高さ 200px)に更新されます。

ネイティブ広告でカスタムCSSを使用する

バナー

で、 カスタムCSS セクションでカスタムCSSを追加すると、アドゾーンがサイト上で正しく表示されるようにできます。主要なCSSクラスが出発点として用意されています。CSSについて詳しく見る こちら.

:カスタムCSSの変更はプレビューには表示されず、サイト上でのみ表示されますのでご注意ください。

ネイティブ広告用のCSSクラス

最初から5つのCSSクラスが用意されており、必要に応じて追加のスタイルを貼り付けることもできます。これら5つのCSSクラスは、次のようにネイティブ広告の重要な要素をスタイル設定します:

ネイティブ広告のCSS
クラス
アクション

.exo-native-widget-outer-container

ウィジェット全体のコンテナをスタイル設定します。

.exo-native-widget-item

各アイテムのコンテナをスタイル設定します。

.exo-native-widget-item-image

画像をスタイル設定します。

.exo-native-widget-item-title

タイトルテキストをスタイル設定します。

.exo-native-widget-item-text

説明テキストをスタイル設定します

追加のCSSクラス

これらの追加CSSクラスを使って、ネイティブ広告のスタイルを設定することもできます:

クラス
アクション

.exo-native-widget

ウィジェット全体を包みます。

.exo-native-widget-header

ヘッダー要素を包みます。

.exo-native-widget-outer-container

すべての広告を包みます。

.exo-native-widget-item-container

アドボックスを包みます。

.exo-native-widget-item-image-wrapper

アドボックス内の画像を包みます。

.exo-native-widget-item-image-ratio

広告画像のアスペクト比を設定します。

.exo-native-widget-item-content

アドボックス内のすべてのテキストを包みます。

.exo-native-widget-item-content-box

広告ラッパーのタイトル、説明、ブランドを包みます。

.exo-native-widget-item-brand

広告ブランドをスタイル設定します。

  • 以下の例では、パブリッシャーがニーズに応じてネイティブ広告ゾーンの設定でCSSスタイルをどのように調整できるかを示します。

1

1. テキストボックスを画像の上に配置する。

ネイティブ広告のCSS例
2

2. テキストボックスのサイズを変更する。

ネイティブ広告のCSS例
3

3. テキストボックスを画像の上に配置し、テキストボックスに不透明度付きの背景を追加する。

ネイティブ広告のCSS例
4

4. 画像の角を丸くする。

ネイティブ広告のCSS例
5

5. フォントのスタイルを設定する。これにより、パブリッシャーは、ゾーン設定で利用できるフォント以外に、自身のウェブサイトで利用可能なフォントを使用できます。

ネイティブ広告のCSS例
6

6. 画像とテキストの間に余白を追加して、テキストを画像に近くも遠くも配置できるようにする。padding-bottom を使ってテキストの下に余白を追加することもできます。

ネイティブ広告のCSS例
7

7. テキストボックスの背景色をカスタマイズして、各画像の下にあるテキストボックスのみに適用し、画像とボックスの間のスペースを透明のまま、または別の背景色にします。

ネイティブ広告のCSS例
8

8. 画像とそのテキストボックスを覆う境界線を追加する。これにより、そのネイティブウィジェット内の各画像を区切りやすくなります。

ネイティブ広告のCSS例

最終更新

役に立ちましたか?