スキップしてメイン コンテンツに移動

DFPの広告をセンタリングして貼る方法


DFPのユニットをセンタリングしたいだけだったのに、シンプルな方法が見つからず随分とハマったので、その苦労の末に導き出したスーパーウルトラ結果をここに残しておきます。

doubleclick by Google (DFP:DoubleClick for Publishers) を使って広告ユニットをセンタリング配置したい場合、次のようにすると簡素で良いと思います。


HTML
<div class="dfp">
  ここにDFPのタグ(コード)を貼り付ける
</div>

CSS(CSS2でいけるかな) 
.dfp > div {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

どうでしょうか?
ユニットのサイズをCSSに指定しなくて良いんです。

HTMLもdivを1つ追加するだけの分かりやすい方法です。

スーパーウルトラでしょうか(笑)?

参考になれば幸いです。


経緯とか

何にそんなに苦戦したかというと、まず、こんな記述が効かなかったんです。
.dfp {
  text-align: center;
}
Adsenseだとこれで出来るんですけれど、DFPに置き換えたら左に寄っちゃうんです。焦ります。

次に、こんなふうにすればセンタリングできるんだけど、CSSでこんな記述をしたくなかったんです。複数サイズにも適用できないし。
.dfp {
  margin: 0 auto;
  width: 336px;  ←ここが気に食わなかった
}

しかし初めて知りましたよ、CSSの「>」指定なんて。
っていうか、使わないでしょ、普通。

ちなみに個人的にGoogleの複雑すぎでしょシリーズです、DFP。
シリーズ
・Adsense
・Analytics
・DFP

AdsenseとDFPをどうすりゃいいんだって人は多いと思います。
(それについてはいずれ書くかも)

DFPって別称みたいなのも色々あるし
検索キーワードとして「DFP」はイマイチ使えないし
大丈夫でしょうかGoogle・・・

と、前も書いたようなコメントで締めくくろうと思います。
こんなところまで読んでくださった方、ありがとうございます。


 

記事一覧

もっと見る