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

にちじょうみだれがき

役立ち情報から雑記まで幅広いジャンルを展開するブログ。

【Google AdSense】ラベルと広告ユニット間の隙間を修正して無くす方法

はてなブログで記事中にアドセンスを配置してみると「スポンサーリンク(ラベル)」と広告本体の間に隙間ができていることに気付きました。この隙間が気になるので以下のコードで修正して無くしました。

HTMLやCSSは初心者なので、間違っていることや非効率的なことを書いているかもしれませんが、ご了承ください。

修正前のアドセンスを貼った場合

記事中に貼ったアドセンスコード(修正前)

<p>スポンサーリンク</p>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="??????????????????"
     data-ad-slot="????????????"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

上記のコードでアドセンスを挿入すると、このような表示になります。
f:id:ChihaYuu:20141009204411j:plain

赤枠で囲っている部分がラベルと広告本体の隙間です。このままだと非常に見栄えが悪いです。これならラベルをつけないほうがいいですが、アドセンスの規約的にひっかかりそうなので対策。

隙間を無くす修正

記事中に貼ったアドセンスコード(修正版)

<p>スポンサーリンク</p>
<div class = "AdsPos">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- アドセンス -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="??????????????????"
     data-ad-slot="????????????"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

アドセンスのコードをHTMLのdiv要素で囲い、CSSで編集するためにdivにClassを与えます。
(ここではAdsPosというClass名にしました)

次に下記コードをブログ設定のheadに要素を追加に記述します。設定→詳細設定→headに要素を追加
headに要素を追加に記述することで、パソコン側だけでなくスマホ側も修正されます。もしかするとはてなブログProだけの機能だったかも・・・

<style>
  /*記事中アドセンス表示位置調整*/
  .AdsPos{
    position:relative;
    top:-17px;
  }
</style>

topの値を変更することで、ラベルと広告本体の隙間の微調整ができます。
これでラベルと広告本体の隙間はなくなりました
f:id:ChihaYuu:20141009210514j:plain

まとめ

ラベルと広告本体の隙間が気になって無くしたい方の参考になれば幸いです。もっと簡単な方法を知ってるよ!って方はぜひコメントお待ちしております。

まだまだHTMLとCSSはわからないので勉強頑張ります。