忍者Admax サイドバー編
前回の記事
では、はてなブログのスマホページに忍者Admaxのネイティブ広告を設定しましたが、今回はサイドバーに挿入します。
サイドバーに挿入という事で今回はレスポンシブデザインのページで使用します。
うまく馴染ませる為に人気記事の下に挿入します。
サイドバーのモジュールを追加から「HTML」を使用。
タイトルは空欄のままで忍者Admaxのコードを貼り付けます。
これでま~なんとなく表示されると思います。
参考までに自分の編集コードを張ります
<a href="${CLICK_URL}" target="_blank" style="box-sizing:border-box;display:table;table-layout:fixed;width:100%;padding:25px 0px 7px 0px;border-top: solid 0.5px #dddddd;">
<div style="display:table-cell;width:60px;height:60px; background-image:url('${IMAGE_URL}');background-repeat:no-repeat;background-position:50% 50%;background-size:cover;">
今回はpaddingで4方のスペースを調整、人気記事のサムネイルを60×60に設定しているのであわせています。そして今回も上方向だけボーダー。これでOKだと思います。後は自分の環境、設定であわせてください
但し、ここで問題がおきました。
ネイティブ広告はスマホ用の広告です。それでも、このままではPCページにも表示されます。
表示されるだけならある意味ラッキーなのですが、表示される広告はAdmaxの広告のみ。
どうやらPCページでは表示はされるけれど、報酬は発生しなっぽいです。
広告を使わせてもらっているので、それくらいはサービスしようと思う方もいる?かもしれませんが、やっぱり都合が悪いです。
という事でPCページには表示しないように設定
<style type="text/css"><!--
@media only screen and (min-width: 460px)
{
.none {display:none}
}
--></style>
<div class="none">忍者Admaxのコード
</div>
</div>
最小サイズ460以上のページでは表示しないように設定しています。
タブレットの扱いがよくわからないですが、ま~これで個人的には満足です。
ただ、こういう事は忍者側で対応してくれるか、PCページでも有効にしてくれるとありがたいですね。