【忍者AdMaxネイティブ広告】広告表記[AD]のカスタマイズ方法
いつも忍者ツールズをご利用いただき誠にありがとうございます。
このたびは、忍者AdMax「ネイティブ広告枠」で表示される
広告表記[AD]
のカスタマイズ方法をお伝えしたいと思います。
①CSSによる広告表記[AD]のカスタマイズ方法
②広告表記[AD]のテキストを変更する方法
③広告表記[AD]の位置変更カスタマイズ方法
④広告表記[AD]のデザインカスタマイズ方法
今回説明するコードとCSSはあくまで運営側による一例ですので、自分の好きなように変えて使っていただいて結構です。
こちらもご覧ください。
→【忍者AdMaxネイティブ広告:カスタマイズ用コードとそのCSSの解説】
【1.CSSによる広告表記[AD]のカスタマイズ方法】
<※サンプル画像>
サンプル画像の④の広告表記[AD]の部分をカスタマイズするには、
こちらの要素
———————————————————————————————————-
<a class=”optout” href=”${OPTOUT_URL}” target=”_blank”>[AD]</a>
———————————————————————————————————-
に対応するこちらのCSS
———————————————————————————————————-
.admax-native .optout {
position: absolute;
bottom: 8px;
right: 8px;
width: auto;
font-size: 12px;
}
———————————————————————————————————-
を編集する必要があります。
※広告上のPRマーク及びオプトアウトリンクの掲載は必須となっております。
文言は「AD」以外に「PR」、「広告」などの表記も可能ですので、
自分なりのカスタマイズで楽しんでください。
【2.[AD]のテキストを変更する方法】
④の[AD]というテキストを変更したい場合、
こちらの★で囲まれた部分のテキストを変更する必要があります。
———————————————————————————————————-
<a class=”optout” href=”${OPTOUT_URL}” target=”_blank”>★[AD]★</a>
———————————————————————————————————-
例えば、[AD]というテキストを[PR]に変えてみましょう。
———————————————————————————————————-
<a class=”optout” href=”${OPTOUT_URL}” target=”_blank”>★[PR]★</a>
———————————————————————————————————-
【変更前】
【変更後】
といったように変更されます。
【3.広告表記[AD]の位置変更カスタマイズ方法】
④にあたる広告表記[AD]の位置を変更したい場合、
こちらのCSSの「←★」で示された部分
———————————————————————————————————-
.admax-native .optout {
position: absolute;
bottom: 8px;←★
right: 8px;←★
width: auto;
font-size: 12px;
}
———————————————————————————————————-
を編集することで、広告表記[AD]の表示される位置を変更することができます。
例えば、rightとbottomがデフォルトで8pxに設定されています。
この意味は「右と下から8px内側に表示する」という意味を示します。
「top, left, bottom, right」の中から好きな方向を選んでみましょう
今回は←★部分を
top:8px;
left:8px;
に変更してみます。
———————————————————————————————————-
.admax-native .optout {
position: absolute;
top: 8px;←★
left: 8px;←★
width: auto;
font-size: 12px;
}
———————————————————————————————————-
すると、
【変更前】
【変更後】
と広告表記[AD]の位置が変更されました。
「top, left, bottom, right」の中から好きな方向を選び、
何px内側に表示するか、またはマイナス(-)をつけて外側に表示するか、
自分なりにカスタマイズしてみてください。
以上が広告表記[AD]の位置変更の方法になります。
【4.広告表記[AD]のデザインカスタマイズ方法】
④にあたる広告表記[AD]のデザインを変更したい場合がありますね。
(※ここでいうデザインというのは「背景カラー、文字サイズ、ボーダーの有無」といった簡易なものを指します。)
その際は、 こちらのCSSの「←★」で示された「font-size」「background-color」「border」「color」を追加・編集してみてください。
今回はわかりやすくフォントサイズを小さくし、赤色のボーダーを付けることにします。
———————————————————————————————————-
.admax-native .optout {
position: absolute;
bottom: 8px;
right: 8px;
width: auto;
font-size: 8px;←★
background-color:#333;←★
border:1px solid #F00;←★
color:#FFFFFF;←★
}
———————————————————————————————————-
すると、
【変更前】
【変更後】
と広告表記[AD]のデザインが変更されました。
上級者の方は、読み込み画像を用意するなどして
background-image:url(…);などのプロパティを応用しても面白いかもしれません。
これで、広告表記[AD]のデザインのカスタマイズ方法の解説を終わります。
自分なりにカスタマイズをたのしんでみてください。
こちらも一緒にご覧ください。
→ネイティブ広告外枠全体のカスタマイズ方法
→ネイティブ広告画像のカスタマイズ方法
→ネイティブ広告テキストのカスタマイズ方法