ブログの背景画像・色を変える

ブログ全体の背景の色を決める場合は、cssで「body」タグに対して指定をします。

単色で色を指定したい

背景に色を指定する場合は以下のようになります。

1

background-color:#★★★★★★（お好みの色番号）;

「★★★★★★」の部分は、色番号の数字が入ります。
具体的な番号については、下記サイト等を参考にされてください。
↓
http://www.as-net.com/color.html

背景に画像を使いたい

背景画像を指定するタグは以下のようになります。

1

background-image: url(画像のURL);

画像を使用する場合は、大きいサイズの画像一枚を貼り付けるのでは、
読み込みに時間が掛かり閲覧者に不満が出たり、
閲覧者のブラウザによって表示がおかしくなったりもします。

ですので、一般的には下記のように
サイズの小さい画像を繰り返して表示させる指定にします。

1

background-repeat: ★★★★★★;

「★★★★★★」の部分には、繰り返しの値が入ります。

repeat 敷き詰める （初期値）
repeat-x 水平方向に並べる
repeat-y 垂直方向に並べる
no-repeat 1つだけ表示する

 

そのほかの背景画像に関する指定は、下記を参照されてください。

 

具体的な事例は以下をご覧ください。


頂いたご質問・ご相談

当メルマガをお読みいただいている、奥田さんからご質問を頂きました。

実は今、
JUGEMブログで、自由に使えるテンプレートを使ってブログを作っております。

トップ画像はなんとか完成し、
既存のテンプレートのトップ画像とオリジナルのものを入れ替えることは出来たのですが

元の背景色と合わないので
出来れば、色を変えてみたいと思い

背景の色を変えるために
HTML編集ホームとCSSをさがして

変えたいバックの色のカラーコードを見つけ
多分この色だと思います ⇒ (#999966・・・うすいウグイス色というか淡い黄緑色）

他の色のものと変えてみたのですが
更新をしても、全くテンプレートに
変化がありません。

やはり既存のテンプレート全体の背景色
（この場合、ページのトップから最下部へ・黄緑色のバックがだんだんと薄くなっている）
は、変えることが出来ないのでしょうか？

夏蓮さんおススメのアドオン・Firebugも
インストールして、いろいろいじってみたのですが

どこを触っても・・・出来ませんでした。

何が悪いのでしょうか？

ブラウザはIEとFirefox
両方で試してみたのですが。

いちよう、まだ作りかけで
お恥ずかしいですが

そのブログのURLを載せておきます。

http://happy-tenshi.jugem.jp/

出来るか出来ないかだけでも良いので
お教え頂けないでしょうか？

わがままを言いまして
本当に申し訳ありません。

どうぞ、よろしくお願い致します！

ご質問・ご相談への回答

教えていただいたURLのページを拝見しました。

仰っている背景の部分は、色番号の指定ではなく、画像で指定されていますね。

具体的には、下記のソースの、「background-image:　～」　のところです。

※jm_style.css　内

1
2
3
4
5
6
7
8

body {
margin: 0px auto;
padding: 0px;
background-image:url(http://hanatsukiyo.img.jugem.jp/20080311_88248.jpg);
background-repeat:repeat-x;
background-attachment:fixed;
text-align: center;
}

なので、これをもし画像ではなく、
お好みの色番号で指定されるようでしたら、下記のように修正してみてください。＾＾

1
2
3
4
5
6

body {
margin: 0px auto;
padding: 0px;
background-color:#★★★★★★（お好みの色番号）;
text-align: center;
}

 

修正ポイント1

下記のソースによって、
背景部分に指定した画像が繰り返して表示されるようになっています。

なので、この部分を削除します。
↓

1
2
3

background-image:url(http://hanatsukiyo.img.jugem.jp/20080311_88248.jpg);
background-repeat:repeat-x;
background-attachment:fixed;

背景で指定されている具体的な画像はどれかというと、
この画像ですね。
↓
http://hanatsukiyo.img.jugem.jp/20080311_88248.jpg

 

修正ポイント2

上記の画像の代わりに色番号で背景色を指定すると、
お好みの色で表示されますので、下記のソースを記述します。
↓

1

background-color:#★★★★★★（お好みの色番号）;

　「★★★★★★」の部分は、色番号の数字が入ります。
具体的な番号については、下記サイト等を参考にされてください。
↓
http://www.as-net.com/color.html

 

もしも、いまのブログのように、色が変化するもの（グラデーション）がよければ、
画像を作る必要がありますので、

先ほどの「修正ポイント1」の画像を差換えれば、そのようにも出来ます。

トラックバック&コメント

この記事のトラックバックURL:

まだトラックバック、コメントがありません。

コメントの投稿はこちらから



この記事のコメントだけのRSSフィードを取得