【忍者AdMaxネイティブ広告】カスタマイズ用コードとそのCSSの解説
いつも忍者ツールズをご利用いただき誠にありがとうございます。
この記事では、忍者AdMax「ネイティブ広告枠」をカスタマイズするために、
忍者AdMax運営側で用意したカスタマイズ用コードとそのCSSについて
解説したいと思います。
①コードの解説
－広告リンクにまつわる記述
－ネイティブ広告の画像にまつわる記述
－ネイティブ広告タイトルにまつわる記述
－ネイティブ広告説明にまつわる記述
－ネイティブ広告上の広告表記[AD]にまつわる記述
－広告画像のフロート解除にまつわる記述
②CSSの解説
－ネイティブ広告全体にかかるCSS
－広告リンクにかかるCSS
－ネイティブ広告上の広告表記[AD]にかかるCSS
－ネイティブ広告の画像にかかるCSS
－ネイティブ広告タイトルにかかるCSS
－ネイティブ広告タイトルと説明にかかるCSS
－ネイティブ広告の画像のフロート解除のためのCSS
こちらの記事
【忍者AdMaxネイティブ広告】＜style適用なし＞カスタマイズ方法
でも取り上げたように、
デフォルトで表示されるstyle適用なしテンプレート
———————————————————————————————————-
———————————————————————————————————-
を忍者AdMax運営側で以下のように変更しました。
忍者AdMax運営側で用意したコード
———————————————————————————————————-
<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は
———————————————————————————————————-
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はあくまで運営側の一例です。自分の好きなように変えて使っていただいて結構です。）
【１．コードの解説】
忍者AdMax管理画面で発行されたネイティブ広告枠のタグ
「<div class=”admax-native” data-admax-id=”xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”></div>」
を貼り付けると、ブラウザでは以下のように展開されます。
———————————————————————————————————-
<div class=”admax-native” data-admax-id=”xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”>
<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]のカスタマイズ方法
【２．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%;
}
こちらの記述は
———————————————————————————————————-
———————————————————————————————————-
の広告リンクにかかるCSSになります。
◆.admax-native .optout {
position: absolute;
bottom: 8px;
right: 8px;
width: auto;
font-size: 12px;
}
こちらの記述は
———————————————————————————————————-
———————————————————————————————————-
にかかるCSSになります。
サンプル画像上の④[AD]のデザインをつかさどるCSSになります。
◆.admax-native a img {
float: left;
display: block;
width: 57px;
height: 57px;
margin: 0px 12px 0px 8px;
}
こちらの記述は
———————————————————————————————————-
———————————————————————————————————-
にかかるCSSになります。
サンプル画像上の①画像のデザインをつかさどるCSSになります。
◆.admax-native a .admax-native-title{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
こちらの記述は
———————————————————————————————————-
———————————————————————————————————-
にかかるCSSになります。
サンプル画像上の②タイトルがネイティブ広告枠の幅に収まりきらない場合、表示を省略する設定がされています。
◆.admax-native a .admax-native-title,
.admax-native a .admax-native-description {
display: block;
font-size: 12px;
line-height: 1.5;
}
こちらの記述は
———————————————————————————————————-
———————————————————————————————————-
にかかるCSSになります。
サンプル画像の②タイトルと③説明文章のデザインをつかさどるCSSになります。
◆.admax-native:after {
content: “”;
clear: both;
display: block;
}
こちらの記述は画像（.admax-native a img）にかかったfloat:leftを解除するCSSになります。
以上がコードとCSSの解説になります。
カスタマイズ方法に関する詳細方法はこちらもご覧ください。
→ネイティブ広告外枠全体のカスタマイズ方法
→ネイティブ広告画像のカスタマイズ方法
→ネイティブ広告テキストのカスタマイズ方法
→ネイティブ広告上の広告表記[AD]のカスタマイズ方法