ヘルプ

【忍者AdMaxネイティブ広告】外枠全体のカスタマイズ方法

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

このたびは、忍者AdMax「ネイティブ広告枠」で全体の外枠デザイン変更方法をお伝えしたいと思います。
①忍者AdMaxネイティブ広告枠全体のカスタマイズ方法
②忍者AdMaxネイティブ広告枠の余白カスタマイズ方法
③忍者AdMaxネイティブ広告枠全体の高さのカスタマイズ方法
 -忍者AdMaxネイティブ広告枠全体の高さを設定するときの注意点
④忍者AdMaxネイティブ広告枠全体の幅のカスタマイズ方法
⑤忍者AdMaxネイティブ広告枠全体デザインのカスタマイズ方法
⑥ネイティブ広告上の広告表記[AD]にまつわる記述
今回説明するコードとCSSはあくまで運営側による一例ですので、
自分の好きなように変えて使っていただいて結構です。
こちらもご覧ください。
【忍者AdMaxネイティブ広告:カスタマイズ用コードとそのCSSの解説】

※この章では、わかりやすくするため、上下にボーダーを入れています。
(デフォルトでは付いていない状態となっております。)

 

 

【1.忍者AdMaxネイティブ広告枠全体のカスタマイズ方法】

<※サンプル画像>

忍者AdMaxネイティブ広告枠の全体をカスタマイズするには、

こちらのタグ

———————————————————————————————————-
<div class=”admax-native” data-admax-id=”xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”></div>
———————————————————————————————————-

に対応したこちらのCSS
———————————————————————————————————-

.admax-native {
position: relative;
width: 100%;
margin: 0;
padding: 8px 0;
}

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

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

 

 

【2.忍者AdMaxネイティブ広告枠の余白カスタマイズ方法】

サンプル画像の斜線部分にあたる余白(padding)のサイズを変更したい場合
こちらのCSSの「←★」で示された部分

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

.admax-native {
position: relative;
width: 100%;
margin: 0;
padding: 8px 0;←★
}

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

を変更することで、大きくしたり小さくしたりすることができます。

例えば、paddingに運営側のデフォルトとして8px 0;と設定されていますが、これを

padding:0;

に変更してみます。

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

.admax-native {
position: relative;
width: 100%;
margin: 0;
padding: 0;←★
}

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

すると、

【変更前】

【変更後】

とボーダーの位置がテキストに近づき、余白が消えたことが分かります。

余白を大きくしたい場合は、例えば、

padding:8px 0;

padding:15px 0;

のように変更すると、

余白が大きくなるので、自分の好きなようにカスタマイズしてみてください。

 

 

【3.忍者AdMaxネイティブ広告枠全体の高さのカスタマイズ方法】

ネイティブ広告枠全体にかかるCSSは以下のものが使われています。
ここで、←★で示された「height」のプロパティを新しく追加することで、
ネイティブ広告の高さを固定することができます。

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

.admax-native {
position: relative;
width: 100%;
height:100px;←★
margin: 0;
padding: 8px 0;
}

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

例えば、ここではheightを100pxを固定値で設定してみます。

すると、

【変更前】

【変更後】

と高さが100pxに固定されました。
この手法を使うことで、サンプル画像②のように、
自分のコンテンツに合うように高さをカスタマイズしてみてくださいね。

<サンプル画像②>

◆忍者AdMaxネイティブ広告枠全体の高さを設定するときの注意点

高さを固定することで、注意する点があります。

以下のサンプル画像③をご覧ください

<サンプル画像③>

例えば、高さ(height)を小さく設定したときに、
タイトルや説明テキストが長いとこのようなデザイン崩れを起こす可能性があります。

この解決方法としてはまず、

長すぎるテキストを省略するCSSの記述「←★」で示された部分を追加してみましょう。

こちらも一緒にご覧ください。
ネイティブ広告テキストのカスタマイズ方法 

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

.admax-native a .admax-native-title {
}

.admax-native a .admax-native-title,
.admax-native a .admax-native-description {
display: block;
font-size: 12px;
line-height: 1.5;
overflow: hidden;←★
white-space: nowrap;←★
text-overflow: ellipsis;←★
}

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

すると、

テキストが省略されるようになりました。

しかしながら、画像サイズが広告枠自体の高さを超えて、デザイン崩れを起こしています。

そのときには画像タグ

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

 <img src=”${IMAGE_URL}”>

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

に対応したCSSで「←★」で示された部分

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

.admax-native a img {
float: left;
display: block;
width: 57px;←★
height: 57px;←★
margin: 0px 12px 0px 8px;
}

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

を高さのpxに当てはまるように縮小してみましょう。
こちらも一緒にご覧ください
ネイティブ広告画像のカスタマイズ方法

 

 

【4.忍者AdMaxネイティブ広告枠全体の幅のカスタマイズ方法】

ネイティブ広告枠全体にかかるCSSは以下のものが使われています。

ここで、「←★」で示された「width」のプロパティを編集すると、
ネイティブ広告の幅を固定することができます。

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

.admax-native {
position: relative;
width: 100%;←★
margin: 0;
padding: 8px 0;
}

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

デフォルトではwidthは100%に設定され、
各スマホ画面幅いっぱいに広告が広がるようなデザインですが、

幅をもっと小さくしたい場合は、widthをpxや%で自分なりのサイズを設定してみることもできます。
例えば、

widthを200pxに設定してみます。

すると、

【変更前】

【変更後】

とネイティブ広告枠の幅が200pxに縮小されました。
こちらも忍者AdMaxネイティブ広告枠全体の高さを設定するときの注意点と同様、

「←★」の部分で示されたテキストの省略形のCSSを追加することで
デザインの崩れを回避できますので試してみてください。

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

.admax-native a .admax-native-title,
.admax-native a .admax-native-description {
display: block;
font-size: 12px;
line-height: 1.5;
overflow: hidden;←★
white-space: nowrap;←★
text-overflow: ellipsis;←★
}

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

 

 

【5.忍者AdMaxネイティブ広告枠全体デザインのカスタマイズ方法】

ネイティブ広告枠全体の大枠のデザインをカスタマイズするには、

主に「padding, margin, border, background-color」の4つを編集するとよいでしょう。

例えば、現在設定されている「margin」と「padding」を

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

padding: 12px 0;
margin: 12px 0;

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

に変更し「border」と「background-color」に関する記述を追加してみます。

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

.admax-native {
position: relative;
width: 100%;
margin: 12px 0;←★
padding: 12px 0;←★
border-top:1px dotted #333;←★
border-bottom:1px dotted #333;←★
background-color:#FFC;←★
}

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

2つのネイティブ広告枠を上下で並べて見てみると、

【変更前】

【変更後】

とこのように、デザインを変えることができました。

 

これを応用すると、

以下のような、「ランキング」や「過去記事のアーカイブ」、「オススメ記事一覧」などの中で、
インフィード広告として自然にデザインをサイトイメージになじませられるようになります。

 

色々なシーンで利用できるバラエティが広がりまりますので、是非ともお試しください。
≪参考例≫


以上が、忍者AdMaxネイティブ広告の大枠のデザイン変更方法になります。
色々なカスタマイズ方法に関する詳細方法はこちらもご覧ください。
ネイティブ広告画像のカスタマイズ方法
ネイティブ広告テキストのカスタマイズ方法 
ネイティブ広告上の広告表記[AD]のカスタマイズ方法