先日、このブログに掲載しているGoogleアドセンス広告に「スポンサーリンク」というラベルを表示することにしたという記事を書きました。
［ま］Googleアドセンス広告の上に「スポンサーリンク」の表示を付けることにしました @kun_maa - ［ま］ぷるんにー！（พรุ่งนี้）
その時の表示のやり方については、さっぱりわからないので、とりあえずブログで教えてもらったとおりに<p>スポンサーリンク</p>という書き方をしましたが、これだけだと広告と「スポンサーリンク」っていう表示の間に隙間が空いちゃうんですよね。
具体的には、次のように書いていました。ちなみに「スポンサーリンク」の文字が本文と同じ大きさなのはイヤだったので、70%のサイズに指定しています。
<p><span style="font-size: 70%;">スポンサーリンク</span></p><script type="text/javascript"><!--google_ad_client = "ca-pub-××××××";/* 最新 */google_ad_slot = "××××××";google_ad_width = 300;google_ad_height = 250;//--></script><script type="text/javascript"src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>
そしてこれが、上のとおりに書いた場合に実際表示される広告です。広告と「スポンサーリンク」の表示の間に隙間が空いていますよね。
スポンサーリンク
この隙間については、記事を書いた時にいただいた「はてなブックマーク」のコメントで、「<p>タグを使うと文字とバナーの行間が空いてしまうので<br>を使うといいよ」っていうアドバイスをいただいていたのですが、僕は本当にHTMLとかさっぱりわかっていないので、実際にどうやったらいいのかわからなくて、少しくらい隙間が空いていてもいいや！って投げ出していました。
ところが、いいタイミングでいい記事を書いてくれる人がいるもので、僕が毎日購読しているブログのひとつ「にちじょうみだれがき」（id:ChihaYuu）で、僕が記事を書いた翌日に次のような記事を書いてくれました。
アドセンスを記事中に貼るとラベルと広告とユニットの間に空白が！気になるので修正してみた - にちじょうみだれがき
まさに、僕のために書いてくれたような内容です。
早速、試してみました。その内容は引用すると次のようなことなのですが、未だに意味はわかっていません。ただ、コードの記入例を載せてくれていたので、それを真似しただけです。お恥ずかしい限り。
アドセンスコードをdiv要素で囲みます。Classも付けておきます。
PCだけでなくスマホの方も改善したいので、headの要素に下記のコードを追加します。設定→詳細設定→headに要素を追記
いま読んでみてもさっぱりわかりませぬ。うぐぐ〜(꒪⌓꒪)〜
でも、設定→詳細設定→headに要素を追記っていうのが「はてなブログ」のメニューだってことはわかったので、記事に書いてあるとおりに丸写しして追加しただけです。
それがこのコード。意味は僕に聞かないでください。
<style>
/*記事中アドセンス表示位置調整*/
.AdsPos{
position:relative;
top:-17px;
}
</style>
実は、最初にアドセンスコードをdiv要素で囲んだだけで、このheadに入れるコードを記入しなかったんです。そうしたら、ラベルの位置がまったく変わらなくて、隙間が空いちゃったんですよね。あれ？直ってないじゃんて。
だから、意味はわからないけどとにかく両方に手を加えないといけないのです。
そして、アドセンスコードをdiv要素で囲んだのがこちらのコードです。
<p><span style="font-size: 70%;">スポンサーリンク</span></p><div class = "AdsPos"><script type="text/javascript"><!--google_ad_client = "ca-pub-××××××";/* 最新 */google_ad_slot = "×××××";google_ad_width = 300;google_ad_height = 250;//--></script><script type="text/javascript"src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script></div>
ちゃんとheadにも追記済です。そうすると実際の表示は次のような状態になります。
とまあ、自分ではまったく理解していないので説明しろと言われてもできませんが、とにかく隙間が埋まればいいのです。
同じように、はてなブログでブログを書いていて、広告と「スポンサーリンク」の隙間が気になるという人は、とりあえずこのとおりやってみると即解決すると思います。
もうね、こうなると理解する前に動け！って世界ですね。それでうまくいってしまうなんてインターネッツはすばらしいぜ。
ちはゆう（id:ChihaYuu）さん、どうもありがとうございました。
追記があります。こちらの方がCSSに手を加えなくてサクッとできます↓
https://kun-maa.hateblo.jp/entry/2014/10/15/070000
このブログを気に入っていただけたら、下のボタンからシェアしていただいたり、はてなブックマークなどしていただけると、とっても励みになります。
また、RSS登録していただける方はこちらのボタンをご利用ください。
