WordPressのテーマ作成（10） 固定ヘッダー
2012年2月19日 | カテゴリー： テーマ作成 | タグ : WordPress, テーマ, デザイン
デザイン自体はまだ未作成だけど、とりあえず固定ヘッダーを試してみた。
フッターまで固定にすると表示範囲が狭くなるのでヘッダーだけ。
参考にしたのはこちら。
ヘッダとフッタを固定して常に表示
実際に作成したのはこちら。
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は全然使ったことがなかったり＾＾；）
とりあえず使い方が分かったから、デザインに組み込もう。
早くデザイン作成しなくちゃ。
コメントを残す