Adawayを使用された際の空白を消す方法

広告除去アプリAdaway

私はAndroid端末を利用する際、必ず広告除去アプリのAdawayを導入しています。
自分自身こういう広告付きのブログを運営しているので、矛盾と言っちゃ矛盾しています。
いいです。正直言ってネットサーフィンをしている時に出てくるアドセンスはクッソ邪魔です。

今回紹介するのは、Adawayを使用された際にWebページに残ってしまう空白の消し方です。
「使用された際」というのは、Webページ作成者のためのコンテンツという意味です。
閲覧者が消す方法ではありません。紛らわしくてごめんなさい。

私はネットで広告を見る際の選択権があって良いと思っています。
また、アフィリエイト的観点から言っても「広告ブロックしている閲覧者は利益にならない」というのは間違っています。
広告画像をブロックしている人のユーザビリティを考えないのはもったいないことですよ。
反アフィ派にも優しいページづくりをしていきましょう。

スポンサーリンク

空白の例

以下はAdawayを使用した際に空白ができてしまうサイトの例です。

記事を読んでいる途中に真っ白な空白がでてきて「あれ？もうこの記事終わったの？」なんて錯覚に陥ります。
わざわざ指でスクロールするのも面倒くさいです。

Googleアドセンスの設定を変える

この空白は、Googleアドセンスが広告用の高さを設けているところで広告画像だけをブロックしてしまった際に生まれるものです。
ソースでいうとこの部分

style="display:inline-block;width:336px;height:280px"

これは広告コードを作る際の広告サイズの指定によって生成されます。
広告サイズを「レスポンシブ」に設定することで上記のソースはなくすことができます。
サイズ調整はアドセンス側で行うのではなく、自サイトのCSSで行えば良いですね。

CSSでサイズを調整する際に注意すべきなのは、height属性は指定してはいけないという点です。
height属性を設定すると結局空白が作られてしまうので本末転倒になります。
また、色々と試してみたのですがレスポンシブのアドセンス広告にはheight属性が効かないっぽい。

サイズ調整はwidthと形状の指定で調整していきましょう。
形状に関してはアドセンスのソースのこの部分

data-ad-format="auto"

のautoを
rectangle（長方形）、vertical（縦長）、horizontal（横長）のどれかに変更することで指定が可能となります。

変更後

Googleアドセンスの広告サイズをレスポンシブに変更するとAdawayを使用時の広告表示は以下のようになります。

隙間が詰まって先ほどよりもサイトの視認性が非常に良くなったと思います。

-IT
-Android, ブログ