読者です 読者をやめる 読者になる 読者になる

何でもない日常だから

幸せだと思う。

忍者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ページでも有効にしてくれるとありがたいですね。

 

スポンサーリンク