【忍者AdMaxネイティブ広告】画像のカスタマイズ方法
いつも忍者ツールズをご利用いただき誠にありがとうございます。
このたびは、忍者AdMax「ネイティブ広告枠」で表示される≪画像部分≫の
CSSによるカスタマイズ方法をお伝えしたいと思います。
①画像部分のデザインカスタマイズ方法
②画像のサイズをカスタマイズ方法
③画像の位置を変更する方法
④画像に枠線をカスタマイズ方法
今回説明するコードとCSSはあくまで運営側による一例ですので、自分の好きなように変えて使っていただいて結構です。
こちらもご覧ください。
→【忍者AdMaxネイティブ広告：カスタマイズ用コードとそのCSSの解説】
【１．CSSによる画像部分のデザインカスタマイズ方法】
＜※サンプル画像＞
この章では①の画像部分のカスタマイズ方法について触れていきます。
①の画像部分をカスタマイズするには、
こちらの要素に対応する
———————————————————————————————————-
<img src=”${IMAGE_URL}”>
———————————————————————————————————-
こちらのCSS
———————————————————————————————————-
.admax-native a img {
float: left;
display: block;
width: 57px;
height: 57px;
margin: 0px 12px 0px 8px;
}
———————————————————————————————————-
を編集する必要があります。
【２．画像のサイズをカスタマイズ方法】
画像のサイズを変更したい場合
こちらの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;
}
———————————————————————————————————-
すると、
【変更前】
【変更後】
と表示された画像が拡大されたと思います。
以上が画像サイズの変更方法になります。
【３．画像の位置を変更する方法】
画像の位置はデフォルト状態で、「左寄せ、かつ余白を左右に入れた状態」となっています。
それを変更したい場合、
こちらの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;←★
}
———————————————————————————————————-
すると、
【変更前】
【変更後】
と画像の位置が左から右に移動したと思います。
以上が画像の位置のカスタマイズ方法になります。
【４．画像に枠線をカスタマイズ方法】
画像に枠線をつけたい場合
以下のように「←★」で示された「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は黒色ですが、他の色も選べます。
以上が、枠線の設定の方法となります。
【４．画像を非表示にするカスタマイズ方法】
画像を消したい場合
以下のように「←★」で示された部分
———————————————————————————————————-
.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]のカスタマイズ方法