ファンブログのコンテナとヘッダ、フッタの背景色を変更してみよう！

ファンブログカスタマイズ：ボックス編投稿日：2012年07月28日 12:02

前回はコンテナ（#container）の左右の枠線の変更の仕方を説明しましたので、今回は背景色の変更の仕方を説明します。コンテナ（#container）にはデフォルトで白い背景色（#FFF）が指定されているのですが、コンテナ（#container）の記述には左右の枠線は記述されていますが、背景（background）の記述がありません。

#container {
	border-left:1px solid #333;
	border-right:1px solid #333;
}

何故、背景（background）の記述がないのに、背景色が指定されているのかを説明しますと、実はこの記述の下の方にもコンテナ（#container ）の記述があり、そこに背景色（background: #FFF;）が指定されているんです。

スタイルシートの記述にはこのように同じセレクタ（今回は #container という id セレクタ）を別の場所にも記述して指定してあることが多々ありますので、「Ctrl」+「F」でセレクタを検索して全ての記述を確認する必要があります。

今回も「スタイルシート」の記述を変更しますので、作業の前にバックアップをとっておくことを推奨します。

? CSSやHTMLファイルのバックアップの方法

「スタイルの編集」を選択して「スタイルシートの編集」画面を開いて「Ctrl」+「F」を押し、開いた検索画面に #container と入力しますと、最初の #container とは別の場所 /* レイアウトごとの設定 */ 　で 3件ヒットします。シンプル系スキンのスタイルシートには、3カラム、左2カラム、右2カラムのスタイルが一緒に記述されていますので3件ヒットしますが、実際に指定が生かされているのは自分が使用しているカラムの1件になります。

? カスタマイズ：カラム編

3カラムのコンテナ（#container ）の背景色を変える

/* 3 column multi */
body#multi #main {
	margin:0;
}
body#multi #container {
	width: 858px;
	margin: 0 auto; background: #fff 
; 
}

2カラム（左サイドバー）のコンテナ（#container ）の背景色を変える

/* 2column 左サイドバー */
body#doubleL #main {
	margin:0 5px;
}
body#doubleL #container {
	width: 798px;
	margin: 0 auto; background: #fff 
; 
}

2カラム（右サイドバー）のコンテナ（#container ）の背景色を変える

/* 2column 右サイドバー */
body#doubleR #main {
	margin:0 5px;
}
body#doubleR #container {
	width: 798px;
	margin: 0 auto; background: #fff 
; 
}

自分が使用しているカラムの background: #fff ; のカラーコードを好みの色のコードに変更して「プレビュー」を押して確認してください。変更した色で問題ない場合は「保存」を押して作業は終了です。

コンテナ（#container ）の背景色を変更しますと、記事の一番下に表示される灰色文字のインフォメーションリンク（.entryInfo）に白い背景色（#FFF）が指定されていますので、そこだけ色が変更されません。
気になる方はスタイルシートの最後の方に記述があります /* 記事表示部分 */ の #entries .entryInfo の背景色を同じ色に変更してください。

#entries .entryInfo {
	border-bottom: 1px dashed #ccc; background: #FFF 
; 
padding:3px;
	font-size: x-small;
	color: #999;
}

/* ヘッダー / フッター背景 */ の色を変える

続きまして、ヘッダ（#header）とフッタ（#footer）の背景色の変更の仕方を説明します。「スタイルの編集」を選択して「スタイルシートの編集」画面を開いて /* ヘッダー / フッター背景 */ という記述を探してください。上の方に記述されていますので、少しスクロールすればすぐ見つかります。

/* ヘッダー / フッター背景 */ #header,#footer 	{ background: #cf5527 
; } 
/* ブログタイトルと説明文 */
h1#blogTitle a , #footer , #fotter 
a { 
 ?? 
 /* タイプミス（誤記述） #footer , #footer 
a { に修正 */ 
 color: #FFF 
;　　　 ?? 
　/* ブログタイトルの文字色 */ 
}
h1#blogTitle a:hover { color: #FFF 
;　　　 ?? 
　/* マウスが上に乗っている状態のブログタイトルの文字色 */ 
}
#header #blogDesc { color: #f2c9b9 
;　　 ?? 
　/* ブログの紹介文の文字色 */ 
}

#header,#footer { background: #cf5527 ; } のカラーコードを好みの色のコードに変更して「プレビュー」を押して確認してください。変更した色で問題ない場合は「保存」を押して作業は終了です。
このようにヘッダ（#header）とフッタ（#footer）の背景色に同じ色を指定にする場合は、セレクタをカンマ「 , 」で区切って記述します。よく使用されている記述方法なので覚えておくと便利です。
ちなみにその下の #footer , #fotter a { の記述に誤りがありますので、 #footer , #footer a { に修正しておきましょう。

ブログタイトルの文字色の変更は、 h1#blogTitle a, #footer ,#footer a { color: #FFF ; } と h1#blogTitle a:hover { color: #FFF ; } のカラーコードを変更します。
ブログの紹介文の文字色の変更は、 #header #blogDesc { color: #f2c9b9 ; } のカラーコードを変更します。

ブログタイトルのフォントサイズを変更する

ブログタイトルには見出しを示す「h1」要素が指定されていますので、フォントサイズは「h1」要素のパーセンテージで変更します。「スタイルの編集」を選択して「スタイルシートの編集」画面を開き、「Ctrl」+「F」を押し、開いた検索画面に　見出し　と入力して /* 見出しの初期設定 */ を検索します。

/* 見出しの初期設定 */
h1,h2,h3,h4,h5,h6 {
	font-weight: bold;
	margin: 0.5em 0;
} h1 {
	font-size: 150 
%;
} 
h2 {
	font-size: 130%;
}
h3 {
	font-size: 115%;
}

ブログタイトルのフォントサイズを変更するには h1 { font-size: 150 %; } のパーセンテージを変更します。
ちなみに、「h2」は記事タイトル、「h3」はトラックバックタイトル、コメントタイトル等に使用されています。

ワンポイント：ヘッダの背景に画像を挿入する方法

/* ヘッダー / フッター背景 */
#header { 
	background:url(https://fanblogs.jp/XXXX.jpg) left top no-repeat;
	height:280px;
}
#footer 	{ background: #cf5527; }

※ background:url( https://fanblogs.jp/XXXX.jpg ) の赤文字部分を表示したい画像のURLに変更してください。
※ 指定した画像の幅がコンテナの幅と同じ、もしくは広い場合での記述方法になります。
※ #footer { background: #cf5527 ; } のカラーコードは、私のスキン（SundyBrown）のカラーコードです。

幅（width）の指定はしないで高さ（height）だけを指定しますが、背景に画像を挿入した場合 padding が指定されていますと、指定した高さより padding の指定分だけ長く表示されます。
シンプル系スキンではヘッダ（#header）の上下に 10px の padding が指定されていますので、仮に表示させたい画像の高さが 300px の場合は、padding 指定の 20px を差し引いて height:280px; と指定しますと、300px の高さで画像が表示されます。

次回は記事タイトルのカスタマイズをしながら、背景（background）、枠線（border）、外側の余白（margin）、内側の余白（padding）についての説明をします。

※ 上記 CSS コードはコピー＆ペーストでそのままご利用になれます。
※ CSS コードのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

≪　前の記事に戻る　｜次の記事を読む　≫