お疲れ様です、tosh01です。
久々ですが、今回はnendよりアイコン型広告JavaScript版が先月公開されましたので、詳細な記事を書かせていただきます。
※ニュースリリースは下記参照。 日本最大級のスマートフォン向け運用型アドネットワーク「nend」 アイコン型広告のJavaScript版配布開始 2014年3月19日から
このJavaScript版ですが、既存のバナータイプのnend広告同様WebViewを用いることでアプリ内にも表示可能です。既存の320x50pxのバナー広告を踏襲し横幅320pxを基準に設計されており、好きな幅に配置したい場合はアイコン個数を調整していただくか、CSS等で各広告の間隔を調整していただく必要があります。
※WebViewを用いた広告タグでのアプリ内nend広告表示は下記参考。 AndroidアプリでnendSDKが使えなくてもnend広告を表示する方法 iOSアプリでnendSDKが使えなくてもnend広告を表示する方法
具体的には
アイコン広告のHTML構成の仕様として、各広告枠ごとにユニークなidをもつdivタグ内にul要素として下記のように各HTMLタグごとidを保持しています。 ※アイコン用テスト広告タグ media":82,"site":58536,"spot":151389の場合
[html] <div id="nend_adspace_58536_151389"> <ul id="nend_icon_list_58536_151389"> <li id="nend_icon_58536_151389_0"><!-- 一つ目のアイコンの場合末尾{_0} --> <a> <img> <br> <span id="nend_icon_title_58536_151389_0"></span> </a> </li> </ul> </div> [/html]
サンプル
様々な幅に広告を表示する一例として上記広告枠を用い、130px幅に広告を4つ2段に表示させた場合のサンプルCSSを下記に記させていただきます。
[html] <style type="text/css">
nend_adspace_58536_151389 span
{ text-shadow: 1px 1px 3px #FFF;margin-bottom:3px !important; }
nend_adspace_58536_151389 img
{ margin-right:7.5px !important;margin-left:7.5px !important; } </style> [/html] 50pxのアイコン画像に7.5pxのマージンを左右に持たせています。
下記使用広告タグ
[html] <script type="text/javascript"> var nend_params = {"media":82,"site":58536,"spot":151389,"type":1,"oriented":1,"ad_num":4,"space":1,"align":1,"tdisplay":1,"tcolor":"%23FFFFFF","width":50,"height":50}; </script> <script type="text/javascript" src="">http://js1.nend.net/js/nendAdLoader.js"> [/html]
上記のようにCSSを調整していただくことで、様々な表示上の調整が可能になっているのですが、以下の詳細仕様にも目を通していただくことでさらに調整がわかりやすくなるかもしれませんのでご確認ください。
詳説1 アイコン型広告枠においては管理画面、広告コード取得ページよりアイコン広告のサイズを38px、58px、50pxから選択可能となっていますが、アイコン型広告枠における広告タグにあるnend_params内にはwidth、heightというパラメータがあり、この値をそれぞれ38pxから114pxの間までで変更することによりそのアイコンサイズに設定することができたりします。 (各表示アイコンのサイズをばらばらにしたい、なんて素敵な方はCSSの方からサイズを調節して下さい)
詳説2 同じくアイコン型広告枠においては広告コード取得ページより広告間隔の有無が設定できるのですが、広告間隔を持たせる場合、その間隔幅の算出方法は、広告の配置を中央にしているか、もしくは右か左にしている場合で異なります。
具体的には、広告の配置が中央の場合は320px幅に等間隔で広告が並ぶように、配置が右か左のときはアイコンのサイズから一定の比率で間隔が設定されますが320px以上にならないよう、補正がかかります。
詳説3 アイコンの下にタイトルを表示させている場合、タイトルのテキストサイズはこれまた、アイコンのサイズに依存します。固定されたい場合はCSSにて、サイズを調整ください。
最後に お読みいただきありがとうございます。