ヘルプ

【忍者AdMaxネイティブ広告】<style適用なし>カスタマイズ方法

いつも忍者ツールズをご利用いただき誠にありがとうございます。

さて、ユーザー様の中には、忍者AdMax「ネイティブ広告枠」を作成する際に、
忍者AdMax運営側が用意したテンプレートを使わない方もいらっしゃると思います。

そこでこの記事では、<style適用なし>を選択する上での、カスタマイズ方法をお伝えしたいと思います。

(※あくまで一例です。参考としてご確認ください。)

①広告枠を追加する
②スマホ向けのネイティブ広告枠を作成する
③広告枠の設定ページで各項目を選択後、「style適応なし」を選択
④確認画面でよろしければ「OK」を、要変更なら「修正」を
⑤タグの発行と、そのタグの貼り付け
⑥自分のサイトで確認する

 

 

【1.「広告枠を追加する」を選択】

管理画面から「広告枠を追加する」を選択して、新たな広告枠を作成する。

 

 

【2.「スマホ向けのネイティブ広告枠を作成する」を選択】

「広告枠を追加する」を選択すると、以下の「広告枠の種類」のページに飛びます。
ここで「スマホ向けのネイティブ広告枠を作成する」を選択してください。

 

 

【3.広告枠の設定ページで各項目を選択後、「style適応なし」を選択】

「スマホ向けのネイティブ広告枠を作成する」を選択すると、以下の「広告枠の設定」ページに飛びます。

青い矢印で示された部分で「style適応なし」を選択すると、以下のコードタグが表示されます。
———————————————————————————————————-

<a href=”${CLICK_URL}” target=”_blank”>
<img src=”${IMAGE_URL}”>
${TITLE}
${DESCRIPTION}
</a>
<a href=”${OPTOUT_URL}” target=”_blank”>[AD]</a>

———————————————————————————————————-

ここで、CSSで好きなようにカスタマイズできるように、idやclass、タグ要素などを自分で追加してみましょう。

今後の説明がしやすいように、忍者AdMax運営側で用意した以下のようなコード(spanタグやclassを追加した状態のもの)を使います。
こちらをご覧ください。

忍者AdMax運営側で用意したコード

———————————————————————————————————-

<a href=”${CLICK_URL}” target=”_blank”>
<img src=”${IMAGE_URL}”>
<span class=”admax-native-title”>${TITLE}</span>
<span class=”admax-native-description”>${DESCRIPTION}</span>
</a>
<a class=”optout” href=”${OPTOUT_URL}” target=”_blank”>[AD]</a>

———————————————————————————————————-

▼追加したもの
<span class=”admax-native-title”></span>
<span class=”admax-native-description”></span>
aタグのclass=”optout”

忍者AdMax運営側で用意したCSS

上記のコードに対応したCSSは
———————————————————————————————————-

.admax-native {
position: relative;
width: 100%;
margin: 0;
padding: 8px 0;
}
.admax-native:after {
content: “”;
clear: both;
display: block;
}
.admax-native a {
display: block;
width: 100%;
}
.admax-native a img {
float: left;
display: block;
width: 57px;
height: 57px;
margin: 0px 12px 0px 8px;
}
.admax-native a .admax-native-title{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.admax-native a .admax-native-title,
.admax-native a .admax-native-description {
display: block;
font-size: 12px;
line-height: 1.5;
}
.admax-native .optout {
position: absolute;
bottom: 8px;
right: 8px;
width: auto;
font-size: 12px;
}

———————————————————————————————————-

以上、CSSファイルに貼り付けて使ってみてください。

 

※広告上のPRマーク及びオプトアウトリンクの掲載
———————————————————————————————————-
<a class=”optout” href=”${OPTOUT_URL}” target=”_blank”>[AD]</a>
———————————————————————————————————-
は必須となっております。
文言は「AD」以外に「PR」「広告」などの表記も可能です。

 

※[admax-native]というクラスは、忍者AdMaxネイティブ広告枠のタグに始めから設定されているものです。
CSSのみの設定が必要になってきます。

 

忍者AdMaxネイティブ広告サンプル画像

忍者AdMax運営側で用意したコードとCSSを使うと、
デフォルトとして以下のように表示されます。
<※サンプル画像>

このCSS各要素を編集することによってネイティブ広告枠のカスタマイズができるようになります。
こちらも一緒にご覧ください。

【忍者AdMaxネイティブ広告:カスタマイズ用コードとそのCSSの解説】
ネイティブ広告画像のカスタマイズ方法
ネイティブ広告テキストのカスタマイズ方法 
ネイティブ広告上の広告表記[AD]のカスタマイズ方法 
ネイティブ広告外枠全体のカスタマイズ方法 

 

 

【4.確認画面でよろしければ「OK」を、要変更なら「修正」を選択】

「次へ」を選択すると以下の「確認」ページに飛びます。
自分の設定が間違っていないか確認し、変更がなければ「OK」を押して、次のステップへ。

 

 

【5.タグの発行と、そのタグの貼り付け】

「OK」を選択すると、「広告枠の追加が無事完了」します。
ここで青の下線上に示された <div>の広告タグを自分のサイトで好きな場所に、挿入してください。

注意点として、赤の下線で示された<script>タグを</body>の前に張ることを忘れずにしてください。
この<script>タグは1ページに1つずつ貼る必要があります。

 

 

【6.自分のサイトで確認する】

最後のステップは、広告表示の確認です。
正しくタグが貼られている場合、スマホで確認すると以下ように広告が表示されると思います。

カスタマイズ方法に関する詳細方法はこちらもご覧ください。
ネイティブ広告外枠全体のカスタマイズ方法 
ネイティブ広告画像のカスタマイズ方法
ネイティブ広告テキストのカスタマイズ方法 
ネイティブ広告上の広告表記[AD]のカスタマイズ方法