TopMovable Typeテンプレート > 2006年8月
2006年8月31日

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

August 31,2006 12:23 AM
Tag:[, , ]
Permalink

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

公開テンプレートへのバナー広告設置例

1.カスタマイズ前の状態

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

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

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

デフォルト状態でバナー広告を設置した場合

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

2.テンプレートの修正

バナー広告をサンプルのように中央カラム上部に表示する場合、各テンプレート(メインページ/カテゴリー・アーカイブ/日付アーカイブ/エントリーアーカイブ)の下記の位置に挿入しています。またバナー広告全体を 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 -->
       :

3.スタイルシートの設定

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

修正前

.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 
}

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

Comments [11] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3