XREA のバナー広告を固定レイアウトのヘッダに表示する

XREA のバナー広告を固定レイアウトのヘッダに表示する

Posted at July 18,2007 1:53 AM
Tag:[CSS, Customize, Template]

XREA を無料で利用する場合、表示が義務付けられている広告をヘッダ(タイトルバナー)にきれいに埋め込んで表示する方法です。質問を頂きましたので本エントリーにてカスタマイズを紹介します。

リキッドレイアウトであれば position プロパティを利用した絶対配置で比較的簡単に設定できますが、固定レイアウトでも position プロパティを組み合わせることで、決まった位置に表示させるテクニックがあります。

広告をヘッダに表示

ここでは公開テンプレートを例に設定していますが、テンプレートに関係なく適用可能です。

1.(X)HTMLマークアップ

広告表示用の script 要素を追加し、script 要素を div と p で括ります(青色)。div に任意の class 属性、または ID 属性を設定します。

<div id="header">
<h1 id="blog-name"><a href="" accesskey="1">First Weblog</a></h1>
<p class="blog-description">test</p>
<div class="ad">
<p>
<script type="text/javascript" src="http://..."></script>
<noscript><iframe height="60" width="468" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" allowtransparency="true" src="http://..."><a href="http://..." target="_blank"><img src="http://..." border="0" alt="xreaad"></a></iframe></noscript>
</p>
</div>
</div>

ちなみにこのまま表示すると、下記のようになります。

CSS未適用

2.CSS

スタイルシートに下記の設定を追加します。

div.ad {
    position: relative;
    margin: 0;
}
div.ad p {
    position: absolute;
    top: -56px;
    right: 15px;
}
html > body div.ad p {
    top: -58px;
    right: 0;
}

仕組みは、親要素の div に position: relative; を設定し、div を相対配置にします。そしてその子要素の p に position: absolute; を設定することで、子要素の position プロパティの基点は、親要素(div)が配置されるべき位置となります。あとは子要素の p に対して、表示させたい位置に top や right プロパティ等で移動させます。

当サイトのテンプレートでは、IE6とそれ以外のブラウザで広告表示位置が若干異なるので、子セレクタ(>)を使って異なる値を設定しています。
また、div のマージンを0にして不要な空白が表示されないようにしています。

広告以外に、検索フォーム等を埋め込む時にも有効ですので、お試しください。

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


コメント

yujiroさま。こんにちわ。
早速、教えて下さってありがとうございます。
そしてエントリして下さって感謝です。本当にありがとうございました。
お陰さまで広告を載せる事が出来ていろいろといじってエントリする事が
出来るようになります♪
覚え書きとしてエントリしてもよろしいでしょうか?
これからも分からない事が出ると思いますのでその時も
宜しくお願い致しますm(._.)m

[1] Posted by 亜風瑠 : July 18, 2007 9:48 AM

>亜風瑠さん
こんにちは。
ご連絡ありがとうございました。
ご自由にエントリしてやってください。
ではでは!

[2] Posted by yujiro : July 18, 2007 10:37 AM

MT4から5.031に変更したところ
バナー広告の位置が当初の位置から変更にならず
ヘッダーにも広告が入らない状況になってしまいました

MT4では参考にさせていただいて
うまくいったのですが
MT5では何か別の要因が考えられるのでしょうか?

ご教授いただけると幸いです

[3] Posted by yama : October 29, 2010 6:00 PM

>yamaさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、ご利用のテンプレートは記事の通り、当サイトのものでしょうか。
不具合が発生しているサイトのURLがありましたらご連絡ください。
それではよろしくお願い致します。

[4] Posted by yujiro logo : November 8, 2010 1:45 AM

yujiroさま

ご回答ありがとうございました
MT4に戻したため
自己解決できました

なぜMT5でできなかったかは
不明なのですが
再度MT5にした時は
原因を再度考えてみます

お手数かけました

[5] Posted by yama : November 30, 2010 2:05 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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