AdSenseが勝手にインラインでStyleを適用してくる問題
こんばんは~Azusaです。
AdSenseを有効にするとページの構成が崩れる場合がある
当サイトではテーマを自作していて、基本的に画面に合わせてサイズを調整するレスポンシブなデザインを採用しています。
ですが、AdSenseを有効にすると、AdSenseのスクリプトが勝手に親要素にインラインスタイルを適用してきて、表示が崩れることに気が付きました。
当サイトの場合では、ヘッダー・コンテンツ・フッターの三段に積み上げた感じのデザインを採用しており、ヘッダーは一番上に張り付くように、コンテンツを表示した下にフッター(ただし、コンテンツ量が少なく、フッターが画面下より上に来る場合はフッターが画面下に張り付くようにコンテンツ領域を調整)という構成です。
この”ただし~“という赤字で書いた部分が重要で、スタイルシートにてコンテンツ領域の最低の高さを”min-height”を計算することによって調整しています。
しかし上記で書いたように、AdSenseが表示された場合はコンテンツ領域の”min-height”が無視されて下に余白ができてしまう状態でした。
原因
その原因としては、AdSenseのスクリプトがAdSenseが表示されている大本の要素に”style=’height: auto !important; min-height: auto !important;”という属性を勝手に挿入してくるからです。
当ブログの場合は、コンテンツ領域をラップしているdiv要素にその属性がインラインで追加されていた上に”!important”まで付いているため、CSSからではどうすることもできずに表示が上に詰まってしまうという事が起きていました。
対策
さて、じゃあどうするかということですが、ネットの海を漂っていたら見つけました!
海外の方のブログ記事(英語)ですが簡単に言うと、「同じようにAdSenseを表示させるとレイアウトが崩れるけど、このスクリプトを使ったら今のところは大丈夫だよ!」みたいな感じです。
そこではJavaScriptのコードを紹介してくれていたのですが、とりあえず丸パクリして貼り付けてみるもうまく動かない…。
何かコードが間違っているのかと、リファレンスを読み解きながら自分なりにわかりやすいように書き直してみるも変わらない。
結論としてはページの上部に挿入したのがだめだったみたいで、ページができる限り読み込まれてからスクリプトが実行されてくれる必要がありました。
ですので、テーマに急遽最下部にコードが挿入されるようにオプションを追加して動かすと…ちゃんと動きました!
自分なりに書き直したので少し長くなってしまいましたが、理解しやすいとは思うので書き直したコードを掲載しますね。
<script>
var target = document.getElementById('main');
function callback(mutations, observer){
target.style.height = "";
target.style.minHeight = "";
}
const config = {
attributes: true,
attributeFilter: ['style']
};
const mo = new MutationObserver(callback);
mo.observe(target, config);
</script>
このままテーマ内に書き込むなりして動かすこともできますし、<script></script>を取り除いて、別ファイルとして、
<script src="/file.js"></script>
上記のように読み込むこともできます。
コードではIDに”main”が設定された要素を監視して、Style属性に変化があれば”height”と”min-height”を空欄にするという処理をしています。
“getElementById()”を”getElementsByClassName()[n]”にしたりしても同様に動作しますので、何かのスクリプトが余計な動作をしてページを改変されるのに困っている場合などにも使えそうですね。
注意点としては、できる限りページの最後に読み込まれるようにすることです。
自作テーマじゃないから任意の場所にコードを挿入できない!という場合などは、少し遅延処理等を挟んでみると動くかもしれません。
それか最終手段として、カスタムHTMLで記事の本文の一番下に埋め込んでみるとか…?
毎回埋め込むのもダルそうではありますが、最終手段としてなので…笑
というわけで、今回は自作テーマ用関数から少し脱線して、AdSenseが挿入してくるスタイルについてと対策でした。
ではまた~♪