アメブロカスタマイズ2011〜ヘッダーをいじる #ameblo

ヘッダーをいじります。


問題な部分は山ほどありますがひとつひとついきます。
ヘッダー
↓
フッター
↓
サイドバー
みたいな流れで行きます。

#userNaviAreaの編集

一番上の(上から２番目？)のユーザ名とからピグとかのリンクのある部分をいじります。

ほんとはその上のamebarをいじりたいのですが規約がわからないので今回はスルー。

で、#userNaviAreaですがそのままCSSを書いても反映されません。
他のCSSを読み込んでいるので、そのCSSよりも優先的に読み込むようにちょっとめんどくさい記述をします。

#overHeader div#userNaviArea{
line-height: 24px;
padding: 3px 10px;
background: #444444;
border-bottom: #2b2b2b 1px solid;
text-align: left;
}
#overHeader div#userNaviArea a{
color: #ffffff;
text-decoration: none;
text-shadow: -1px -1px 0 rgba(0,0,0,0.5);
}
#overHeader div#userNaviArea a:hover{
text-decoration: underline;
}
#overHeader div#userNaviArea a#userNickName{
font-size: 14px;
width: 200px;
float: left;
padding: 0;
}
div#userNaviArea ul#navigationList{
color: #dddddd;
width: 250px;
float: right;
padding: 0;
text-align: right;
}

こんな感じにしてみました。
borderとCSS3のtext-shadowを使って微妙な立体感を出してみてます。

ヘッダーの部分

ヘッダーはロゴを配置して、h2のブログの説明は非表示にしてます。
右側にグローバルナビを配置しますが…あとでやります。

#header{
border-top: #ffffff 1px solid;
border-bottom: #cccccc 1px solid;
background: url(濃い方の背景画像のurl);
}
#header h1{
padding: 30px 0 20px 0;
width: 960px;
margin: 0 auto;
text-align: left;
}
#header h1 a{
width: 280px;
height: 100px;
text-indent: -9999px;
background: url(ロゴとかの画像のurl) no-repeat;
display: block;
}
#header h2{
display: none;
}

するとこんな感じ



だいぶいい感じになってきました。

…みんなの好きな大きな画像のヘッダーじゃなくてごめんね。
それについてはまた書きます。