SHIDEN DESIGN BLOG

thumbnail_02170117

AdRotateを使って表示させた広告を中央に配置する方法

SponsorLink

広告管理に便利なAdRotateを使ってみた

 
広告を管理するプラグインとして人気の高いAdRotate。
WordPressの管理画面から簡単に広告の差替えが出来るのは勿論、便利な機能が豊富に用意されている。 
 
その使い方やインストールの方法は他に譲るとして、ここではCSSを少しだけ弄って配置を整えてみようと思う。 
 

グループ管理していない広告の場合

 
image_2017011701
 
画像はテンプレートファイルの委任の場所にAdRotateのPHPコードを差し込んだだけの状態。
CSSは記述していないので当然、広告は左寄せで表示される。 
 
これを次の画像のように中央寄せにしよう。 
 
image_2017011702
 
先ずはAdRotateのHTMLがどうなっているか各ブラウザの機能を使って確認してほしい。 
 

グループを作っていない場合はこれだけ。
〇の部分には管理画面で指定した管理用のIDが入る。 
 

単純に考えればこれで中央に配置出来るような気がするが、a-singleはdivタグ。
幅を指定していないblock要素は親要素の幅に依存するのでマージンautoは効かない。
 

そこで、広告の幅に合わせてa-singleに幅を指定する。
 

もしくは、a-singleの子要素である広告のタグを指定する。
これだけでも広告を中央に配置する事は出来るが、前述のやり方では広告の幅が狭くなったり広くなったりすると中央からずれてしまうし、後述のやり方では広告のタグは全ての会社で統一されているわけではない。
つまり、いずれの場合も広告に差し替える度にCSSを書き換える手間が発生してしまう。
 
次に思いつくのはa-singleを子要素である広告の幅で可変させるやり方。
 

これでa-singleを広告の幅に合わせて可変させる事はできるが、残念ながらinline-blockもマージンautoは効かない。
a-singleを広告の幅に合わせて可変させた上にマージンautoを効かせるには次のやり方が最もシンプルだと思う。
 

これでa-singleを広告の幅に合わせて可変させた上にマージンautoを効かせる事が出来る。
広告の差替えの度にテンプレートファイルやCSSファイルをいじる必要もなくなる。
 

グループ管理している広告の場合

 
image_2017011703
 
画像のようにグループを作って二つの広告を横並びに表示させるとAdRotateのHTMLは次のようになる。
 

 
この場合も基本的な考え方はグループ管理していない広告と変わらない。
少し違うところは広告のコードの親要素ではなく、更にその親要素にtabuleを指定する点。

これでどちらか一方の広告の幅が変わっても二つの広告は中央に配置されたままになる。
一つだけ注意したいのはグループを作る際、次の画像のような設定が必要になる。
image_2017011704
 

まとめ

 
長々と書いたが、広告の差替えを必要としない場合やテンプレートファイルに広告スペースを設けず、投稿ごとに広告を貼り付ける場合はあまり必要ないかもしれない。
だけど広告の差替えを必要としないでも、例えば次のようなコードを書いた場合も意味があると思う。

ユーザーエージェントで振り分けて、モバイルとPCで別々の広告を表示させている。
この場合もCSSの記述は少なくすむ。 
 

SponsorLink

Related Articles