［ま］【10/14追記事】Googleアドセンス広告と「スポンサーリンク」の表示の隙間をなくす方法について @kun_maa

昨日（2014年10月14日）、次のような記事を書きました。

HTMLとかCSSとか全然わかってないくせに書いたので、もっと簡単にできるいい方法があるよってアドバイスをいただきました。 

［ま］ブログの広告と「スポンサーリンク」の表示の隙間が気になるとお嘆きの貴兄に／その行間はすぐ消せます @kun_maa - ［ま］ぷるんにー！（พรุ่งนี้）

何回かTwitterでやり取りをして、CSSを書かなくても簡単にできる方法を教えてもらったので昨日の追記事として書きます。

アドバイスをいただいたのは @delaymania さんと @Gaku0318 さんからです。

この余白はpタグのmarginのせいなので、pじゃなくてdivにしたらCSS書かなくても解決しますよ！元の方法がおすすめできないのであまり広まって欲しくない…。 / “［ま］ブログの広告と「スポンサーリンク」の表示の隙間が気になる…” http://t.co/Gun21q0qAH

— 大谷大 (@delaymania) 2014年10月14日

@kun_maa 僕なら全体をdivで囲んで、その中にpタグで囲んだスポンサーリンク、その下にアドセンスのコードを貼ります。
pとdivの両方ともにclassを付けてあげて、フォントサイズやマージンを一括で変更できるようにしてあげると管理が楽になりますよ。

— 安田 学 / TAM inc. (@Gaku0318) 2014年10月14日

結果的に、僕の知識不足から @Gaku0318 さんのアドバイスの方はちょっと勉強してから今後の課題としました。せっかくアドバイスいただいたのにすいません。マジでちょっとCSSとかどういうものかくらい知らないとダメだなあって思いました。

結局 @delaymania さんのアドバイスを取り入れることにしたのですが、やはり僕がまったくHTMLのことをわかっていないために、いろいろ勘違いをして「うまくいきません！Help Me！」って何度もTwitterで助けを求めてしまいました。そのたびに、イヤな顔ひとつせず親切に教えていただいたのでとても助かりました。

そして、こちらが最終的に出来上がったコードです。全体をdivで囲い、<p>で囲っていたスポンサーリンクもdivで囲います。それだけ。

<div>

<div class="ads-sponsored"><span style="font-size: 70%;">スポンサーリンク</span></div> 

<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> 

この形でGoogleアドセンスを貼付ければ、CSSはなにもいじらなくても広告と「スポンサーリンク」の表示の間に空間は出来ません。

実際の形はこうなります。

スポンサーリンク

うまくいきました。こうやって書くと簡単なんですけど基礎知識が全くなしの状態でやっているので、けっこう試行錯誤しました。先ほども書きましたが、たったこれだけのことをやるのにも  @delaymania さんに助けてもらってやっとです。

はてなブログは、なにも知識がなくても「見たまま編集」で書けちゃうので、今までまったくHTMLの基礎を知ろうともしませんでしたが、今回のようなことがあると少しは勉強して基礎知識くらいは持ってないと話にならんなって思いました。

ということで、知っていれば昨日ご紹介した方法よりもサクッと広告とスポンサーリンクの表示の隙間を埋められますので、こちらの方法をおすすめします。

スポンサーリンク

このブログを気に入っていただけたら、ちょくちょくのぞきに来ていただけるとうれしいです。そして、とっても励みになります。

RSS登録していただける方はこちらのボタンをご利用ください。