FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

  • コメント : -
  • | このエントリーを含むはてなブックマーク
  • トラックバック : -
この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://morepc.blog21.fc2.com/tb.php/51-0eae0165

-件のトラックバック

-件のコメント

コメントの投稿

投稿フォーム

投稿した内容は管理者にだけ閲覧出来ます

背景の色を変えたり、画像を使いたいっ!

背景の色や背景画像の変更もbackgroundプロパティを使うことで、簡単に変更することができちゃいます。


サンプルとして、以下のCSSをご覧ください。

BODY{
   background-color:#fff; /*背景色を白に設定した場合*/
  }



もうお分かりになりますよね。

【#fff;】の部分に他の色を指定すれば、簡単に色を変えることができます。

また、【body】の部分を【menu】や【h1】など、他の要素にたいして行えば、全体の背景ではなくメニュー部分の背景を変えることができます。

例えば、よく使われているケースとしてブログのタイトル部分は【h1】で囲まれているケースが多いのですが、【h1】(ブログのタイトルの背景)の場合は、次のようになります。


h1{
  background-color : #fff  /* ブログタイトルの背景を白に設定 */
}



ここまではOKですか?

OKであれば次に背景に画像を使う場合になりますが、これはbackground-imageプロパティを使うことになります。

ただし、画像の並べ方や表示位置によって書き方が変わってきます。

まずは下をご覧になってください。


body { background-image : url("画像のパス"); /* 背景画像の設定 */ background-repeat : repeat; /* 背景画像を横縦タイル状に並べる */ background-position : left top; /* 開始位置を画面左上に設定 */ background-attachment : fixed; /* 背景画像の位置を固定 */ }


???の部分があるかもしれませんので、それぞれの意味を書きますと、

・url("画像のパス")
画像のパスというのは、アナタのブログに画像をファイルアップデートしないといけないのですが、そのときのurlを記入すればOKです。

・repeat 
これは、背景画像は縦横に連続して表示されます。ただし、これに対し細かな指定することもできますので、下記に紹介しておきます。

・repeat-x
背景画像は横方向のみに繰り返し表示されるようになります。

・repeat-y
背景画像は縦方向のみに繰り返し表示されるようになります。

・no-repeat
背景画像は繰り返されずにひとつだけ表示されるようになります。

・fixed
これは、背景画像の位置を固定することができます。

・scroll
これは、背景画像を他の内容と共にスクロールさせることができます。

また、画像を自分の好きな位置に表示させるようにするには、横方向と縦方向の開始位置を順にスペースで区切って数値で指定すると、自分の表示させたい部分に表示させることができます。

いかがでしたか?なぁ~んとなく分かっていただけましたか?

このブログ内では個別に対応させていただく事はしておりませんけど、メルマガ登録していただいてる方は、個別で対応させていただいているので、どうしても自分のブログをカスタマイズしたい!という方は無料のメルマガに登録してみてください。


<<< BACKさあ!ブログ(blog)をカスタマイズしよう!のTOPページへ>>>


スポンサーサイト

この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://morepc.blog21.fc2.com/tb.php/51-0eae0165

0件のトラックバック

0件のコメント

コメントの投稿

投稿フォーム

投稿した内容は管理者にだけ閲覧出来ます

スポンサードリンク


Recent-enries

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。