自動挿入広告付きサイトでの CSS デザイン

広告の挿入位置を自由に自分で決められる（例えば xrea とか）ところはともかく、そうでない場合はたいていページ上部（または、および下部）に自動挿入される。

これは例えば Apache の mod_layout なんかを使えばできる（文字コード判別とかどうやってんのか知らないけど）。mod_layout はとにかく吐き出される HTML の <body> 直後と </body> 直前にあらかじめ決められた文字列を吐き出すもの。HTML が生 HTML だろうが動的に生成されたものだろうが関係ない。そういう仕掛けがサーバで動いてるんだなってことが分かればこの広告の仕組みはまったく不思議でもなんでもないし、ページデザイン上の配慮もやりやすい。

いちばん簡単なのは自分の作るページを <div id="page"></div> などで囲ってしまうことである。そうするとヘッダおよびフッタに影響を与えずに自分の作ったコンテンツだけにデザインを施すことができる。全部 div#page 内に対してスタイルを指定していけばよい。ソースで書くとこんな感じ。

<!DOCTYPE>
<html>
  <head>
  ここは自由に書ける
  </head>
  <body>
  <!--
  ここは mod_layout でコンテンツが挿入される
  -->
  <div id="page">
    この中に自分の作ったコンテンツが入る
  </div>
  <!--
  ここは mod_layout でコンテンツが挿入される
  -->
  </body>
</html>

で、css はこんな感じ。

body {
  ここは広告に対するスタイルにしておく
}
div#page {
  ここに自分のコンテンツ全体に対するスタイルを書く
}
div#page table {
  広告はたいがい table 組みしてるので、
  素の table にはスタイルを設定しないでおく
  table に class を指定してもいいけど
  html を手書きするときは邪魔くさいし、ソース
  読みにくくなるじゃん
}

参考 mod_layoutを使う

More