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

前回はコンテナ(#container)の左右の枠線の変更の仕方を説明しましたので、今回は背景色の変更の仕方を説明します。コンテナ(#container)にはデフォルトで白い背景色(#FFF)が指定されているのですが、コンテナ(#container)の記述には左右の枠線は記述されていますが、背景(background)の記述がありません。
#container {
	border-left:1px solid #333;
	border-right:1px solid #333;
}
何故、背景(background)の記述がないのに、背景色が指定されているのかを説明しますと、実はこの記述の下の方にもコンテナ(#container )の記述があり、そこに背景色(background: #FFF;)が指定されているんです。

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

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

「スタイルの編集」を選択して「スタイルシートの編集」画面を開いて「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(http://fanblogs.jp/XXXX.jpg) left top no-repeat;
	height:280px;
}
#footer 	{ background: #cf5527; }
background:url(http://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 コードのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

この記事へのコメント

« 前の記事 : 「背景色コントローラ Fine」背景色のRGBを256階調で指定、変更できるコントローラ
ファンブログのフッタにナビゲーションとコピーライト(Copyright)を表示させてみよう! : 次の記事 »

ブログパーツ
美容整形
Related Posts Plugin for WordPress, Blogger...