ジョー・ヒタギの止リ木 | 「ものづくり」や「ものなおし」をするブログ

色々なものを作ったり直したりするブログです。主な話題は日用品・電子機器・エアガンなど。

ジョー・ヒタギ の 止リ木

はてなブログでA8.netのバナー広告が表示されない時の対処法

f:id:Jo-Bitaki:20200222133041j:plain:h300

A8.net とはアフィリエイトASPの1種である。取り扱っている広告や案件がかなり多いのが特徴。
今回はA8.net のバナー(画像)広告が表示されない時の対処法をご紹介する。

不具合の内容

A8.net の広告のうち、下のようなバナータイプだけが表示されない。最初から表示されなかったわけではなく、以前は表示されていたものがいつのまにか消えていたのである。
何度か広告コードを貼りなおしてみても解決しなかった。

テキストリンク形式の広告は正常に表示される。
A8.netの公式ページ

対処法

こちらのサイトに書かれていた方法を試したらうまくいった。
www.itcfreelance.com

はてなブログの記事に「見たままモード」でA8.netの広告コードを貼り付けてからプレビューを表示するか記事を保存し、HTMLを確認すると広告コードが自動的に<p></p>で挟まれていることが分かる。
このpタグをcenterタグに置き換えるか、最初からコードにcenterタグを付加しておけばバナーが表示されるようになるとのこと。centerに限らずleftなどでも可。

ただし、以下のサイトによればcenterタグはHTML5で廃止されるため、使用はあまり推奨されないらしい。
そのため、代わりに<div style="text-align:center;"></div>を使うべきとのこと。
 出典:
 <center> - 中央揃え
 <div>-HTML5タグリファレンス
こちらの方法でもうまくいった。

私の場合、上記のようにコードを書き換えてから広告が表示されるようになるまで数分の時間を要した。
また、広告が表示されてからdivタグを再度スタイルシートなしのpタグに変えても広告は消えなかったため、本当にpタグが原因だったかは不明である。

なぜこれで直るのか?

不具合の原因や対処法の原理が気になったので調べてみたが、実のところよく分からなかった。

下のページには、「pタグの中に別のブロック要素を入れると挙動がおかしくなる」と書かれている。
 出典:DIVタグとPタグ
いわく、pタグは必ずしも</p>を使って閉じる必要はないため、pタグの中で別のブロック要素が始まると、そのpタグは終わったとブラウザにみなされることが原因らしい。

最初はこれが原因かと思ったが、広告コードに含まれるaタグとimgタグはどちらもインライン要素であり、ブロック要素ではない。
 出典:ブロックレベル要素とインライン要素-HTMLの基本
そのため、この話は関係ないと思われる。

また、以下のブログでは「はてなブログのテーマを変えたらバナーが表示されるようになった」と書かれている。 engawa3515.hatenablog.com

同様の不具合に関する情報が少なく、現象に再現性もないためこれ以上の究明は出来なかった。

おわりに

根本的な原因が分からないままなのが気持ち悪いが、ひとまず治ったのでよしとする。
同じ現象で困っている方がいたらこの方法を試していただきたい。