小粋空間  -  a cheap joke and a play on words site

中央カラムにバナー広告を表示する

公開テンプレートの固定3カラムの中央カラムの幅を補正して、バナー広告を設定するカスタマイズを紹介します。ここでは標準サイズである、幅 468px（468x60）のキーワード広告を設定してみます。下のスクリーンショットは完成例です。

１．カスタマイズ前の状態

現在公開中のテンプレートは、2年ほど前に初めて Movable Type 用の3カラムテンプレートを作成した時からカラム幅を変更しておりませんらず、その後公開した Serene Bach、FC2ブログ、Seesaaブログ等のテンプレートも同じデザインを使用しています。

しかしながら広告の配置について全く考慮していなかったため、例えば固定3カラムの中央カラムのデフォルト幅は、標準バナーサイズの 468px より 20px ほど狭い状態になったままです。

ということで、デフォルト状態のままバナー広告を設定すると、下のスクリーンショットのように中央カラムから広告がはみ出してしまい、右カラムが中央カラムの下に折り返してしまいます。またバナー広告の位置補正もできていません。

サイズ補正したテンプレートの公開云々についてはさておき、以下、中央カラム上部（または下部）にバナー広告を表示するための設定方法です。

２．テンプレートの修正

バナー広告をサンプルのように中央カラム上部に表示する場合、各テンプレート（メインページ／カテゴリー・アーカイブ／日付アーカイブ／エントリーアーカイブ）の下記の位置に挿入しています。またバナー広告全体を div 要素で括ってください。

　　　　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="ad">
[バナー広告用タグ]
</div>
 
<MTEntries>
<$MTEntryTrackbackData$>
 
<!-- エントリー日付開始 -->
<MTDateHeader>
<div class="date"><$MTEntryDate format="%x"$></div>
</MTDateHeader>
<!-- エントリー日付終了 -->
　　　　　　　：

ページ下に挿入する場合は下記の位置が良いでしょう。

　　　　　　　：
</div><!-- /entry -->
 
</MTEntries>
 
<div class="ad">
[バナー広告用タグ]
</div>
 
</div><!-- /blog -->
　　　　　　　：

３．スタイルシートの設定

スタイルシートの下記の赤色部分を青色に修正してください。

修正前

.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
　　　　　　　：
　　　　　　（略）
　　　　　　　：
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

修正後

.layout-three-column #box {
    width: 870px;
    _width: 872px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
　　　　　　　：
　　　　　　（略）
　　　　　　　：
.layout-three-column #content {
    float: left;
    width: 498px;
    _width: 500px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

プロパティの先頭に "_" がついているのは、IE/Mozzika 系ブラウザの表示の差異をなくすための「アンダースコア・ハック」です。

さらにバナー広告を括っている div 要素の class 属性に下記のプロパティを設定し、広告の表示位置を補正します。

.ad {
    margin:8px 0 18px 5px 
}

以上です。
これで再構築を行えば冒頭のスクリーンショットのようになると思います。

<div class="blog">

<div class="amazon">
<table> ～ </table>
</div>

.amazon {
    margin: 0 3px 15px;
    padding: 10px;
    color: #333;
    font-size: 100%;
    border: 1px solid #999;
}

<div class="blog">
　　　：
</div>