本ブログは、i-mobileを導入していただくメディア様向けのサポートブログです。
「インフィード広告」のCSSを使ったカスタマイズ方法をお伝えします。
第3弾は「色々なアイコンのカスタマイズ」方法についてご紹介致します。
今まではリサイズ方法についてご紹介してきましたが、
今回はアイコン画像を色々とカスタマイズして参ります。
メニューとしては、下記3点の方法をご紹介致します。
■カスタマイズメニュー
1：画像に枠線を追加
2：画像の形を角丸に変更
3：長方形サイズにリサイズした際、足りない横幅の補足方法
■画像に枠線を追加
【CSS】
.imobile_infeed_img_container{
border:1px solid #000000;
}
【カスタマイズ前】
【カスタマイズ後】
黒色の枠線がアイコン画像の周りに追加されたのがわかるかと思います。
枠線に関しては、それぞれの着色した部分を変更することで、
更にバリエーションを付け加えることが可能です。
・赤字(1px )
赤字の数値を変更することで、線の太さを変更することができます。
・緑字(solid)
緑字の言葉を変更することで、線の種類を変更することができます。
変更できる種類に関しては、コチラのサイト様をご参考下さい。
(※外部ページに飛びますのでご注意下さい）
・ピンク字(#000000)
ピンク色の文字を変更することで、枠線の色を変更することができます。
#を含めて7文字の英数字はカラーコードと呼ばれています。
カラーコードの一覧に関しては、コチラのサイト様をご参考下さい。
(※外部ページに飛びますのでご注意下さい）
■画像の形を角丸に変更
【CSS】
.imobile_infeed_img_18{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
※スマートフォンの場合は、.imobile_infeed_img_19
【カスタマイズ後】
画像の角が丸くなったことが確認できるかと思います。
赤字の数値が大きくなればなるほど、画像アイコンが丸に近くなっていきますので、
設置場所近くのコンテンツの画像の形に併せて数値を調整して頂ければと存じます。
なお、デフォルトのアイコンサイズ(57px×57px)ですと、
赤字の数値を30に設定したらほぼ円に近い形で表示することが可能です。
【赤字を30にしたインフィード広告】
■長方形サイズにリサイズした際、足りない横幅の補足方法
インフィード広告の設置場所によっては、
画像アイコンを長方形にリサイズしたい場合も出てくるかと思います。
しかしながら、正方形の画像を長方形にリサイズしてしまうと、
横に引き伸ばされて表示されてしまうため、見栄えがあまりよくありません。
【単純に長方形にリサイズした場合】
対策としては、不足している横幅のサイズを単色のスペースで補足する方法が挙げられます。
【CSS(75px×55pxにリサイズする場合)】
.imobile_infeed_img_container{
background-color:#000;
padding:0px 10px 0px 10px !important;
width:55px !important;
height:55px !important;
}
.imobile_infeed_img_18{
width:55px !important;
height:55px !important;
}
※スマートフォンの場合は、.imobile_infeed_img_19
【カスタマイズ後】
単色スペースの色を変更したい場合は緑字のカラーコードを、
単色スペースの大きさを変更したい場合は赤字を、
画像自体の大きさを変更したい場合に関しては青字を調整してください。
アイコン画像を設置場所近くのコンテンツの仕様に近づけるだけで、
ネイティブ広告らしさがグッと上がりますので、ぜひお試し下さい！
次回は、「画像を使用せずにPRアイコンをテキストの前後に設置する方法」をご紹介致します。
