「ネイティブ広告の設定
ネイティブアド](/ja/docs/create-zone#native)ゾーンの作成は簡単で、しかも強力なカスタマイズが可能です。ニーズに応じて、ネイティブアド・ゾーンを設定するプロセスを少しずつ使い分けることができます：
- **シナリオA単純に広告ゾーンを設定し、ネイティブ広告ゾーンの画像のアスペクト比を選択し、それに合わせてサイト上の広告ゾーンのサイズを設定します。
- **シナリオBカスタム画像のサイズや比率に合わせて広告ゾーンを設定したい。
- **シナリオCサイト上に特定のサイズのゾーンがあり、そこにフィットして見栄えの良い広告ゾーンを作りたい。
どちらのシナリオを選ぶにせよ、最初にすべきことはネイティブ広告ゾーンを作成することです。
ネイティブ広告ゾーンの作成
パブリッシャーとしてログインしたら、Sites & Zones, New Zoneをクリックし、Nativeセクションを展開し、ネイティブ広告フォーマットRecommendation Widgetを選択し、Nextをクリックします。
ゾーンの詳細を入力し、次へをクリックします。
シナリオ A：クイックレイアウト：アスペクト比を設定する
このシナリオでは、管理パネルで画像の縦横比を設定し、広告ゾーンの合計サイズを設定する必要はありません。クイックレイアウト**を使用する場合、作成した広告ゾーンは自動的に配置したコンテナのサイズに適応します。
ステップ1：
クイックレイアウトタブを選択します。デスクトップのレイアウトセクションで、デスクトップに表示する広告の列数と行数を設定します。
ステップ2：
次に、画像設定ドロップダウンから画像のアスペクト比を選択します。1:1、4:3、16:9**の中から、サイトのサムネイルに合わせて選択できます。
ステップ3：
- アスペクト比を選んだら、チェックボックスでテキストを表示するかどうかを選び、表示する場所を決めます。
- このテキストはタイトルと説明で構成されています。お望みであれば、TitleとDescriptionセクションで個別にオン・オフを切り替えることができます。
- 右側のプレビューで広告ゾーンがどのように見えるかを確認し、必要に応じて設定を微調整してください。
ステップ4：
- 上記のモバイルレイアウトセクションのステップ1～3を繰り返して、広告ゾーンをモバイル用に設定します。
ステップ5：
- 画面右側のデスクトップとモバイルの両方のプレビューを確認してください。デスクトップビューとモバイルビューのブレークポイントがどこで発生するかは、Advanced OptionsのMobile Breaking Pointドロップダウンで設定できます。
- ブレイクポイントは、iPadでは800px、モバイルでは450px、そしてUnresponsiveに設定できます。ブレイクポイントを変更すると、Desktop Layoutセクションの設定がデスクトップとiPadに影響するか、デスクトップだけに影響するかが変わります。
- プレビューの表示に満足したら、Createをクリックします。
ステップ6：
- ゾーンHTMLタグ**をコピーして、あなたのサイトに追加してください。
- つまり、コンテナが大きいほど、広告ゾーンも広告も大きくなります。
シナリオ B：クイックレイアウト：カスタム画像サイズを設定する
このシナリオでは、画像サイズや広告の間隔をサイトに合わせて変更できるようにしたい。ネイティブ広告をサイトの編集コンテンツの一部であるかのように見せたい場合は、このようにする。
ステップ1：
- クイックレイアウトタブを選択します。デスクトップのレイアウトセクションで、デスクトップに表示する広告の列数と行数を設定します。
ステップ2：
- 画像設定のドロップダウンで、カスタムサイズを選択し、サイトのサイズに合わせて画像の幅と高さを設定します。サイトがメタタグを含み、レスポンシブである場合、サイトが表示されると、画面サイズが小さくなるにつれて画像も反応します。ウィジェットサイズと画像サイズに関する情報は、プレビューの上の右上隅に表示されます。
ステップ3：
- 画像サイズを設定したら、テキストチェックボックスを使用してテキストを表示するかどうかを選択し、表示する場所を選択します。
- 右側のプレビューで広告ゾーンがどのように見えるかを確認し、必要に応じて設定を微調整してください。
ステップ4：
- モバイルレイアウト**」セクションのステップ1～3を繰り返して、広告ゾーンをモバイル用に設定します。
ステップ5：
- 詳細オプションセクションでは、各広告の周囲に何ピクセルの縦の間隔と横の間隔**を設定することができます。
注：これらの設定を変更すると、広告ゾーンの全体的なサイズが変更されます。
ステップ6：
- 画面右側のデスクトップとモバイルの両方のプレビューを確認してください。デスクトップビューとモバイルビューのブレークポイントがどこで発生するかは、Advanced OptionsのMobile Breaking Pointドロップダウンで設定できます。
- ブレイクポイントは、iPadでは800px、モバイルでは450px、そしてUnresponsiveに設定できます。ブレイクポイントを変更すると、Desktop Layoutセクションの設定がデスクトップとiPadに影響するか、デスクトップだけに影響するかが変わります。
- プレビューの表示に満足したら、Createをクリックします。
ステップ7：
- ゾーンHTMLタグ**をコピーして、あなたのサイトに追加してください。
- サイト上の広告ゾーンのサイズが、先ほど作成したゾーンのサイズと一致していることを確認してください。
シナリオC：カスタムレイアウト：固定ゾーンサイズの設定
このシナリオでは、サイトが必要とするものに合わせて広告ゾーンのサイズを設定し、広告がうまく表示されるように設定を微調整できるようにしたい。
ステップ1：
カスタムレイアウトタブを選択します。デスクトップレイアウトセクションで、作成したい広告ゾーン全体の幅と高さを設定します。
ステップ2：
次に、広告ゾーンに表示したい広告の列と行の数を選択します。右側のプレビューで、選択したサイズに合う設定を確認してください。
ステップ3：
必要な列数と行数を選択したら、テキストチェックボックスを使ってテキストを表示するかどうかを選択し、テキスト位置ドロップダウンを使ってテキストを表示する場所を選択します。
ステップ4：
モバイルレイアウト**」セクションのステップ1～3を繰り返して、広告ゾーンをモバイル用に設定します。
ステップ5：
- 画面右側のデスクトップとモバイルの両方のプレビューを確認してください。デスクトップビューとモバイルビューのブレークポイントがどこで発生するかは、Advanced OptionsのMobile Breaking Pointドロップダウンで設定できます。
- ブレイクポイントは、iPadでは800px、モバイルでは450px、そしてUnresponsiveに設定できます。ブレイクポイントを変更すると、Desktop Layoutセクションの設定がデスクトップとiPadに影響するか、デスクトップだけに影響するかが変わります。
- プレビューの表示に満足したら、Createをクリックします。
ステップ6：
ゾーンHTMLタグ**をコピーして、あなたのサイトに追加してください。
モバイルブレークポイントで無反応を選択する
- 詳細オプションで「モバイルブレーキングポイント」を「応答なし」に設定すると、以下のようなモーダルが表示されます。
- モーダルでCONTINUEをクリックすると、モバイルやタブレットを含むすべてのデバイスでデスクトップレイアウトの広告が配信されます。
- 応答なし]が選択されている場合、[モバイル]レイアウトはユーザーが編集できなくなります。
- 画像設定が保存されていない場合は、デフォルトのカスタムサイズ（幅 - 200px、高さ - 200px）に更新されます。
ネイティブ広告でカスタムCSSを使用する
カスタムCSS**セクションでは、広告ゾーンがサイトに正しく表示されるようにカスタムCSSを追加することができます。最も重要なCSSクラスは、出発点として提供されています。CSSについての詳細はこちらをご覧ください。
注意：カスタムCSSの変更はプレビューには表示されません。
ネイティブ広告用のCSSクラス
最初に5つのCSSクラスがボックス内に用意されており、お好みで追加のスタイルを貼り付けることができます。これら5つの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スタイルを適用する方法を示しています。
- 画像の上にテキストボックスを配置する。
.exo-native-widget-item-content {
position: absolute !important;
bottom: 0px !important;
z-index: 3 !important;
top: unset !important;
height: 50px !important;
left: 15px;
}
- テキストボックスのサイズを変更するには
.exo-native-widget-item-content {
height: 50px !important;
}
- 画像の上にテキストボックスを配置し、テキストボックスに不透明度で背景を追加する。
.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: 15px;
color: white !important
}
.exo-native-widget-item-text {
margin-left: 15px;
color: white !important
}
- 画像の境界線をカーブさせる。
.exo-native-widget-item-image {
border-radius: 5% !important;
}
- フォントのスタイルを設定します。こうすることで、発行者は自社のウェブサイトで利用可能なフォントや、Zone setupで利用可能なフォント以外のフォントを使用することができます。
.exo-native-widget-item-title, .exo-native-widget-item-text, .exo-native-widget-item-brand {
font-family: fantasy !important;
}
- 画像とテキストの間にパディングを追加し、テキストを画像から近づけることも遠ざけることもできます。padding-bottomを使って、テキストの下にパディングを追加することもできます。
.exo-native-widget-item-content {
padding: 30px !important;
}
- テキストボックスの背景色をカスタマイズして、各画像の下にあるテキストボックスだけに影響を与え、画像とボックスの間は透明または別の背景色にします。
.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: 15px;
}
.exo-native-widget-item-text {
margin-left: 15px;
}
- 画像とそのテキストボックスを覆うボーダーを追加する。これは、そのネイティブウィジェット内の各画像を分離するのに役立ちます。
.exo-native-widget-item-container {
border: 2px #0073B7 solid !important;
padding-right: 0px !important;
padding-bottom: 0px !important
}
.exo-native-widget-outer-container {
margin-bottom: 10px !important;
margin-right: 10px !important
}