ヘルプ

【忍者AdMaxネイティブ広告】画像のカスタマイズ方法

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

このたびは、忍者AdMax「ネイティブ広告枠」で表示される≪画像部分≫の
CSSによるカスタマイズ方法をお伝えしたいと思います。

①画像部分のデザインカスタマイズ方法
②画像のサイズをカスタマイズ方法
③画像の位置を変更する方法
④画像に枠線をカスタマイズ方法

今回説明するコードとCSSはあくまで運営側による一例ですので、自分の好きなように変えて使っていただいて結構です。
こちらもご覧ください。
【忍者AdMaxネイティブ広告:カスタマイズ用コードとそのCSSの解説】

 

 

【1.CSSによる画像部分のデザインカスタマイズ方法】

<※サンプル画像>

この章では①の画像部分のカスタマイズ方法について触れていきます。

①の画像部分をカスタマイズするには、
こちらの要素に対応する

———————————————————————————————————-
<img src=”${IMAGE_URL}”>
———————————————————————————————————-

こちらのCSS
———————————————————————————————————-

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

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

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

 

 

【2.画像のサイズをカスタマイズ方法】

画像のサイズを変更したい場合
こちらのCSSの「←★」で示された部分

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

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

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

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

例えば、widthとheightとに57pxに設定されていますが、これを

width:80px;
height:80px;

に変更してみます。

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

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

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

すると、

【変更前】

【変更後】

と表示された画像が拡大されたと思います。

以上が画像サイズの変更方法になります。

 

 

【3.画像の位置を変更する方法】

画像の位置はデフォルト状態で、「左寄せ、かつ余白を左右に入れた状態」となっています。

それを変更したい場合、
こちらのCSSの「←★」で示された部分

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

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

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

を変更することで、位置を移動させられます。

例えば、float:leftと設定されていますが、これを

float:right

に変更してみます。その際、画像の左(8px)右(12px)に入っている余白(margin)を

右(8px)左(12px)となるように調整してみます。

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

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

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

すると、

【変更前】

【変更後】

と画像の位置が左から右に移動したと思います。

以上が画像の位置のカスタマイズ方法になります。

 

 

【4.画像に枠線をカスタマイズ方法】

画像に枠線をつけたい場合
以下のように「←★」で示された「border:1px solid #000;」を追加してみてください。

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

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

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

すると、

【変更前】

【変更後】

borderの種類はsolid以外にもデザインの種類がありますので、色々と試してみてください。
枠線を太くしたければ、1pxを大きくしてください。

カラーも#000は黒色ですが、他の色も選べます。

以上が、枠線の設定の方法となります。

 

 

【4.画像を非表示にするカスタマイズ方法】

画像を消したい場合
以下のように「←★」で示された部分

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

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

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

を変更することで、広告画像部分を消すことができます。

例えば、display: block;と設定されていますが、これを

float:none;

に変更してみます。

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

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

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

すると、

【変更前】

【変更後】

このように画像を消すことができました。

ランキングや記事一覧、オススメ記事一覧などの部分で、
テキストだけで表示させたいときに有効です。
borderなど付けたりして、サイトに溶け込ませてりようしてみてください。

 
色々デザインを変更してみて楽しんでくださいね。
カスタマイズ方法に関する詳細方法はこちらもご覧ください。

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