TopCSS > 2007年7月
2007年7月18日

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

July 18,2007 1:53 AM
Tag:[, , ]
Permalink

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にして不要な空白が表示されないようにしています。

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

Comments [5] | Trackbacks [0]
2007年7月11日

Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。

July 11,2007 1:35 AM
Tag:[, , , ]
Permalink

出遅れましたが、インプレスより XHTML+CSS 本が出版されています。

Web標準XHTML+CSSデザイン  クリエイターが身につけておくべき新・100の法則。Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。
加藤 善規/平澤 隆/両見 英世

インプレスジャパン 2007-07-03
売り上げランキング : 512

Amazonで詳しく見る
by G-Tools

ブログでも活躍されているお三方、加藤善規さん、平澤隆さん、両見英世さんの共著です。下のサイトを見て頂ければどなたかお分かりになると思います。

内容はタイトルの通り、100の法則が下記の6つの章に配されています。

第1章 (X)HTML の基本法則
第2章 CSS の基本法則
第3章 用途と目的に合わせたレイアウトの法則
第4章 ユーザビリティを向上させる CSS デザインの法則
第5章 実践的な CSS デザインの法則
第6章 プロを感じさせるデザインの法則

フルカラーで、各法則のタイトルにはポイントがずばりと記され、読み切り形式になっています。順番に読むのも、拾い読みするのも、どちらもいい感じです。
また巻末には用語集と豊富な索引が用意されていますので、初心者の方にもお勧めです。

シリーズ本で「Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。」も発売されています。

Webユーザビリティ・デザイン  Web制作者が身につけておくべき新・100の法則。Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。
石田優子/有限会社アルファサラボ

インプレスジャパン 2007-07-03
売り上げランキング : 1070

Amazonで詳しく見る
by G-Tools
Comments [6] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

AMN
Categories
Monthly Archives
2021年
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