ページ全体に背景画像を指定する

HOME > カスタマイズ Tips > ページ全体に背景画像を指定する

21:10 2009年03月01日

ページ全体に背景画像を指定する

今回は、ページ全体に背景画像を指定してみます。ついでに、背景色を指定する方法もご紹介します。

今回使用する画像は、ページ全体にタイリング可能な背景画像です。

←これ、見えますか？ 4 x 4px の、とても小さな画像です。タイリングとは、タイルのように縦方向、横方向に敷き詰めることを指します。つまり、並べてもつなぎ目が気にならない画像のことで、Photoshop の「パターン」と同じですね。

画像作成が苦手な方は

Photoshop でパターンを自作したことが無い方には、下記のような背景画像ジェネレータが便利です。

CSS テンプレートのカスタマイズ方法

手を加えるテンプレートは「スタイルシート」のみです。

以下の部分を確認してください。

body {

   position: center;

   color: #000;

   margin: 0px;

   background: #E0E0E0;

   text-align: center;

}

「background:」が背景を装飾するためのプロパティです。デフォルトテンプレートでは、薄いグレー（＃E0E0E0）が背景色として指定されています。

以下のように背景画像を指定します。

body {

   position: center;

   color: #000;

   margin: 0px;

   background: #背景画像に近い色 url(背景画像のURL);

   text-align: center;

}

完成

これで、背景画像がページ全体に並びました。
「background」に背景色と背景画像を同時指定していますが、この背景色は何らかの理由で背景画像が取得出来なかった場合の保険のようなものです。

おまけ：背景色を変更する方法

背景色のみを変えたい場合は、「background:」の後に #（ハッシュ）で始まる６桁の番号からなるカラーコードを指定するか、「red」「black」などのカラーネームを指定します。カラーコードとカラーネームを探す際は、下記のサイトが便利です。

ページ全体の背景を変えるだけでも、ブログの雰囲気がガラッと変わりますね。
ブログ全体のデザインにもよりますが、主役はコンテンツですから、背景はなるべく落ち着いた色・柄にすることをお薦めします。

同じカテゴリー（カスタマイズ Tips）の記事画像

同じカテゴリー（カスタマイズ Tips）の記事

「お気に入り」の中に区切り線を入れる
カスタムプラグインをサイドバーと同じ装飾にする
カレンダーの土曜日と日曜日の色を変える
ソラマメヘッダーの見た目を変える
アーカイブ一覧をリスト表示にする２
フッターのカスタマイズ

Wrote by Yume｜Comments(8)

Comments

cocoro Akina

2009年07月06日 12:42

初めまして
背景画像の固定はどうやればいいですか？

Yume
2009年07月06日 23:47

>cocoro Akina さん

１枚の背景画像を繰り返さずに左上に固定したい場合は、

background: url(画像のURL) top left no-repeat;

としてみてください。

Yume
2009年07月06日 23:51

（上記の続き）

同様に、背景画像を上部中央に固定したい場合は「top left」の部分を「top center」に、右上の場合は「top right」、左下は「bottom left」、下中央は「bottom center」、右下は「bottom right」に書き換えてください。

cocoro Akina

2009年07月08日 11:13

全体的に並べたい場合はどうすればいいですか？

Yume
2009年07月08日 13:23

> cocoro Akina さん

背景画像を全体的に並べたい場合は本記事でご紹介しているソースの通りです。

パー

2011年04月14日 13:31

初めまして。こんにちわ！

ブログ作りで大変参考にさせてもらってます。
有難う御座います。

背景画像を上下一列に固定したいのですが
苦戦しております；
二つのタグを入れてみたりしたのですが＞＜

もう1点、サイドバーの最新記事、カテゴリー横の日付と記事数は削除できるのでしょうか。

どうぞ宜しくお願い致します。

Yume

2011年04月16日 00:37

＞パーさん
初めまして。コメント有り難うございます。

まず最初のご質問「背景画像を上下一列に固定」ですが、例えば背景画像を→■とすると

（ブラウザの上部）
ーーーーーーーーーーーーーー
■■■｜ブログの中身｜■■■
　背景｜ブログの中身｜背景
　背景｜ブログの中身｜背景
　背景｜ブログの中身｜背景
　背景｜ブログの中身｜背景
■■■｜ブログの中身｜■■■
ーーーーーーーーーーーーーー
（ブラウザの下部）

こんな感じでしょうか？

一番外側（bodyタグ直下）のdivの中に、もう一つdivを追加し、それぞれに背景画像の表示位置を指定する方法があります。
例えば、一番外側のdivのbackgroundには背景画像の表示位置を上部に、追加したdivのbackgroundには背景画像の表示位置を下部に指定します。この時、内側のdivに背景色を指定すると外側のdivに指定した画像が隠れてしまうので、transparent（透明）の状態でなければいけません。ご注意下さい。

二つ目のご質問、サイドバーの記事数と日付について。

この部分はシステム側は出力しているのでユーザーが自由にカスタマイズすることは出来ません。が、無理矢理「見えなくする」ことは出来ます。
記事数と日付にはリンクが付いていませんから、消したい部分の文字色をサイドバーの背景と同じ色にするのです。

例えば、「最新記事」の日付を消したい場合はサイトバー（#links）のリンク色が指定されているソースの【後ろ】に

.recententry .sidebody {
color:#171717;/*背景色と同じ色*/
}

と書くと、見えなくなります。
あまり良い例ではないかもしれませんが、ご参考までに。

パー
2011年04月19日 23:02

お返事遅くなりました。
解りやすく説明して頂き有難うございます。
教えて頂いた方法で
無事に設置することが出来ました！
これからも少しずつ勉強していこうと思うので
是非参考にさせて下さい。

お名前 *必須 Name
メールアドレス E-mail
Webサイト URL
情報を記憶 Cookie
コメント *必須 Comment	上の画像に書かれている文字を入力して下さい
	＜ご注意＞書き込まれた内容は公開され、ブログの持ち主だけが削除できます。確認せずに書込