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

このたびは、忍者AdMax「ネイティブ広告枠」で表示される
広告表記[AD]
のカスタマイズ方法をお伝えしたいと思います。

①CSSによる広告表記[AD]のカスタマイズ方法
②広告表記[AD]のテキストを変更する方法
③広告表記[AD]の位置変更カスタマイズ方法
④広告表記[AD]のデザインカスタマイズ方法
今回説明するコードとCSSはあくまで運営側による一例ですので、自分の好きなように変えて使っていただいて結構です。
こちらもご覧ください。

→【忍者AdMaxネイティブ広告：カスタマイズ用コードとそのCSSの解説】

 

 

【１．CSSによる広告表記[AD]のカスタマイズ方法】

＜※サンプル画像＞

サンプル画像の④の広告表記[AD]の部分をカスタマイズするには、

こちらの要素

———————————————————————————————————-
<a class=”optout” href=”${OPTOUT_URL}” target=”_blank”>[AD]</a>
———————————————————————————————————-

に対応するこちらのCSS
———————————————————————————————————-

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

を編集する必要があります。

※広告上のPRマーク及びオプトアウトリンクの掲載は必須となっております。
文言は「AD」以外に「PR」、「広告」などの表記も可能ですので、
自分なりのカスタマイズで楽しんでください。

 

 

【２．[AD]のテキストを変更する方法】

④の[AD]というテキストを変更したい場合、

こちらの★で囲まれた部分のテキストを変更する必要があります。

———————————————————————————————————-
<a class=”optout” href=”${OPTOUT_URL}” target=”_blank”>★[AD]★</a>
———————————————————————————————————-

例えば、[AD]というテキストを[PR]に変えてみましょう。

———————————————————————————————————-
<a class=”optout” href=”${OPTOUT_URL}” target=”_blank”>★[PR]★</a>
———————————————————————————————————-

【変更前】

【変更後】

といったように変更されます。

 

 

【３．広告表記[AD]の位置変更カスタマイズ方法】

④にあたる広告表記[AD]の位置を変更したい場合、
こちらのCSSの「←★」で示された部分

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

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

を編集することで、広告表記[AD]の表示される位置を変更することができます。

例えば、rightとbottomがデフォルトで8pxに設定されています。

この意味は「右と下から8px内側に表示する」という意味を示します。

「top, left, bottom, right」の中から好きな方向を選んでみましょう
今回は←★部分を

top:8px;
left:8px;

に変更してみます。

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

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

すると、

【変更前】

【変更後】

と広告表記[AD]の位置が変更されました。

「top, left, bottom, right」の中から好きな方向を選び、

何px内側に表示するか、またはマイナス（－）をつけて外側に表示するか、

自分なりにカスタマイズしてみてください。

以上が広告表記[AD]の位置変更の方法になります。

 

 

【４．広告表記[AD]のデザインカスタマイズ方法】

④にあたる広告表記[AD]のデザインを変更したい場合がありますね。
（※ここでいうデザインというのは「背景カラー、文字サイズ、ボーダーの有無」といった簡易なものを指します。）

その際は、 こちらのCSSの「←★」で示された「font-size」「background-color」「border」「color」を追加・編集してみてください。
今回はわかりやすくフォントサイズを小さくし、赤色のボーダーを付けることにします。

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

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

すると、

【変更前】

【変更後】

と広告表記[AD]のデザインが変更されました。

 

上級者の方は、読み込み画像を用意するなどして

background-image:url(…);などのプロパティを応用しても面白いかもしれません。

これで、広告表記[AD]のデザインのカスタマイズ方法の解説を終わります。

自分なりにカスタマイズをたのしんでみてください。
こちらも一緒にご覧ください。

→ネイティブ広告外枠全体のカスタマイズ方法 
→ネイティブ広告画像のカスタマイズ方法
→ネイティブ広告テキストのカスタマイズ方法