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

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

Posted at August 31,2006 12:23 AM
Tag:[CSS, Customize, Template]

公開テンプレートの固定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 
}

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

関連記事
zenback
人気エントリー
トラックバックURL


コメント

初めまして。いつもお世話になっております。
おかげで、中央カラムにバナー表示できるようになりました!
ただ、左サイドバーに160×600の広告を貼ると、右サイドバーが、下に落ちてしまいます;;
サイドバーの幅を大きくするには、どこを修正したらよいのでしょうか?
それらしきところをいじってみたのですが、下に落ちたままになってしまいます。

[1] Posted by chi : December 13, 2006 7:21 AM

>chiさん
はじめまして。
記事参照ありがとうございます。
ご質問の件ですが、同様のご質問を頂いておりますので別途エントリーしたいと思います。
それではよろしくお願い致します。

[2] Posted by yujiro : December 13, 2006 7:50 PM

お忙しい中お返事ありがとうございます!
エントリーされるのを楽しみにまってます^^

[3] Posted by chi : December 14, 2006 12:37 AM

yujiroさま。こんにちわ。かなりのお久しぶりです。
このエントリのコメントでよいのか悩みましたが・・・(-_-;)
バナー広告を引っかかりでご質問させて頂きます。

Movable Type3.3をインストールしてBlogの作り直しをしています。
レンタルサーバ(xrea)の広告をタイトルの枠の右端に挿入したいのですが
色々と試してもうまくいきません。入れればBlog全体の文字が大きく
なったり、タイトル上に広告が張り付いたりとなってしまいます。

3カラム(layout-three-column)なんですが
テンプレートに入れるタグ・スタイルシートに入れるタグを教えて下さい。

お忙しいとは思いますが、宜しくお願い致します。

[4] Posted by 亜風瑠 : July 17, 2007 2:48 AM

>亜風瑠さん
こんばんは。
ご質問の件ですが「XREA のバナー広告を固定レイアウトのヘッダに表示する」をエントリーしましたのでご確認頂ければ幸いです。
それではよろしくお願い致します。

[5] Posted by yujiro : July 18, 2007 2:16 AM

お世話になります。
Movable Type4で中央カラムの上部に「Movable Type WEBデザインの新しいルール」のバナー広告を掲載したいのですが、何処をいじればいいか分かりません。お時間があれば教えていただけたら幸いです

[6] Posted by 馬蔵 logo : November 19, 2007 11:02 AM

>馬蔵さん
こんばんは。
ご質問の件ですが、メインページ・ブログ記事・ブログ記事リストの

<div class="blog">

の下にとりあえず挿入してみてください。
細かい設定は挿入後にご相談ください。
それではよろしくお願い致します。

[7] Posted by yujiro logo : November 22, 2007 12:25 AM

 yujiroさま
 いつもながら初歩的な質問に迅速にご回答いただきまして有り難う御座います。ご教授いただいた方法で作成してみました。もう少し横幅を狭くできたら見栄えが良くなるような気がするのですが・・・。
 ご迷惑でなければ「Movable Type WEBデザインの新しいルール」をこのまま貼らせて頂いて宜しいでしょうか?

 まだまだ挑戦してみたいカスタマイズは山のようにあるのですが、分からない事ばかりで悪戦苦闘中です。また初歩的な質問をさせて頂くかと思いますが、よろしくお願いいたします。

[8] Posted by 馬蔵 logo : November 22, 2007 2:05 AM

>馬蔵さん
こんにちは。
ご質問の件ですが、Amazon 表示用の table 要素全体を下のように div 要素で括り(amazon という class 属性をつけてください)、

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

という(X)HTMLマークアップの部分、つまり .blog というセレクタには、フォントサイズ等のスタイルが何も設定されていないためです。
私のコメント[7]の回答では説明が不足していたので、ここで補足させて頂きました。

拙著の解説で、ブログをここまで完成させて頂き、大変嬉しく存じます。
また何かございましたらご連絡ください。
ではでは!

[9] Posted by yujiro logo : November 22, 2007 10:36 AM

yujiroさま
ありがとうございました!とても見やすくなりました。又よろしくお願いいたします

[10] Posted by 馬蔵 logo : November 22, 2007 4:02 PM

>馬蔵さん
こんばんは。
ご連絡ありがとうございました。
ではでは!

[11] Posted by yujiro logo : November 23, 2007 7:34 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)