背景画像を使う場合の注意点と設定方法

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

当ブログデザインリニューアルに向け、まず背景の設定からしてみたいと思います。背景画像の設定方法については、ちょっと難しい！アメブロカスタマイズのほうで「背景画像設定の考え方」という記事で解析を行なっていますので、一緒にご覧いただけるとうれしいです。あ、ページ幅は最小1100ピクセルですけどね（笑）

新背景画像の特徴

新デザインに引く背景の特徴は、

ヘッダバナーエリアとそれ以下を分離して見せる
繰り返しパターン画像を使う
コンテンツ部分と背景部に境界を作成する

の3点。ヘッダーバナーエリアとの分離については、ヘッダ画像を入れる際に修正しようと思いますので、最後のコンテンツ部と背景部の境界というのが、今回の大きなテーマになります。

背景を置く際に気にしたい点

アメブロのCSS編集可能デザインのコンテンツ部分の幅は980ピクセルあります。そして、ワイドサイドメニューの幅は300ピクセル。ワイドサイドメニューを使う場合、右あるいは左に配置することになるのですが、留意しておいたほうがよい点は、幅いっぱいを使ったデザイン前提で考えられているという点です。

サイドバーに配置する各パーツの幅は300ピクセルで、これはCSSの編集で狭くできなくもないのですが、広告バナーサイズの横幅も300ピクセル。こちらは、それ以下にしようがありません。

ですのでたとえば、ページコンテンツを白、背景を黒に設定したとすると、ワイドサイドメニュー境界＝背景との境界ということになり、デザイン的には少し唐突感が出たり、違和感を感じさせることになりかねません。

それを回避するためには、ページ幅980ピクセルの両側に一定のスペースを置くのがいちばんよさそうに思います。

新デザインの背景画像は、両側に20ピクセルのマージンをもたせて、ページコンテンツの幅980ピクセルを加えた合計1020ピクセルを白で塗りつぶし、その両側に繰り返しパターンを置いた画像を使用することにしました。

背景画像の幅は2400ピクセル！　かなり解像度の高いディスプレイにも対抗できるようにしました（笑）

画像をアップロードする

使いたい背景画像ですが、幅が800ピクセルを超えているので画像フォルダからアップロードすると、強制的に幅が800ピクセルまで縮小されてしまいます。

画像サイズの制限があるとは書かれていませんので、画像フォルダを使用する際は注意が必要です。

こうした場合は、スキンCSSの編集画面の上にある「ブログデザインヘッダ・背景用画像の追加」を使います。5つまでしか使えませんので、ご利用は計画的に（笑）。

全体の基本レイアウトはセンタリング

見れば分かりますが、アメブロのページはセンタリング設定です。ブラウザをいっぱいいっぱいに広げると、ページはその真中に表示されるように設定されています（ただ、最低のページ幅は1100ピクセルに設定されていますので、ブラウザの閲覧領域がそれ以下だと右側が隠れて表示されます）。

1100ピクセルの設定は下記のように記述されています（編集可能CSSにある設定ではありません）。

body {
	min-width:1100px;
}

mini-widhtというのは、文字通り最低の幅という意味です。ちょっと古いブラウザでは対応していないものもあったのですが、今の各ブラウザの最新バージョンでは対応してるようです。正確にはどうなのか、じゃまくさいので私は調べませんが（笑）

そして、センタリングに関する設定は下記のように行われています。よく分からない方は、「あ、そうなの」と思っておいていただいてもまったく問題ありません（こちらも編集可能CSSでの設定ではありません）。

.skinHeaderArea {
	width:980px;
	margin:0 auto;
	overflow:hidden;
}
.skinContentsArea {
	width:980px;
	margin:0 auto;
	padding-bottom:30px;
	overflow:hidden;
	zoom:1;
}

width:980px;というのが幅の設定です。そして、センタリングを規定している部分が、margin:0 auto;です。

.skinHeaderAreaというのが、最上部のバナー部分、.skinContentsAreaがその下のページの部分に対する設定を意味しています。margin設定に関しては、「サイドメニューをカスタマイズする！」でちょっと詳しく書いています。上下0ピクセル、左右は自動（auto）。幅980ピクセルの左右には、自動的に余った幅が均等に割り当てられるという寸法です。

ですので、背景画像も画面の中央に置き、縦方向に繰り返して表示されるように設定します。先にも書きましたが、真ん中の1020ピクセルをページ背景用の白で塗りつぶし、その両側に背景模様が配置された画像です。

ブラウザの全画面に対して背景を設定したい場合は、div.skinbodyという名前のボックス（箱）に対して行います。編集可能CSSにも下記のようにコメントつきで書かれています。

/* (3-1) ボディ（全体）
--------------------------------------------*/


/* skinBody ボディ */
.skinBody{}/* ←ブログ全体に背景を敷きたいとき */

この部分を、こうします

/* (3-1) ボディ（全体）
--------------------------------------------*/


/* skinBody ボディ */
.skinBody{
	background: url('画像のパス') center top repeat-y;
}/* ←ブログ全体に背景を敷きたいとき */

設定の解説

center top repeat-yの部分は順番に、横方向の位置、縦方向の位置、背景画像の並び設定をしています。他にどんな指定が可能か？　なんて興味をもたれた方は、「CSS　background」とかで検索してみればよいと思います。この記述の意味は、「横方向（x軸）は真ん中（center）、縦方向（y軸）は上（top）に画像を置いて、それを、縦方向（y軸）に繰り返す（repeat-y）」ということになります。

ここまで何となく分かれば、この記事の内容についてはOKです！

背景画像を設定する前の、当ブログの画像を記録しておきました。

「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座