ブログを運営されている方の多くは、Google AdSense等の広告を使われている方が多いと思います。
私は、忍者Admaxの広告を利用しているのですが、
その広告の表示位置がおかしくなりました💦
※忍者Admaxが原因ではありません。
ググってみましたが、
GoogleAdSenseの自動広告設定により予期しない位置での広告表示についてはいくつも情報が出てくるものの、
私の状況に該当するものが見つかりませんでした。
今回の内容は、どの広告を使っていても起こり得る事象です。
発生事象とその解決方法について記載します。
発生事象
今までは、「スポンサーリンク」の文字のすぐ後ろに広告画像が表示されていましたが、
「スポンサーリンク」の文字位置は意図した場所にあるものの、
広告画像が画面下部に集まって表示されるようになってしまいました。
※クリックすると拡大できます。
| 正常時 | 異常時 |
|---|---|
 |
 |
事象発生前後の操作
表示がおかしくなる直前に何をしたのかを遡ってみました。
PageSpeed Insightsを使って、Webサイトの表示スピードを計測し、改善しようとしたり、
サイトマップ作成のためにいろいろなプラグインを入れてみたりしていました。
HTML確認方法
まずは、表示されているページで、HTMLがどのようになっているか確認します。
ブラウザがchromeの場合
HTML確認手順(chrome)
①確認したいページで右クリックする。
②「検証」をクリックする。
③検証画面左上の「Select an element in the page to inspect it」をクリックする。
④確認したい箇所（今回は「スポンサーリンク」の文字と広告画像）をマウスオーバーし、要素の情報を確認する。
ブラウザがEdgeの場合
HTML確認手順(Edge)
①確認したいページで右クリックする。
②「要素の検査」をクリックする。
③検証画面左上の「要素の選択」をクリックする。
④確認したい箇所（今回は「スポンサーリンク」の文字と広告画像）をマウスオーバーし、要素の情報を確認する。
HTML確認結果
上述の方法で確認したHTMLは以下でした。
＜div class="ad-wrap"＞
＜div class="ad-responsive ad-usual"＞
＜!-- admax --＞
＜!-- admax --＞
＜/div＞
＜/div＞
Cocoonの広告設定の広告コード欄にAdmaxのコードを入れています。
確認したHTMLでは、＜!– admax –＞＜!– admax –＞で囲まれたスクリプト<script>～</script>が表示されていないことがわかります。
つまり、スクリプト（JavaScript）に影響のある何かをしたことがわかりました。
原因確認
PageSpeed Insightsを使って、Webサイトの表示スピードを速めようと、
JavaScriptの圧縮などをしていました。
それが原因だと考え、関係しそうな設定を1つ1つ確認してみました。
Cocoonの高速化
管理画面からCocoon＞サイト高速化の順に確認します。
JavaScript縮小化のチェックがOFFになっており、
この設定が原因ではないことがわかりました。
Jetpackのパフォーマンス
管理画面からJetpackを開いて確認します。
設定＞パフォーマンスタブの中のパフォーマンスおよびスピード欄に
JavaScriptの文字があります。
この設定はONになっていますので、一度OFFにして影響を確認します。
結果、この項目を変更しても、画像ファイルの位置は元には戻らず、影響がないことが確認できました。
Jetpack Boost
Jetpack Boostのプラグインを使い、Lazy Image Loadingの設定をしていたことから、JavaScriptの高速化設定もしていた可能性を考え、開いてみました。
管理画面からJetpack Boostを開きます。
Defer Non-Essential Javascriptの設定がONになっていましたので、一度OFFにして影響を確認します。
結果、
まとめ
次のことは絶対やりましょう！！
大事だとわかっていながら、めんどくさくてやらないまま作業をしてしまうこともあると思います。
ですが、これらをやらずに何かあったときのトラブル解析・修正時間は、
やった上でのトラブル解析・修正時間よりも圧倒的に長くなってしまいます。
それを考えてやる癖を付けましょう！！
（自分への戒めです💦）
