Google AdSenseの広告を記事内に挿入した際、広告の上部に表示されてしまうハイフン(-)を非表示にする方法を紹介します。
今回対応する事象は、以下の画像のように広告自体は正常に挿入されているが上部にハイフンが表示されている状態を指します。
解決策
<!-- -->を<ins>タグの中に書き加わえ、<ins>タグを<div>タグで囲みます。
<ins>タグ内に何も書かれていないことと、はてなブログの仕様で<ins>タグのみだと<p>タグで囲まれることにより、ハイフンが勝手に挿入されてしまうのだと思われます。
なので、空のコメント「<!-- -->」を<ins>タグに記述し、<div>タグで囲んで<p>タグとして認識させないようにすることで、ハイフンを表示させずに広告を掲載できることを確認しました。
<div> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="aa-bb-1234567890" data-ad-slot="1234567890"><!-- --></ins> </div>
※2022/10/31追記
この現象が発生するのは、編集モードを「見たまま」モードにしている時のみのようです。はてな記法等で編集する場合は、空のコメント「<!-- -->」を入れずにGoogle AdSenseからコピーしたコードをそのまま記述してください。空のコメントを記述すると逆に表示が崩れてしまいます。
