ヘッダーの背景色を変更する

ライブドアブログのヘッダー部には、背景に画像が使われているテンプレートが多いようですが、この画像を背景色に変更する方法を説明していきます。
＊ヘッダー部とは、ブログタイトル、ブログ説明文がある部分です。

ライブドアブログでヘッダー部の背景色は、ブログタイトルとブログ説明文のデザイン設定を行うスタイルシート（CSS)の部分に、背景色を指定する「background-color」を追加して指定します。

それでは、ブログの管理ページから、【カスタマイズ/管理】→【デザインの設定】→【カスタマイズ】の順番でスタイルシート（CSS）のファイルを開いてください。

ここまでの手順は、「カスタマイズ応用編では」を参考にしてください。

ライブドアブログでヘッダー部の背景色は、ブログタイトルとブログ説明文のデザイン設定を行うスタイルシート（CSS)の部分に、下記のように記述されています。
＊下記のスタイルシート（CSS）は例です。テンプレートによって、内容（数値等）は違いますので、あなたのご利用のテンプレートに適宜置き換えてください。

#banner,#subbanner{
 width:722px;
 height:209px;
 text-align:left;
 background:url( http://image.blog.livedoor.com/img/usr/sky_02/
 main.jpg) no-repeat 50% 0;
}

上記のスタイルシート（CSS)で、

background:url(http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0;

の部分が、ヘッダー部の背景画像を指定している箇所です。

この部分を削除して、代わりに「background-color」を追加して、色の指定を行います。
＊色の指定方法は、「ブログタイトルの文字の色を変更する」を参考にしてください。

スタイルシート（CSS)を削除しても、また元に戻したくなるかもしれないので、この場合、スタイルシート（CSS)のバックアップを必ずとっておくようにしましょう。

＊バックアップの仕方はこちらを参考にしてください（すいません準備中です）。

また、バックアップは必ずとることをお勧めしますが、今回のようにスタイルシート（CSS)を削除するような場合は、いきなり削除するのではなく、該当箇所をWebブラウザーの表示に一切影響しなくする方法で、ブログデザインの変更を確認することもできます。

この方法は、今回の場合では、

background:url(http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0;

の部分を「/*」と「*/」で囲んでしまう方法です。

こんな感じになります。

/*background:url(http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0;*/

「/*」と「*/」で囲んだ範囲は、スタイルシート（CSS)の表示指定を無効にします。
そのため、あなたのブログを表示するWebブラウザー（インターネットエクスプローラやFirefoxなど）は、「/*」と「*/」で囲んだ範囲は無いものだと理解するので、背景画像が表示されなくなります。

その他、「/*」と「*/」で囲んだ範囲を、コメントを書き込むために利用することもできます。
スタイルシート（CSS)を書き換えたり、追記したりしてカスタマイズしていくとき、この部分のスタイルシート（CSS)は、何を指定しているのかなどを書き込むときに使えます。
この場合は、あなたのブログを表示するWebブラウザーは、ここの部分はスタイルシート（CSS)ではなく、コメントとして理解するので、Webブラウザーの表示には影響は出ません。

こんな感じに使います。

/* ヘッダーデザイン設定 */
#banner,#subbanner{
width:722px;
height:209px;
text-align:left;
background:url( http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0;
}

話がそれましたが、ヘッダーの背景色には、「background-color」を追加して、色の指定を行います。
＊色の指定方法は、「ブログタイトルの文字の色を変更する」を参考にしてください。

追加したスタイルシート（CSS)は、下記のようになります。
赤字の部分が、ヘッダーの背景色を指定するために追加した箇所です。

#banner,#subbanner{
 width:722px;
 height:209px;
 text-align:left;
 background:url(http://image.blog.livedoor.com/img/usr/sky_02/
 main.jpg) no-repeat 50% 0;
 background-color:#3366ff;
}

ヘッダーの背景色の追加が終わったら、管理画面の下の方にある、【この内容で保存する】をクリックし、その後、ブログを再構築してください。

再構築は、【スタルシート（CSS）】だけでもＯＫです。

再構築が終わったら、あなたのブログを実際に見て、確認してください。

「/*」と「*/」で囲んだ

/*background:url(http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0;*/

の部分を削除した場合は、もう一度、ブログを再構築してください。