> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/publishers/ja/saitotozn/neitibuno.md).

# ネイティブ広告の設定

作成する [ネイティブ広告](/publishers/ja/saitotozn/create-zone.md#recommendation-widget) ゾーンの作成は簡単で、しかも非常に柔軟にカスタマイズできます。ニーズに応じて、ネイティブ広告ゾーンの設定には少し異なる手順を使うことができます：

* **シナリオ A**：アドゾーンを設定し、ネイティブ広告ゾーンの画像のアスペクト比を選んでから、サイト上のアドゾーンのサイズを合わせたいだけです。
* **シナリオ B**：カスタムの画像サイズまたは比率に合わせてアドゾーンを設定し、サイトと同じ見た目でぴったり収まるようにしたいです。
* **シナリオ C**：サイト上に特定サイズのゾーンがあり、それに合って見栄えの良いアドゾーンを作成したいです。

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

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

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

![ゾーンを作成 ネイティブ](/files/1a35b9ca4a289d7b62b775b65ba4dce802b3ccfe)

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

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

{% stepper %}
{% step %}

### 手順 1

![ネイティブ手順 1](/files/12007c3b7439d462206fd71d3b8bcab11efb9d49)

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

{% step %}

### 手順 2

![ネイティブ手順 2](/files/46bfe2bc9d94b06469ce74525d9cd1ef549542af)

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

{% step %}

### 手順 3

![ネイティブ手順 3](/files/f633053bbec66b6ab432ec861a04da718dd49032)

* アスペクト比を選んだら、チェックボックスを使ってテキストを表示するかどうかを選び、表示位置を決めます。
* このテキストは **タイトル** と **説明**で構成されています。必要であれば、 **タイトル** と **説明** セクションでそれぞれ個別にオン/オフできます。
* 右側のプレビューを確認してアドゾーンの見た目を見て、必要なら設定を再調整してください。
  {% endstep %}

{% step %}

### 手順 4

![ネイティブ手順 4](/files/3d292f1ef3400cf4d96ca644b15c4fbd292d4073)

* 上記の手順 1～3 を **モバイルレイアウト** セクションで繰り返し、モバイル用にアドゾーンを設定します。
  {% endstep %}

{% step %}

### 手順 5

![ネイティブ手順 5](/files/da35c2969641fd095b4cb05344bb9ef4bfcefbe8)

* 画面右側で **デスクトップ** と **モバイル** の両方のプレビューを確認します。デスクトップ表示とモバイル表示の切り替わるブレークポイントは、 **モバイル ブレークポイント** のドロップダウンで **詳細オプション**.
* で設定できます。ブレークポイントは **800px** をiPad向け、 **450px** をモバイル向け、そして **非レスポンシブ**に設定できます。ブレークポイントを変更すると、デスクトップレイアウトの設定がデスクトップとiPadの両方に適用されるか、デスクトップのみに適用されるかが変わります。
* プレビューに満足したら、 **作成**.
  {% endstep %}

{% step %}

### 手順 6

![ネイティブ手順 6](/files/72dd8a3ac9cf55b9fcf6cd0c987136289403a72c)

* をコピーし、 **ゾーンHTMLタグ** をサイトに追加します。
* アドゾーンは、タグを挿入したコンテナの100%の幅に自動的に調整されます。つまり、コンテナが大きいほど、ゾーンと広告の両方も大きくなります。
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="シナリオ B: クイックレイアウト: カスタム画像サイズを設定" %}
このシナリオでは、画像サイズと広告の間隔をサイトに合わせて変更できるようにしたいはずです。ネイティブ広告を、まるでサイトの編集コンテンツの一部のように見せたい場合にこれを行います。

{% stepper %}
{% step %}

### 手順 1

![ネイティブ手順 7](/files/5c0afb71066b67b0518e81f5372980855bb5a2b7)

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

{% step %}

### 手順 2

![ネイティブ手順 8](/files/7e40720a5c6c1dd6d2129b08383a15e4d5527187)

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

{% step %}

### 手順 3

![ネイティブ手順 9](/files/a34ccd1cd58046c0def3c61e72bc4b0feacbd1da)

* 画像サイズを設定したら、 **テキスト** チェックボックスを使ってテキストを表示するかどうかを選び、表示位置を決めます。
* 右側のプレビューを確認してアドゾーンの見た目を見て、必要なら設定を再調整してください。
  {% endstep %}

{% step %}

### 手順 4

![ネイティブ手順 10](/files/77ebc0e09ed53c9a7c821585c5ec85579217376e)

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

{% step %}

### 手順 5

![ネイティブ手順 11](/files/18546b1540290c9608ee8b5696e412fac7d6af6d)

* で、 **詳細オプション** セクションで、 **縦方向の間隔** と **横方向の間隔** を各広告の周囲に何ピクセル入れるか設定できます。

{% hint style="info" %}
**注**：これらの設定を変更すると、アドゾーン全体のサイズが変わります。
{% endhint %}
{% endstep %}

{% step %}

### 手順 6

![ネイティブ手順 12](/files/da35c2969641fd095b4cb05344bb9ef4bfcefbe8)

* 画面右側で **デスクトップ** と **モバイル** の両方のプレビューを確認します。デスクトップ表示とモバイル表示の切り替わるブレークポイントは、 **モバイル ブレークポイント** のドロップダウンで **詳細オプション**.
* で設定できます。ブレークポイントは **800px** をiPad向け、 **450px** をモバイル向け、そして **非レスポンシブ**に設定できます。ブレークポイントを変更すると、デスクトップレイアウトの設定がデスクトップとiPadの両方に適用されるか、デスクトップのみに適用されるかが変わります。
* プレビューに満足したら、 **作成**.
  {% endstep %}

