オフィシャルブログみたいなヘッダー作成

よくあるオフィシャルブログ見たくヘッダーを

画像のみ＋クリックするとトップへ移動

てな感じにしてみたので覚書てきな・・・


■手順

【１】 まずは、当然のことながらヘッダー画像を用意(作成)するｗ

画像の幅はCSSの#headerのwidthにあわせること！

（このブログでは900pxにしているよ）



とりあえずこんな感じで作ってみた・・・

タイトル入れ忘れて的なΣ(|il!￣Д￣)ﾟДﾟ)･Д･) ｱｧｰｯ!!

ヘッダー画像が出来上がったらアップロードしといてね！


※アップロード例


ナンバーの順に押していったらいいはず

画像のアップロードが終わったらその画像のアドレスを控えておこうｗ

上記のアップロード例の画像

⑥の部分のアドレスだよ





【２】 CSSを書く

#header{
background: url(先ほどコピーしたヘッダー画像のアドレスをここに記入) no-repeat;
width:ヘッダー画像の高さ;
height:ヘッダー画像の幅;
}

#header h1{
font-weight:bold;
line-height:1.2;
text-indent: -9999px;/* ブログタイトルを隠す */
}

/* ヘッダーをトップページへのリンクにする */
#header h1 a{
display:block;
overflow:hidden;
width:ヘッダー画像の高さ;
height:ヘッダー画像の幅;
}

/* ブログの説明を消す */
#header h2{
display:none;
}

/* ナビゲーションエリアを消す */
#userNaviArea{
display:none;
}

以上でＣＳＳを保存すればＯＫ！！