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

ファンブログカスタマイズ：ボックス編投稿日：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 コードのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

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