グーグルアドセンス広告のデザインをcssで可愛くする：基本編

グーグルアドセンス広告のデザインをcssでいじる

グーグルアドセンスというグーグルのサービスを利用すると自身のブログに広告を貼り付けて収益を上げることができます。

このグーグルアドセンスで貼り付ける広告ユニットをcssで可愛くデザインしてみようと思います。

今回の記事では広告ユニットのデザインを可愛くする基本編として、とりあえずちゃんと見えるように下ごしらえをしていきます。

広告ユニットはただ貼り付けるだけだとかなり違和感が出てしまいます。今回する設定をするだけでもぐっとサイトに馴染みますので、ぜひ試してみてください。

1. グーグルアドセンス広告のデザインをcssでいじる
2. 何もしていない広告ユニット
3. ①ウィンドウのサイズを変えたときに広告がはみ出す
4. ②広告ユニットの下に謎の余白がある
5. ③広告ユニットをセンタリングしたい
6. グーグルアドセンス広告をcssでいじる

何もしていない広告ユニット

まずはグーグルアドセンスから得られる広告ユニットをなにもしないで貼り付けてみます。するとこんな風に見えていると思います。今回は広告ユニットの中でもラージモバイルバナー（320×100）を例にとっています。

■の部分を広告ユニットとしてみてください。

とりあえず広告が表示はされていますが、以下の3点が気になります。

1. ウィンドウのサイズを変えたときに広告がはみ出す
2. 広告ユニットの下に謎の余白がある
3. 広告ユニットをセンタリングしたい

今回の記事では下ごしらえとしてこの3つを修正していきたいと思います。

広告ユニットの背景が黄色になる人は

reset.cssを読み込んでている場合等cssの設定によっては広告ユニットの背景が黄色になる場合があります。この時はcssに

ins{
background-color: transparent;
}

を設定してください。背景色を初期値のtransparentに設定しなおします。

①ウィンドウのサイズを変えたときに広告がはみ出す

アドセンスの広告ユニットが可変長になっていないので起こっています。レスポンシブに対応した可変の広告ユニットもあるのですが、今回はいつもの固定長の広告ユニットを使っていますので、その対策となります。

まず広告ユニットをdiv等のタグで囲んでください。そしてこのタグにoverflow:hiddenを設定してください。このoverflow:hiddenはその親要素（今回の場合はdiv）から子要素（広告ユニット）がはみ出た場合、はみ出た分は表示しないという設定になります。

■の部分を広告ユニットとして、また■の部分をまわりの親要素（div class=”adsense”)として見てください。ウィンドウサイズを小さくすると違いが分かります。

<div class="adsense">
	広告ユニット
	（<script async～</script>）
</div">

.adsense{
	overflow:hidden;
}

修正前

修正後

②広告ユニットの下に謎の余白がある

これはimgタグで挿入する普通の画像でも起こりえる現象で「display:inline-block」になっている要素だとかならず発生します。

グーグルアドセンスの広告ユニットはins要素で囲まれており、さらに自動的にinline-blockが付与されています。

いくつか修正方法があるのですが、今回は一番カンタンなvertical-align:bottomを設定する方法にしています。

そもそも隙間が出来る理由とvertical-alignについて

inline-blockはインライン要素という文字等を格納する要素の一つです。このインライン要素には字の揃え位置というものが設定できます。日本語に揃え位置の概念がないのでイメージしづらいですが英語用の4線ノートを思い浮かべてもらえれば少しは分かりやすいと思います。

この揃え位置を変更できるのがvertical-alignになります。

もともとinline-block要素の下に謎の隙間ができるのはこの揃え位置が直接の原因となっています。

揃え位置を設定するvertical-alignの初期値はbaselineとなっており、これはinline-block要素の下端を4線ノートの上から3本目の線に合わせる、という設定です。すると4線ノートの3本目から4本目までが空白になってしまい、見た目には謎の隙間ができたように見えるのです。

そして今回設定するvertical-align:bottomは4線ノートの4本目に下端をあわせる設定なので、隙間がなくなります。

<div class="adsense">
	広告ユニット
	（<script async～</script>）
</div">

.adsense{
	overflow:hidden;
}
.adsense ins{
	vertical-align:bottom;
}

修正前

修正後

③広告ユニットをセンタリングしたい

これはカンタンで、親要素にtext-align: centerを追加するだけです。text-alignはその子要素の位置を設定でき、right,center,leftが設定できます。

<div class="adsense">
	広告ユニット
	（<script async～</script>）
</div">

.adsense{
	overflow:hidden;
	text-align:center;
}
.adsense ins{
	vertical-align:bottom;
}

修正後

修正後

グーグルアドセンス広告をcssでいじる

いかがでしたか。とりあえずは中央に寄って、そして見切れることもなくなり普通にグーグルアドセンスの広告ユニットを貼り付けるよりもぐっとサイトに馴染むようになったのではないでしょうか。

次回はさらにサイトに馴染むように広告ユニットのデザインを可愛く変更していきたいと思います。