【WordPress】アドセンス広告を綺麗にレスポンシブに対応させる方法

2017年1月19日2017年6月19日

ワードプレスのブログでアドセンス広告をレスポンシブ表示させたいけど、スマホだとはみ出して横スクロールしちゃったり、パソコンだと横長のバナータイプになったり小さかったり。

そんな問題が簡単に片付く方法。

アドセンス広告をレスポンシブに

アドセンス広告には元からレスポンシブに対応した広告があるからそれを使うのが便利。スマホだと横スクロールしないように勝手にはみ出さない「レクタングル中」とか「レクタングル大」のサイズにしてくれる。

ただレスポンシブ広告は横幅が広いPCサイトになると横長バナーが表示されちゃうことが多い。

それを防ぐためにアドセンス広告を適当なdivタグで囲って最大横幅を336pxに指定しておくと、PCでもちゃんと四角いレクタングル大が表示されるよ。

PHPファイルにアドセンスコードを記述してdivで囲む

<div class="adosensu">
自分のアドセンス広告のコード
</div>

スタイルシート(style.css)に記述

.adosensu {max-width: 336px;}

こんな感じで記述する。クラス名は他と被らなければなんでもOK。

強制的に横スクロール禁止

最悪一番外側の要素に{overflow: hidden;}つけとけば横スクロールするのは防げる。

けどこれじゃはみ出た広告とかが途切れるから気持ち悪い。

レスポンシブ対応は必須

もうほとんどの人がスマホでググってサイトを見る状態だから、スマホビューでの見やすさ、キレイさを最重要視するべき。

なのにアドセンス広告が少し大きくて変に横スクロールするサイトはまだまだたくさんある。

普通に下にスクロールしようと思ったら少し斜めにフリックしちゃって、画面が横に「グイッ」てなるだけで全然下に進めない。イラッ。

そうならないためにもコンテンツは枠をはみ出さないサイズで配置しておくかレスポンシブに対応させて収まるようにしておきたい。