広告

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
posted by fanblog

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

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

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

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

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

ファンブログの記事タイトルの配色を変更してみよう!

記事タイトルの属性には、枠線(border)、背景(background)、内側の隙間(padding)、外側の隙間(margin)という ファンブログの背景色を変更してみよう!の冒頭で説明しました「ボックスモデル」の基本的な属性が入っていますので、カスタマイズをしていくことで「ボックスモデル」の仕組みが理解しやすくなると思います。

全ての属性について解説していきますと非常に長い記事になってしまいますので、今回はスタイルを変更しないで簡単に行える、背景、枠線、文字の配色の変更方法を解説します。枠線(border)、内側の隙間(padding)、外側の隙間(margin)につきましては次回の記事に分けて解説していきます。
ブログパーツ
美容整形
×

この広告は30日以上新しい記事の更新がないブログに表示されております。