ヘルプ

【忍者AdMaxネイティブ広告】style適用ありテンプレートのカスタマイズ方法

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

このたびは、忍者AdMax「ネイティブ広告枠」の「style適用テンプレート」のカスタマイズ方法をお伝えしたいと思います。

①忍者AdMaxネイティブ広告枠テンプレートの解説
②画像をカスタマイズしたい場合
③テキストデザインをカスタマイズしたい場合
④広告表記[AD]を変更したい場合

 

 

【1.忍者AdMaxネイティブ広告枠テンプレートの解説】

ここでは忍者AdMax運営側が用意したネイティブ広告枠の「style適用テンプレート」の中で、
どこを編集すれば、デザインを変更できるか説明します。

<※サンプル画像>

こちらのタグがテンプレの記述になります。

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

<a href=”${CLICK_URL}” target=”_blank” style=”box-sizing:border-box;display:table;table-layout:fixed;width:100%;padding:7px;”>

<div style=”display:table-cell;width:57px;height:57px;background-image:url(‘${IMAGE_URL}’);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;”> </div>

<div style=”display:table-cell;vertical-align:top;padding-left:7px;”>

<span style=”display:block;font-size:14px;line-height:1;margin-bottom:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;”>${TITLE}</span>

<span style=”display:-webkit-box;padding-right:2em;font-size:12px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;”>${DESCRIPTION}</span>

</div>
</a>

<a href=”${OPTOUT_URL}” target=”_blank” style=”display:block;width:auto;font-size:12px;line-height:1.5;position:absolute;right:7px;margin-top:-25px;”>[AD]</a>

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

 

 

【2.画像をカスタマイズしたい場合】

◆サイズを変える

ネイティブ広告の画像サイズを周りのデザインの高さに合わせたい場合、
サンプル画像で言う①にあたる広告画像imgのwidth(幅)とheight(高さ)を調整する必要があります。

※初期設定として、幅と高さはネイティブ広告のコンテンツやデバイスの画面に合うように設定されています。

例えば、下線部分を以下の赤い文字のように書き変えると、

 

【変更前】

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

<div style=”display: table-cell; width: 57px; height: 57px; background-image: url(‘${IMAGE_URL}’); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;”></div>

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

【変更後】

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

<div style=”display: table-cell; width: 80px; height: 80px; background-image: url(‘${IMAGE_URL}’); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;”></div>

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

このように、画像サイズを変更できました。

 

◆ボーダーをつける

ネイティブ広告の画像の周りにボーダーをつけたい場合、
「border: 1px solid #000;」をheight: OOpx;の後に赤文字で示した通り入れてみましょう。

例えば、

【変更前】

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

<div style=”display: table-cell; width: 57px; height: 57px; background-image: url(‘${IMAGE_URL}’); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;”></div>

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

【変更後】

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

<div style=”display: table-cell; width: 57px; height: 57px;border:1px soild #000; background-image: url(‘${IMAGE_URL}’); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;”></div>

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

このように画像にボーダーを付けることができました。

 

 

【3.テキストデザインをカスタマイズしたい場合】

◆サイズ・カラー・アンダーバーをカスタマイズ

ネイティブ広告内のタイトル・説明テキストのデザインを変えたい場合、
「font-size, color, text-decoration, font-weight」などのプロパティをつかって、編集してみましょう。

例えば、タイトル部分に「font-size:20px;color:red;text-decoration:underline; font-weight:bold;」を追加してみます。

【変更前】

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

<span style=”display:block;font-size:14px;line-height:1;margin-bottom:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;”>広告貼ってお小遣い稼ぎ</span>

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

【変更後】

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

<span style=”display:block;font-size:20px;color:red;text-decoration:underline; font-weight:bold; line-height:1;margin-bottom:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;”>広告貼ってお小遣い稼ぎ</span>

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


このようにタイトル部分が変わりました。

サンプル画像上の③で示した広告説明の部分も同様にカスタマイズできるので実践してみてください。

 

 

【4.広告表記[AD]を変更したい場合】

 

◆ フォントサイズ、位置、カラー、テキストをカスタマイズ

ネイティブ広告上の広告表記[AD]のデザインを変えたい場合、
「font-size, color, text-decoration, font-weight」などのプロパティをつかって見栄えも編集できるほか、

下線で示された部分「right:7px;margin-top:-25px」を編集することで表示位置も変更できます。

例えば、「font-size:25px;color:#000;text-decoration:none; font-weight:bold;」を追加し、

rightを7px, margin-topを -50px;

に設定してみます。

【変更前】

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

<a href=”${OPTOUT_URL}” target=”_blank” style=”display:block;width:auto;font-size:12px;line-height:1.5;position:absolute;right:7px;margin-top:-25px;“>[AD]</a>

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

【変更後】

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

<a href=”${OPTOUT_URL}” target=”_blank” style=”display:block;width:auto;line-height:1.5;font-size:25px;color:#000;text-decoration:none; font-weight:bold;position:absolute;right:7px;margin-top:-60px;“>[AD]</a>

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

このように広告表記[AD]のデザインが変わりました。

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

ちなみに、フォントサイズやtext-decorationはデフォルト状態での大きさを使うことを推奨します。

 
色々と実践してみてどんどん自分にあったスタイルをみつけてくださいね。