ヘッダに色んなＣＳＳ指定 #header
ＣＳＳ編集画面で「#header」と検索（Ctrl+F）すると見つかるＣＳＳは少ない。
「/*--header--*/」部分と「/*--font-information--*/」部分に存在する。
タグ名は「#header」と「#header h1」と「#header h2」だ。
/* ----------------------- header ----------------------- */
#header{
display:block;
position : relative ;
top : 0 ;
left : 0 ;
width : 760px ;
height : 100px ;
}
#header h1,
#header h2 {
padding: 0px;
margin: 0px;
}
#header h1 {
padding-top : 34px ;
text-decoration: none;
}
#header h2{
margin-left: 10px;
}
/* ----------------------- font-information ----------------------- */
#header h1 a{
color: #666666;
font-size: 25px;
font-weight: bold;
line-height: 1.5;
}
#header h2{
color:#666666;
font-size:11px;
font-weight: normal;
line-height:1.15;
}
「h1」と「h2」に関しては、ブログタイトル部分とブログ説明部分にあたる。
今回は「#header」のみに絞って色々いじってみようと思う。
/* ----------------------- header ----------------------- */
#header{
display:block;
position : relative ;
top : 0 ;
left : 0 ;
width : 760px ;
height : 100px ;
}
もともとのＣＳＳ部分がどんな指定であるかは、各自で調べて欲しい。
大体、カラムが「float」で分けられているスキンでは「width」や「height」くらいだろう。
カラムが「position」で位置づけられているスキンでは「position」の位置付けがしてある。
では、この「#header」に色々なＣＳＳを指定していってみよう。
まず、「#header」が何処に当たるかというと
#header{
border:1px #ff0000 solid; /*枠1px赤色 */
}
この指定で判る。
当ブログの場合「position」と「width」と「height」が元々指定してあり、この赤枠は親ボックス（#frame）を基準に上から０左から０幅760px高さ100pxになっています。
まず、枠に色を塗ってみて自分のヘッダがどのようになっているのかを見てみるのもいいかもしれません。
高さと幅を変えてみる。
#header{
width:500px; /*幅500px */
height:300px; /*高さ300px */
}
ヘッダボックスをどれくらいの大きさにするかを指定します。
背景を指定する。
#header{
background:#ffffaa; /*背景色黄色 */
}
背景に色を指定すると、ヘッダボックスの色が変わります。
画像を入れれば赤枠内に画像が表示されます。
例えば
http://blog.ameba.jp/user_images/c7/e9/10003524410.png
このような画像を横一列に並べると
#header{
background:url(http://blog.ameba.jp/user_images/c7/e9/10003524410.png) repeat-x; /*画像横に繰り返す */
}
このようになります。
外側の余白を指定。
#header{
margin:10px; /*外側の余白10px */
}
解かり辛いですが、クリックしてもらうと良く判ります。
frameの枠を灰色で示してみました。
ヘッダの周りに10pxの余白ができます。
必要な場合指定します。
内側の余白を指定。
#header{
padding:10px; /*内側の余白 */
}
これも解かり辛いですが、赤枠からタイトル部分に余白が出来ました。
赤枠から内側に10pxの余白ができます。
枠をつける。
#header{
border-top:10px #ff0000 solid; /*枠上・10px赤色線 */
border-bottom:10px #ff0000 solid; /*枠下・10px赤色線 */
}
今まで判りやすさで、ヘッダを囲っていた枠ですが、上下に10pxの太い線にすれば画像を使わずとも何となくデザインは出来てしまいます。
ボックスの枠を利用してデコレーションする事も可能です。
ヘッダを消す。
#header{
display:none; /*消す */
}
希にヘッダを必要としない人がいます。
これでヘッダを消してしまう事ができます。
領域を残してヘッダを消す。
#header{
visibility:hidden; /*領域を残し消す */
}
frameなどに背景画像を置いている場合なんかは、この指定をすることにより領域が残るのでいいかもしれません。
タイトルを表示させたくない場合に便利です。
「position」で構成されているスキンで位置を変更する。
#header{
position:relative; /*元の位置を基準に */
top:0; /*上から0*/
left:0; /*左から0*/
}
このようになっているＣＳＳの位置を
#header{
position:relative; /*元の位置を基準に */
top:50px; /*上から50px*/
left:100px; /*左から100px*/
}
に変更してみる。
そのままごっそり位置が動いたのが判ると思います。
「width」や「height」、サイドバーや記事なんかの位置も一緒に変えることで自由な配置が出来るというわけです。
positionの位置でデザインの幅がぐっと広がると思います。