{% step %}

### 手順 7

![ネイティブ手順 13](/files/72dd8a3ac9cf55b9fcf6cd0c987136289403a72c)

* をコピーし、 **ゾーンHTMLタグ** をサイトに追加します。
* サイト上のアドゾーンサイズが、先ほど作成したゾーンのサイズと一致していることを確認してください。
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="シナリオ C: カスタムレイアウト: 固定ゾーンサイズを設定" %}
このシナリオでは、サイトの要件に合わせてアドゾーンのサイズを設定し、広告が適切に表示されるように設定を微調整したいはずです。

{% stepper %}
{% step %}

### 手順 1

![ネイティブ手順 13](/files/129153b4dafd93b2c8266831acc7d5eab6d18c81)

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

{% step %}

### 手順 2

![ネイティブ手順 14](/files/a7394eb9dbf4d7ed3b6c8622d53b6bce8f9fbc3d)

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

{% step %}

### 手順 3

![ネイティブ手順 15](/files/ffea5694437bc64d663c6866ee1b6499b0852bfc)

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

{% step %}

### 手順 4

![ネイティブ手順 15](/files/5d75267ff6fe61cf70cc77d6bec73de395d02d41)

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

{% step %}

### 手順 5

![ネイティブ手順 16](/files/da35c2969641fd095b4cb05344bb9ef4bfcefbe8)

* 画面右側で **デスクトップ** と **モバイル** の両方のプレビューを確認します。デスクトップ表示とモバイル表示の切り替わるブレークポイントは、 **モバイル ブレークポイント** のドロップダウンで **詳細オプション**.
* で設定できます。ブレークポイントは **800px** をiPad向け、 **450px** をモバイル向け、そして **非レスポンシブ**に設定できます。ブレークポイントを変更すると、デスクトップレイアウトの設定がデスクトップとiPadの両方に適用されるか、デスクトップのみに適用されるかが変わります。
* プレビューに満足したら、 **作成**.
  {% endstep %}

{% step %}

### 手順 6

![ネイティブ手順 17](/files/72dd8a3ac9cf55b9fcf6cd0c987136289403a72c)

をコピーし、 **ゾーンHTMLタグ** をサイトに追加します。
{% endstep %}
{% endstepper %}
{% endtab %}
{% endtabs %}

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

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

![非レスポンシブ2](/files/55a262f6689ffa873fe421e7c977f278aadd7f65)

![非レスポンシブ3](/files/cf8739d4ceafa795ef658522fc02d0cfe38971d3)

* モーダルで **続行** をクリックすると、モバイルやタブレットを含むすべてのデバイスで広告にデスクトップレイアウトが配信されます。
* 非レスポンシブが選択されると、モバイルレイアウトはユーザーによる編集ができなくなります。
* 以前に保存されていない場合、画像設定はデフォルトのカスタムサイズ（幅 200px、高さ 200px）に更新されます。

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

![バナー](/files/f83e3836934becd05ab776fc514c799c68dc1925)

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

{% hint style="info" %}
**注**：カスタムCSSの変更はプレビューには表示されず、サイト上でのみ表示されますのでご注意ください。
{% endhint %}

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

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

![ネイティブ広告のCSS](/files/8b7229235691118d8d6a4c05e69a446051ab4b6e)

| クラス                                | アクション                    |
| ---------------------------------- | ------------------------ |
| .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スタイルをどのように調整できるかを示します。

{% stepper %}
{% step %}

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

![ネイティブ広告のCSS例](/files/4649ef3039b11b43efb6cdf642149a88c39e43c4)

```css

 .exo-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      left: 15px;
   }

```

{% endstep %}

{% step %}

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

![ネイティブ広告のCSS例](/files/038ed0bfaab855de21b7dc32fa53345ad260db08)

```css

 .exo-native-widget-item-content {
      height: 50px  !important;
   }

```

{% endstep %}

{% step %}

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

![ネイティブ広告のCSS例](/files/a4aec67b940eba738ad3b4676076333df0accfe3)

```css

 .exo-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      background-color: black !important;
      opacity: 0.7 !important;
    }
.exo-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

```

{% endstep %}

{% step %}

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

![ネイティブ広告のCSS例](/files/2eb2acba4e9d448f0dba584d7ebcc4e9488a578e)

```css

 .exo-native-widget-item-image {
    border-radius: 5% !important;
    }   

```

{% endstep %}

{% step %}

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

![ネイティブ広告のCSS例](/files/89b84d52194cefd7107f6295d2dea83ced2d1f22)

```css

 .exo-native-widget-item-title, .exo-native-widget-item-text, .exo-native-widget-item-brand {
   font-family: fantasy !important;
   }

```

{% endstep %}

{% step %}

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

![ネイティブ広告のCSS例](/files/5823e03204d5f28a2d74adace61518f5a2fc41d4)

```css

 .exo-native-widget-item-content {
    padding: 30px !important;
    }

```

{% endstep %}

{% step %}

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

![ネイティブ広告のCSS例](/files/2056bd9a6a7d66145666798fca989107b416b725)

```css

 .exo-native-widget-item-content {
    background-color: #ABE1FA !important;
    padding: 10px !important;
}
.exo-native-widget-outer-container {
    background-color: white !important;
    padding: 10px !important;
}
.exo-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

```

{% endstep %}

{% step %}

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

![ネイティブ広告のCSS例](/files/349346f5cf820c73e4fc3cc5c8e218b458871e48)

```css

.exo-native-widget-item-container {
  border: 10px #0073B7 solid !important;
  padding: 10px !important;
}
.exo-native-widget-outer-container {
  margin: 10px !important;
}

```

{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.exoclick.com/publishers/ja/saitotozn/neitibuno.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.