本ブログのWordPressテンプレートはStinger8を使用しております。
素人の私は、先人の皆様のブログ等を参考に試行錯誤しながらカスタマイズしています。
先日、Google Adsenseを本ブログに貼り付けた時の事、結構ハマって解決までに時間がかかってしまったので、同じようなお悩みがある方への参考になればと思い、また自分の備忘録として記事にしておきます。
アドセンス広告とラベル名の間に大きな余白が!?
皆様のブログ等を参考にアドセンス広告を挿入してみましたが、「スポンサーリンク」等のラベル名とアドセンス広告の間に何故か大きな余白が出てしまいました。
こうなるはずが…
こうなってしまう…(T_T)
この余白を消すために、素人なりにpaddingとかmarginとかを色々試してはうまくいかずの繰り返しで、 なかなか原因がつかめず結構時間がかかってしまいました。
アドセンスコード内に<br />コードが勝手に挿入されている
素人丸出しの私、最初からソースを確認すれば良かったのです。
ソースを確認したところ、 アドセンスのコードに<br />が複数挿入されているのを確認しました。
これが原因で余白ができてしまっていたようです。
犯人はテキストウィジェットだった
アドセンス広告を表示するために、たいていの説明ではテキストウィジェットを利用して貼り付けるとあり、 何の迷いもなくその通りにしていましたが原因はこのテキストウィジェットでした。
調べてみると、Wordpressの4.8あたりからこのテキストウィジェットの仕様が変わったらしく、勝手に<br />が挿入されてしまうようです。
これを防ぐためには、テキストウィジェットではなく、カスタムHTMLウィジェットを使用すれば良いとの事。 早速変更してみると、すっきりと余白は消えました。
ソースを確認しても余計なコードは挿入されていません。
めでたしめでたしです。
まとめ
アドセンスを貼り付けるウィジェットは、テキストウィジェットではなく、カスタムHTMLウィジェットを利用する事。
テキストウィジェットを利用すると、アドセンスコード内に<br />が挿入されて、意図しない余白ができてしまう。
アドセンスとラベルの間の余白に悩まれている方がいらっしゃったらお試しください。
しかし、素人はカスタマイズに時間がかかり過ぎてダメですね。