ヘルプ

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

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

この記事では、忍者AdMax「ネイティブ広告枠」をカスタマイズするために、
忍者AdMax運営側で用意したカスタマイズ用コードとそのCSSについて
解説したいと思います。

①コードの解説
 -広告リンクにまつわる記述
 -ネイティブ広告の画像にまつわる記述
 -ネイティブ広告タイトルにまつわる記述
 -ネイティブ広告説明にまつわる記述
 -ネイティブ広告上の広告表記[AD]にまつわる記述
 -広告画像のフロート解除にまつわる記述

②CSSの解説
 -ネイティブ広告全体にかかるCSS
 -広告リンクにかかるCSS
 -ネイティブ広告上の広告表記[AD]にかかるCSS
 -ネイティブ広告の画像にかかるCSS
 -ネイティブ広告タイトルにかかるCSS
 -ネイティブ広告タイトルと説明にかかるCSS
 -ネイティブ広告の画像のフロート解除のためのCSS

こちらの記事
【忍者AdMaxネイティブ広告】<style適用なし>カスタマイズ方法
でも取り上げたように、

デフォルトで表示されるstyle適用なしテンプレート

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

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

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

を忍者AdMax運営側で以下のように変更しました。

忍者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はあくまで運営側の一例です。自分の好きなように変えて使っていただいて結構です。)

 

 

【1.コードの解説】

忍者AdMax管理画面で発行されたネイティブ広告枠のタグ

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

を貼り付けると、ブラウザでは以下のように展開されます。

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

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

<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>

</div>

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

こちらの赤い部分がネイティブ広告枠を作成する際に、編集できる部分になります。

サンプル画像の解説

それでは各行の解説をしていきたいと思います。
<※サンプル画像>

※以下がサンプル画像の説明です。
①:画像
②:タイトル
③:広告説明
④:広告表記
斜線部分:paddingの余白
横線部分:画像のmargin

 

◆<a href=”${CLICK_URL}” target=”_blank”></a>

こちらのコードは、広告リンクが挿入される記述になります。

①②③の部分にリンク先が設定されます。

◆ <img src=”${IMAGE_URL}”>

こちらのコードは、ネイティブ広告の画像部分が表示される記述になります。

①の部分の画像になります。

◆<span class=”admax-native-title”>${TITLE}</span>

こちらのコードは、ネイティブ広告のタイトル部分が表示される記述になります。

②部分のタイトルになります。

◆<span class=”admax-native-description”>${DESCRIPTION}</span>

こちらのコードは、ネイティブ広告の説明が表示される記述になります。

③部分の説明文章になります。

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

こちらのコードは、[AD]という広告表記が表示される記述になります。

④の部分の広告表記[AD]になります。

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

 

以上がコード部分の解説になります。

詳細なカスタマイズ方法を知りたい方はこちらもご覧ください。

ネイティブ広告外枠全体のカスタマイズ方法 
ネイティブ広告画像のカスタマイズ方法
ネイティブ広告テキストのカスタマイズ方法 
ネイティブ広告上の広告表記[AD]のカスタマイズ方法 

 

 

【2.CSSの解説】

ここからは、どの要素にどのCSSが効いているかについて、一つ一つ解説していきます。

サンプル画像の解説

<※サンプル画像>

※以下がサンプル画像の説明です。
①:画像
②:タイトル
③:広告説明
④:広告表記
斜線部分:paddingの余白
横線部分:画像のmargin

 

CSSの解説

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

こちらの記述は忍者AdMaxのネイティブ広告全体を包む

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

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

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

に効くCSSになります。

忍者AdMaxネイティブ広告枠のサンプル画像全体に効くCSSです。

◆.admax-native a {
display: block;
width: 100%;
}

こちらの記述は

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

<a href=”${CLICK_URL}” target=”_blank”>

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

の広告リンクにかかるCSSになります。

◆.admax-native .optout {
position: absolute;
bottom: 8px;
right: 8px;
width: auto;
font-size: 12px;
}

こちらの記述は

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

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

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

にかかるCSSになります。

サンプル画像上の④[AD]のデザインをつかさどるCSSになります。

 

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

こちらの記述は

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

 <img src=”${IMAGE_URL}”/>

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

にかかるCSSになります。

サンプル画像上の①画像のデザインをつかさどるCSSになります。

 

◆.admax-native a .admax-native-title{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

こちらの記述は

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

<span class=”admax-native-title”>${TITLE}</span>

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

にかかるCSSになります。

サンプル画像上の②タイトルがネイティブ広告枠の幅に収まりきらない場合、表示を省略する設定がされています。

 

◆.admax-native a .admax-native-title,
.admax-native a .admax-native-description {
display: block;
font-size: 12px;
line-height: 1.5;
}

こちらの記述は

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

<span class=”admax-native-title”>${TITLE}</span>
<span class=”admax-native-description”>${DESCRIPTION}</span>

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

にかかるCSSになります。

サンプル画像の②タイトルと③説明文章のデザインをつかさどるCSSになります。

 

◆.admax-native:after {
content: “”;
clear: both;
display: block;
}

こちらの記述は画像(.admax-native a img)にかかったfloat:leftを解除するCSSになります。

 
以上がコードとCSSの解説になります。

 
カスタマイズ方法に関する詳細方法はこちらもご覧ください。

ネイティブ広告外枠全体のカスタマイズ方法 
ネイティブ広告画像のカスタマイズ方法
ネイティブ広告テキストのカスタマイズ方法 
ネイティブ広告上の広告表記[AD]のカスタマイズ方法