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

このたびは、忍者AdMax「ネイティブ広告枠」で表示されるテキスト（タイトル／広告説明）部分の
カスタマイズ方法をお伝えしたいと思います。

①CSSによるテキスト部分のカスタマイズ方法
②フォントサイズのカスタマイズ方法
③テキスト同士の間隔幅のカスタマイズ方法
④幅を越えるテキストの省略設定の方法

今回説明するコードとCSSはあくまで運営側による一例ですので、
自分の好きなように変えて使っていただいて結構です。

こちらもご覧ください。
→【忍者AdMaxネイティブ広告：カスタマイズ用コードとそのCSSの解説】

 

 

【１．CSSによるテキスト部分のカスタマイズ方法】

＜※サンプル画像＞

サンプル画像をみてもお分かりいただけると思いますが、
この章では「②タイトル」と「③広告説明」のテキスト部分のカスタマイズ方法に触れていきます。

デザイン変更には、
こちらの要素に対応する

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

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

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

こちらのCSS

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

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

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

 

 

【２．フォントサイズのカスタマイズ方法】

「②タイトル」「③広告説明」にあたるフォントのサイズを変更したい場合、

こちらのCSSの「←★」で示された部分

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

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

を編集することで、フォントを大きくしたり小さくしたりすることができます。

例えば、font-sizeがデフォルトで12pxに設定されていますが、これを

font-size:18px

に変更してみます。

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

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

すると、

【変更前】

【変更後】

とフォントサイズが大きくなりました。
小さくしたい場合は逆に、12pxよりも小さくしてください。

以上がテキストのフォントサイズの変更方法になります。

 

 

【３．テキスト同士の間隔幅のカスタマイズ方法】

「②タイトル」と「③広告説明」にあたるテキスト同士の間隔幅を変更したい場合、

こちらのCSSの「←★」で示された部分

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

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

を編集することで、タイトルと説明のテキストの幅の間隔を大きくしたり小さくしたりすることができます。

例えば、line-heightがデフォルトで1.5に設定されていますが、これを

line-height: 2;

に変更してみます。

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

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

すると、

【変更前】

【変更後】

とテキスト同士の間隔の幅が大きくなりました。
小さくしたい場合は逆に、1.5よりも小さくしてください。

以上がテキスト同士の間隔幅の調整方法になります。

 

 

【４．幅を越えるテキストの省略設定の方法】

「②タイトル」と「③広告説明」にあたるテキスト部分がネイティブ広告枠の幅に収まらず、改行されてしまうことがあります。

その際、広告枠の高さheightだけが大きくなって、広告枠自体のデザイン調整がしづらいケースが出てくると思います。

そういった問題が出てきたときに、役立つのがこれから紹介するCSSになります。

こちらのCSSの「←★」で示された３つの記述

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

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

を追加することで、長すぎて改行されてしまっていたテキストを省略することができます。

例えば、 以下のような場合

【追加前】

【CSS追加後】

このように長すぎるタイトルの語尾が「…」となって、省略されていることが分かると思います。

これと同様、タイトルだけでなく、説明部分も省略したい場合は、
「←★」で示されたCSSを

「.admax-native a .admax-native-title」のみならず、
「.admax-native a .admax-native-title,
.admax-native a .admax-native-description {}」

の中にも追加変更してみてください。

例えば、

【変更前】

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

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

【変更後】

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

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

【CSS追加後】

のように、タイトルと説明分の両方に、「…」という省略マークを確認できます。

自分のサイトデザインに合うようなスタイルを是非とも発見して、実践してみてください。
カスタマイズ方法に関する詳細方法はこちらもご覧ください。

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