【CSS編集】ヘッダー画像をオリジナル画像に変える
あたし、『めんどくさがりんぼう』なんですよ。
そうです。棒だったんです。
いやそうではなく。（どうしようもない。）
基本をぶっとばして書いてあったのですが、ぶっとばした部分について質問をいただきました。すみません。
Richard won３０歳のブログ CSS編集記事です、関係者さまお付き合い願います。
よく棒が生えていると勘違いされることはあります。（本当にどうしようもない。）
簡単にタグだけ教えろよっていう方は、これになります。各解説は下を読んでください。
/* ----------------------- header ----------------------- */
#header{
height:416px;
background-image: url(画像URL
);
background-color: #ffffff;
background-position: left center;
background-repeat:repeat-x;
}
ヘッダー背景色設定がない場合（background-color: #ffffff;を消した場合）は、画像の後ろはブログ背景が透き通ります。
これは、カスタマイズでできるので説明していませんでした。
管理画面＞デザインの変更＞カスタマイズ＞ヘッダー画像設定 ですね。もちろんCSSでも可能なんです。その説明です。
※「カスタマイズ」ができるスキンは限られてしまいます。
ベーシック・スキン（グレイ・ブルー・ピンク・グリーン）、及びいくつかのベーシックスキン。たとえば「どんぐり」とかでも
カスタマイズすることができます。何気にヘッダーだけ変えればオリジナルな感じかつかっこいい感じになります。
「カスタマイズはできないけどCSS編集はできるスキン」というもので、ヘッダーを変更する場合なんですが、
これは私では説明できません。個々のスキンによってかなりCSSが異なっており、いくつもの説明をする必要がある。
その割に実りのない記事になります。
ある程度CSSをいじくっていれば、ひととおりCSSを見て「ここがヘッダー画像だ」とわかるようになりますから、
その段階ではない方はまずベーシックの「カスタマイズ可能」なスキンで経験値を積むことをお勧めします。
千里の旅も、スライム（レベル１）から、です。
ベーシックスキンにおいてカズタマイズで画像設定後にそれを調整する場合のCSSもご説明致します。
カスタマイズでヘッダー画像を設定すると高さは自動調整されますが、CSSで画像を呼び出す場合には
高さの調整もcssでやる、つまり「手動でやる」必要があります。めんどくさいです。
/* ----------------------- header ----------------------- */
というところに行きます。これはかなり上のほうにあるcssで、『【CSS編集】ブログタイトルの大きさを変える・場所を変える』
でも
詳しく説明していますが、ブログタイトルの変更の際にもここを変更する必要が出てきます。
ヘッダーのサイズのcssはこちらです。これがもともとあります。
#header{
height:416px;
background-color: #ffffff;
}
ここに書き加えてこのように致します。
#header{
height:416px;
background-color: #ffffff;
background-image: url(画像URL
);
background-position: left center;
background-repeat:repeat-x;
}
height:416px; のところは画像を表示できる適切なpxを入れます。
background-color: #ffffff; はヘッダー画像の背景です。これをまるごと消すとブログ全体の背景が透き通ります。
私は現在（2007.3.13）消してしまっています。こんな感じになるんですよ。スクロールすると背景が透き通ってるでしょ。
カラー一覧表 （ここの数字とアルファベットは大文字表記になっていますが、小文字でも構いません。半角なら。）
repeat-xは横（x軸）に画像が繰り返す、なので、repeat-y にすれば縦に繰り返しになります。
また、ヘッダー全面に敷き詰める場合には repeat 繰り返さない場合は no-repeat です。
この値はかなりどこにでも使えるので、覚えておくことをお勧めします。
また、固定位置を決める場合は、
こちらを参考の上、１から３のどれかひとつを貼り付け、値を決定させればよいでございます（笑）。
実は私、この記事を書く前はもっと面倒な方法でやっていました。
で、書く気になっていろいろやってみてこの方法がわかりました。（っていうかほんと基礎に近いですよね、これ。）
やはりこういうのは自分のためになるからよいですね・・・ちょっと悲しいけど。
不明な点がございましたらコメント欄及びメールフォームからご連絡ください。
アメブロメッセージではタグがきちんと表示されない場合があるので、そちらからはやめておいてくださいね。