ファンブログの背景色を変更してみよう！

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

CSSで全てのコンテンツ要素（content）が生成する背景（background）、枠線（border）、外側の余白（margin）、内側の余白（padding）で構成される領域のことを「ボックスモデル」といいます。
カスタマイズ：ボックス編では、この「ボックスモデル」の仕組みに基づいたカスタマイズをファンブログのスタイルシートと照合しながら説明していきます。
Box model

border

content

padding

border

margin

今回はブログの背景（html）とコンテナ（#container）の左右枠線の色の変更の仕方を説明します。
「スタイルシート」の記述を変更しますので、作業の前にバックアップをとっておくことを推奨します。

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

「スタイルの編集」を選択して「スタイルシートの編集」画面を開いて、 /* -------- 色・見た目の編集 -------- */ という記述を探してください。上の方に記述されていますので、少しスクロールすればすぐ見つかります。

/* -------- 色・見た目の編集 --------  */ /* 背景 */
html 		{ background: #F4A460 
; } 
/* 文字色 */
body 		{ color:#333;}
/* リンクの色と装飾 */
a:link 		{ color:#cf5527;text-decoration:underline; }
a:visited 	{ color:#cf5527; text-decoration:underline; }
a:hover 	{ color:#333; text-decoration:none; }
a:active 	{ color:#333; text-decoration:none; } /* コンテナの左右枠線 */
#container {
	border-left:1px solid #333 
;
	border-right:1px solid #333 
;
}

/* 背景 */ の色を変える

html { background: #F4A460 ; } のカラーコードを好みの色のコードに変更して「プレビュー」を押して確認してください。変更した色で問題ない場合は「保存」を押して作業は終了です。
背景色を微調整したい場合は「背景色コントローラ」が便利です。ソースコードはこちらで公開・再配布しています。

? 「背景色コントローラ Fine」背景色のRGBを256階調で指定、変更できるコントローラ

/* コンテナの左右枠線 */ の色を変える

#container {
border-left（左の枠線）: 1px（線の太さ） solid（線種：実線） #333 （カラーコード）;
border-right（右の枠線）: 1px（線の太さ） solid （線種：実線） #333 （カラーコード）; }
のカラーコードを好みの色のコードに変更して「プレビュー」で確認、「保存」を押して作業は終了です。

デフォルトの枠線色（ #333; ）ではコントラストが強いので、 #666; #999; #ccc; というような淡い色に変更していきますとコントラストが弱くなります。枠線を表示させたくない場合は線の太さを 0px にしてください。

ワンポイント：背景にテクスチャ画像を挿入する方法

背景に「 Subtle Patterns 」のようなテクスチャ画像を挿入したい場合は以下のように記述してください。

/* -------- 色・見た目の編集 --------  */ /* 背景 */
html 		{ background:url( https://fanblogs.jp/XXXX.png 
) left top repeat; }

※ background:url( https://fanblogs.jp/XXXX.png ) の赤文字部分をテクスチャ画像のURLに変更してください。
※ テクスチャ画像のURLはアップロードして保存した画像のアドレス（URL）を指定してください。

? 保存した画像のアドレス：（URL）の見つけ方

いかがでしたでしょうか？背景色や枠線は全ての要素に存在しますので、「ボックスモデル」のことが理解出来ますと記事やサイドバーの背景色や枠線も CSS で指定することが出来るようになります。
次回は、コンテナ（#container）、ヘッダ（#header）、フッタ（#footer）について説明します。

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

｜　次の記事を読む　≫