AdSense自動広告を設置した後に表示が崩れる場合のCSSカスタマイズ方法について説明します。
AdSenseに合格したらすぐに広告を張りたいですよね。
でも広告ユニットを作成して配置するのはそれなりに大変です。その点、自動広告なら挿入する場所はAdSenseが勝手に決めてくれますから簡単に設置できます。
ただ広告を勝手にあちこち挿入してくる分、表示が崩れることも多いです。表示崩れを防ぐCSS設定でデザインを整える方法をご紹介します。
AdSense自動広告のメリット
AdSenseでは自動広告という設定をすることができます。
挿入するコードを取得してブログのヘッダなどに貼り付けるだけで完了します。とても簡単です。
自動広告を使わないのであれば自分で広告ユニットを作成してブログ内のどの位置に広告を表示させるか考える必要があります。またPC版、タブレット版、スマホ版と表示を切り替えたりしなくてはならないケースもでてきます。
その際はデザインをよく考えて、サイドバーやスマホ画面から広告がはみ出すかどうかなどCSS設定を自分で調整する必要があり、初心者には難しい面があります。
その点AdSense自動広告ならすべてが全自動です。難しいことを考えることなく広告コードを貼るだけで済みます。あとはAI（機械学習）がすべて面倒を見てくれます。
はるなぴもAdSense合格直後にすぐに自動広告のコードを取得して、はてなブログに貼り付けしました。手っ取り早いですからね。AdSense自動広告の大きなメリットだと思います。
広告挿入により表示崩れが発生しデザインがおかしくなった
ところがです。AdSense広告の挿入によりブログのデザインが崩れる事態となってしまいました。具体的にはサイドバーに表示された広告とサムネイル画像が近すぎておかしな表示になりました。
また記事内に挿入された広告は本文と近く配置されてしまい読みにくくなったところが出てしまいました。
しばらくそのまま放置していたのですが、やっぱりこのままのデザインではまずいと思いCSS設定を見直しすることにしました。
表示が崩れるのを防ぐCSSカスタマイズ
表示の崩れたところを見ると上下のマージンが狭すぎることに気づきました。
記事本文やサイドバーのサムネイル画像と広告との間隔が近すぎて広告が邪魔な感じになっているのです。
記事本文も読みにくいです。
マージン設定を追加する
マージン設定を追加して記事本文に自動広告が干渉しないようにします。
p {
margin-top: 1rem;
}通常マージンは下側で取るようにしているケースが多いと思います。これはマージンの相殺があるからです。
CSSでは別々の要素のマージンが重なりあうと相殺が発生するケースがたくさんあります。相殺が発生する場合、しない場合の条件もかなり複雑です。なのでマージンはどのような場合も下側で取ると決めておけば計算が狂うことがありません。
しかしAdSense自動広告の挿入はどこで発生するか予測はできません。ですのでp要素にはあらかじめ上側マージンを設定しておきます。
こうしておけば記事本文内にAdSense自動広告が挿入されても本文と広告が接近し過ぎて読みにくいという事態を防ぐことができます。
他の要素についてもp要素と同様に記事内にあってAdSense自動広告と被る恐れがあるのであればトップマージンを設定すると良いと思います。
はるなぴは2019年4月現在、はてなブログでInnocentテーマを使用していますが、p要素のトップマージン追加だけで記事内に挿入されたAdSense自動広告はうまく本文記事と離れて表示ができています。
CSSの設定追加についてはDropboxを使用して外部ファイルをリンクする方法がお勧めです。詳しくはこちらの記事をご参照ください。はてなブログ前提で書いていますが他のブログシステムでもhead内の書き換えができれば同様のことができる筈です。
サイドバーへのAdSense自動広告の挿入
AdSense自動広告はサイドバーなどにもどんどん自動広告を挿入してきます。
こちらも基本的には記事内のCSSと同じく要素の上下にマージン設定をすれば、サムネイル画像などとの距離が近すぎて見にくいということは防ぐことができます。
はるなぴの場合はInnocentテーマをはてなブログで使用していますので、以下のようにpaddingを下側に設定することでサムネイル画像との近接度があがらないよう設定しています。
.urllist-with-thumbnails li .urllist-image {
margin: 0 20px 10px 0
}他のブログシステムでも同様にpaddingやmarginを調整することで広告が近寄り過ぎてしまうことを防ぐことができると思います。
デベロッパーツールでCSSを確認する
どのような要素があるのか、現在のCSS設定はどうなっているのか、調べたかったらChromeブラウザのデベロッパーツールを使うのがお勧めです。
もうよく使うのでショートカットキーも覚えてしまいましょう。コントロールキーとシフトキーを左手の指で同時押ししながら右手でI（アイ）のキーを押します。
これでデベロッパーツールの画面が開きますので、後は目的の箇所を選択していけば使われているCSSを調べることができます。
Chrome拡張機能で表示崩れのCSSを確認する
更に便利なツールを紹介します。
Chromeブラウザの拡張機能のCSS Viewer（CSSビューワー）です。表示崩れの起こっている箇所にどんなCSS設定がされているのか知りたい場所にカーソルを当てるだけでCSSの設定内容をウィンドウに表示してくれます。
こちらの記事で紹介していますのでリンクを辿ってみてください。
まとめ
AdSenseの自動広告は簡単に導入することができるので合格後とりあえず設定してみるのにお勧めです。
デザインが崩れることを防げればこんなにお手軽な広告設定はありません。広告配置の最適化は少し落ち着いたら手を出してみてはいかがでしょうか。広告ユニットの配置についてはまた別の記事で書いてみたいと思いますのでお楽しみに！
AdSense自動広告は今は残念な面も少々ありますが、機械学習の能力はどんどん進化していますので、今後は導入できる機会が増えてくるのではないかと思っています。
