CSSでHTMLの一番下に書いたものをヘッダー部分に表示させる方法

今日、某ネットワークに所属している有名ブログが、一時的に閲覧不能になりました。原因はヘッダー部分に置かれた広告バナー。これ、Javascriptで表示しているようなのですが、それに不具合があり、それ以降に書かれたHTMLが表示されない→閲覧不能となったようです。

【参考】
つぶやきボタンをページ上部に置いてはいけないたった一つの理由

ウチもリニューアルを機にアドセンスをページ上部に貼ったわけですが、これもJavascriptで表示されてるので、アドセンスに何かあったときにヘッダーより下が何も表示されないというリスクがあります。(※現在、アドセンスは外してあります。)

ということで、JavascriptをHTMLの末尾あたりに移動。CSSを使って、それをヘッダー部分に表示させてみました。

以下、その方法です。(ここでは「ページ最上部」に表示させる場合を想定してます。ウチの場合とは異なるのでご容赦を。)

1. HTMLコードを入れ子にしたDIVタグ2つで囲む

まずはHTML。コード自体は一番最後にしたいけど、表示は上の方にしたいもの(私の場合はアドセンス)を、</body>の上あたりに、DIVタグを入れ子にして次のように記載します。

<div id="hoge">
	<div id="hogeInner">
		【ここに表示させる中身を書く】
	</div>
</div>

【ここに表示させる中身を書く】の部分にimgタグだったりJavascriptのコードだったりを記載します。

2. CSS「position」で外枠をブラウザ左上に配置

上のHTMLをCSSでヘッダー部分に配置するためのCSSを書きます。(上でも書きましたが、ウチとは異なり、ページ最上部に表示させることを想定してます。)

#hoge {
	width:100%;
	position:absolute;
	top:0;
	left:0;
	text-align:center;
}

「width:100%」で横幅を100%のサイズに、「position:absolute」でボックスの配置をブラウザの左上からの位置に、「top:0」「left:0」でブラウザの上から0px左から0px=ブラウザの左上に、「text-align:center」でボックス内部をセンタリングします。

これだけだと、こんな感じになります。

表示例(1)

サイト上部の赤いところが【ここに表示させる中身を書く】の部分。ここではimgタグを表示させることを想定してるんですが、ここをちょいと装飾して枠線とか付けたいネ!という方もいらっしゃるかと。ということで、次。

3. 内枠を外枠内でセンタリングして、内枠を装飾

次に、入れ子にした内側のボックスに対し、次のようなCSSを書きます。

#hogeInner {
	width:500px;
	margin:0 auto;
	border:solid 5px #cccccc;
	background:#ffffff;
	padding:10px 0;
}

「width:500px」で内枠の幅を指定(500pxは自由に変更してください)、「margin:0 auto」で内枠をセンタリング。あとはborderとかbackgroundとかで装飾してください。するとこうなります。

表示例(2)

サイズ指定した内側ボックスが装飾されました。パチパチパチパチ。

が、既にお気づきの方もいらっしゃるかと思いますが、このままではダメです。なんてったって、ヘッダーにダダ被りですから!ということで、次。

4. ページ上部に表示させるスペースを確保する

ヘッダーにダダ被りを回避するために、こんな感じでページ上部(bodyタグやヘッダー枠…ここではヘッダー枠を想定)にスペースを確保します。

#header { padding-top:100px; }

ページ最上部にコードを書いた場合と同様の表示にするため、ヘッダー枠の上部分に表示させるものよりも大きな余白を指定します。(この場合、イメージ縦60px+上下に余白10pxずつ+枠線上下5pxずつ+表示させたものの下に余白10px=100pxとしてます。中身に応じて適当なサイズを指定してください。)

すると、body以下が指定した値分下に下がり、こんな感じで表示されるようになります。

表示例(3)

これで、不具合があるとページ全体が表示されなくなっちゃう可能性のあるJavascriptをHTMLの最下部に記載、表示自体はページ最上部、という状況を作ることができました。パチパチパチパチ。

+++++

ウチの場合は、ヘッダーの下、記事タイトルの上という場所に配置したので、外枠はtopから125pxの位置、表示スペースは余白も含めて記事上部に155pxを確保してます。

で、一応GoogleChromeとIETester(IE6、IE7、IE8での表示をチェックできるソフト)で表示させて問題ないことを確認はしてますが、環境やその他のCSSによっては表示が崩れる可能性もありますんで、その辺は自己責任で試してみてください。(基本的な考え方は上に書いたとおりではあるんですけどネ。)

というわけで、一時的とは言えブログが表示されなくなっちゃったアジャイルな方にもおすすめできるかもしれない(←この辺が自信のなさの現れw)CSSの小技でした。ちゃんちゃん。