HOME > WordPress > テーマ作成 > WordPressのテーマ作成(10) 固定ヘッダー



WordPressのテーマ作成(10) 固定ヘッダー

2012年2月19日 | カテゴリー: テーマ作成 | タグ : , ,

Pocket

デザイン自体はまだ未作成だけど、とりあえず固定ヘッダーを試してみた。
フッターまで固定にすると表示範囲が狭くなるのでヘッダーだけ。

参考にしたのはこちら。
ヘッダとフッタを固定して常に表示

実際に作成したのはこちら
iPhoneでの表示も確認済み。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" />
<title>テーマ作成</title>
</head>
<body>

<div id="header">
固定ヘッダー
</div>

<!--▼ヘッダー▼-->
<div class="head">

</div>
<!--▲ヘッダー▲-->

<!--▼container▼-->
<div class="container">
始まり<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>終わり</div>
<!--▲container▲-->

</body>
</html>

CSS

body{  
 margin: 0;
 padding: 50px 0 0 0;
}

img{
 border:0px;
}

/**********************************************/
#header{
 position: fixed !important;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 50px;
 background-color: #4E9ABE;
 color: #fff;
}

/**********************************************/
div.container{
 width:950px;
 margin:auto;
 height: 100%;
 overflow: auto;
 background-color:#eee;
}

bodyで上に向けてpaddingを指定することによって、bodyの始まりの位置を変え、
固定ヘッダーの部分をpositionのfixedで固定しているという事だと思う。
(実はpositionは全然使ったことがなかったり^^;)

とりあえず使い方が分かったから、デザインに組み込もう。
早くデザイン作成しなくちゃ。

にほんブログ村 パソコン・周辺機器

Pocket



コメントを残す

Captcha Captcha Reload