アメブロのデザインをカスタイマズその３～ヘッダー画像を変更するの巻

普通のスキンだと、背景画像の上にテキストでブログの名前と説明が書いてあると思いますが、有名人ブログとかだとブログの名前とかも画像で作ってありちょっとだけかっこいい。

ということで今回はヘッダー画像を変更します。


まず、私の場合880pxのヘッダー画像を使いたいので全体的な構造を横幅880pxに変更します。
※今度、ゆっくり説明しますがとくにこだわりがない場合は800px以内をお勧めします。それ以上だとだいぶめんどくさいことに…

↓CSS

/*■フレーム - 基本設定 - スキン基本設定*/
#frame{
width:880px;
margin:0 auto;
text-align:left;
}
#wrap{
width:880px;
}

そしてヘッダーの部分をいじります。
簡単に言うとブログの名前入りの背景画像を配置してブログタイトルを見えないところに、ブログの説明を消してしまうって感じです。
SEO的にいいか悪いかはわかりません。

/*■■■基本設定 - ヘッダー*/
#header{
margin:0;
padding:0;
}
#header h1,#header h1 a{
margin:0;
padding:0;
background:url(画像のURL) no-repeat;
line-height:300px;
width:880px;
display:block;
text-indent:-9999px;
}
#header h2{
margin:0;
padding:0;
display:none;
}

と、するとこんな感じ

なんか変なトコにスペース入っちゃってるから修正

前の記事で書いたCSSの

div#frame div#userNaviArea{
margin:0;
padding:0;
}

こんな感じで付け足します。

ここちょっとポイントなんだけど…
上のCSSの意味
”frameってID(#)のdivにあるuserNaviAreaってIDのdiv”を…
っていう超遠回しな言い方で指示を出しているんです。

普通だったら”#userNaviArea”でいいんですが、おそらくここは他のCSSで指示が出てるんでそのCSSより優先的に読み込ませる必要があり超遠回しな言い方を使ってます。

超めんどくさい。


とりあえずここまで