となりのたしまさん。

日本人なのに日本語を勉強中。20代青年による日本紹介サイト。外国人に「日本のすばらしさ」を伝えるべく「日本」ついてはもちろん、海外の情報もたくさんアップしていきます。「少子高齢化」がすすんでいる日本。外国からの労働力がますます必要になってきています。外国の方々に「日本を好きになってもらえるように」。そんなことを意識して、ぼちぼち更新していきます。今年の目標も、「変わらないこと」。そのために「変わり続けること」。みなさん楽しみましょう、今回の人生。

となりのたしまさん。

どうやったら消せるの?「グーグルアドセンス」の広告の上に表示される黒い線。

f:id:yutonsmaile:20210921154852j:plain

 

自分のブログ/サイトにGoogleが提供している広告配信サービス

Google AdSenseを貼っている方も多いかと思います。

 

今回は

"記事内にアドセンスの広告を貼った際、

「小さい黒い線」も広告といっしょに表示されてしまう"

という問題の解決方法をお伝えします。

とても簡単です。

 

私が使っているブログサービス:はてなブログ

使用した広告:Google AdSense

問題:記事内にアドセンスの記事内広告を貼った際、

   広告の上に小さい黒い線もいっしょに表示される

 

※私はアドセンス広告を貼った際に、上記のような問題が生じましたが、他の広告を貼った際にも似たような問題が発生する可能性もあると思います。

「アドセンス広告」を利用した方に限らず、他の広告を利用した方も同様、

この記事を読んで、問題解決に繋がれば嬉しいです。

 

 

 

問題はこのような感じです。

広告の上に「-」が表示されます。

f:id:yutonsmaile:20210921155003j:plain

 

では、

どうやったら消せるのか。

<!-- --> 
この文字を広告コードにつけ加えるだけです。
この文字を
【記事内広告の広告コード】

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-〇〇"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-〇〇"
data-ad-slot="〇〇"><!-- --></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

上記のようにins要素(</ins>の前)の箇所に加えてください。
なお、<!-- -->は「--」と「--」の間にスペースを空けてください。
<!-- -->を加えた状態で記事に貼ると、
 
「黒い線」は表示されず、広告のみ表示されます。
 
ちなみに余談ですが、
<!-- -->のHTMLタグはコメント(注釈)するためのものです。
<!-- -->で囲まれた部分はブラウザには表示されません。
 ソースコード内の目印にしたり、
一時的にコンテンツの一部を非表示にしたり、
タグを無効にしたりする際に使います。
 
 
みなさんに少しでもお役に立てたら幸いです。
今回もご覧いただきありがとうございました!