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

難易度表示付き記事一覧はこちらです

ログ解析を見ていますと、よく「背景」「CSS」といったキーワードで検索して、当ブログの記事を読んでいただいているようです。

CSS編集可能デザインに背景設定する場合、いくつかの注意点があるのですが、ある程度HTMLとCSSの基本を理解していないと少し難しいところがあるかも知れません。

そこで今回は、実習を通じて少しでも理解を深めていただければという狙いから「アメブロの背景画像設定」を行う方法を解説したいと思います。

当ブログで使用している背景画像と同じものを含めて、16のフリー素材を用意しました。

手続きはすごく簡単！

背景画像素材をダウンロードして好きな素材を選択する
画像を「ブログデザインヘッダ・背景用画像の追加」でアメブロに登録する
「この画像のパス」をコピーして指定のCSSに貼り付ける
スキンCSSの編集をする

これで完了です。

それぞれの手順を、「作業内容」と「補足説明」に分けています。もし分からないことがあれば、「補足説明」もご一読ください。読み飛ばしていただいても背景画像設定はできると思いますが、各作業内容についての理解を深めることができると思います。

手順1：背景画像素材をダウンロードして好きな素材を選択する

作業内容

16種類の背景画像が入ったzip圧縮ファイルを私のサーバーにアップしています。下記URLをクリックして、デスクトップにダウンロードしてください。
http://www.jalan2.net/bgckground-images.zip（209KB）

圧縮ファイルを解凍しますと、readm.htmlというファイルが見つかると思います。画像一覧が確認できるようになっていますので、お好きな画像を選択してください。

画像が決まったら右クリックして「名前を付けて画像を保存」。デスクトップに保存しておけばよいと思います。

補足説明

背景素材は、当ブログで使用している背景を含めて、色数が8色。背景とページ部分の境界にシャドウがあるもの・ないもの各2種。合計16種類用意しました（下画像）ので、お好きな画像を使用いただければと思います。

画像のサイズは、それぞれ横2400ピクセル×縦36ピクセル。薄い模様がついており、縦方向に繰り返すことで途切れない連続パターンになるようにつくっています。

横を2400ピクセルと広くとっているのは、解像度の高いディスプレイでも途中で模様が途切れないようにするため。白くなっている中心部分にみなさんのブログのページが入るようになっています。

CSS編集デザインでページ幅をまだ変更していない場合、どのレイアウトを選択していても、サイドバーとコンテンツ部分の合計の幅は980ピクセル。それに対して、画像の白い部分の幅は1020ピクセル。

ページの幅と同じにしてしまうと、サイドバーと隣接して背景がはじまることになりますので見た目が悪くなります。両側に20ピクセルの空きを設けることで、背景とコンテンツがバランスよく見えるようにつくられています。

手順2：画像を「ブログデザインヘッダ・背景用画像の追加」でアメブロに登録する

作業内容

アメブロのマイページで、左上の「クイックリンク」＞「スキンCSSの編集」をクリックします。

「ブログデザインヘッダ・背景用画像の追加」のタイトルの下の参照ボタンを押して、先程デスクトップに保存した背景画像を選択、［アップロード］ボタンを押します。登録が完了したら「アップロードした画像」の下に画像のサムネイルと「この画像のパス」が表示されます。

「この画像のパス」の部分は後でコピーしますので、画面はこのままにしておきます。

補足説明

画像は、「画像フォルダ」からも登録できますが、横幅800ピクセル以上の画像は800ピクセルに縮小して登録されてしまうため使うことができなくなってしまいます。幅800ピクセル以上の画像を登録したい場合は、「ブログデザインヘッダ・背景用画像の追加」を使います。ただ、5点までしか登録できませんのでご注意ください。

手順3：「この画像のパス」をコピーして指定のCSSに貼り付ける

CSSを編集するソフトをお持ちでしたらそのソフトを起動します。決まったソフトがなければ、メモ帳を起動します。メモ帳は、「スタートボタン」＞「すべてのプログラム」＞「アクセサリ」とたどっていけば見つかります（WindowsXPの場合）。

以下のソースコードをコピーして、CSS編集ソフトあるいはメモ帳に貼り付けます。

/* （3-1）skinBody ボディの設定の上書き */
.skinBody{
	background: url('画像のパス') center top repeat-y;
}

貼り付けたら、黄色い文字の部分（画像のパス）を先ほどアップロードした「背景画像のパス」で置き換えます。

手順2で、そのままにしておいた画面の画像のサムネイルの下にある欄の文字をコピーして、黄色い文字の部分を消し、そこに貼りつければよいわけですね。

作業が完了すれば、たとえば、以下のようになるはずです（途中で切れていると思いますが、コピー＆ペーストすれば全部読めます。画像のパスの部分は、個人個人で違っています）。

/* （3-1）skinBody ボディの設定の上書き */
.skinBody{
	background: url('http://stat.blogskin.ameba.jp/blogskin_images/20120113/09/35/b0/g/o24000036jalan2-net1326415096094.gif') center top repeat-y;
}

ブラウザの画面はこの次のステップでも使いますので、そのままにしておいてください。

手順4：スキンCSSの編集をする

さて、いよいよスキンCSSの編集です。

ブラウザの画面を少し下にスクロールしてゆけば、@charset "utf-8";という文字で始まる枠が見えると思います。この枠のなかに書かれている設定を変えることで、ブログのデザインを自由自在に変更することができます。

作業としては枠をいちばん下までスクロールして、

/*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊


 (4) その他、拡張


＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/

/* その他、拡張があれば記述 */

と書かれた部分の下に、先程画像のパスで置き換えたCSSの設定を全部コピーして貼り付け、枠の下の［保存］ボタンを押せば完了です。

簡単な作業ですので間違えることはないと思いますが、枠のなかのCSSファイルのバックアップを取っておくことをおすすめします。

補足説明

CSSを編集する場合、うまくいかなかった場合や、元に戻したい場合に備えて、ファイルのバックアップを取ることをおすすめします。バックアップファイルがあれば、そのファイルをコピーしてスキンCSSの編集欄に貼りつければ、問題ない状態に戻すこともすぐにできます。

ファイルバックアップについては以下の記事にまとめておりますので、よろしければご一読ください。

【文字色変更】カスタマイズ準備編

うまくいきましたでしょうか？

作業が完了したら、ブログ画面を確認してみてください。さて、うまくいきましたでしょうか？

たまにですが、［保存］ボタンを押してもずっと更新中で作業が完了しなかったり、タイムアウトしてしまったりする場合がありいます。そういう場合は、アドレス欄の横の［×］ボタンを押して（IEの場合）もう一度やり直せばスムースにいく場合が多いです。

うまくいったけど、思っていたイメージと違うという場合は、ぜひ他の色の画像も試してみてください。きっとイメージにあう色があると思います。使わなくなった画像は後でもよいので、「ブログデザインヘッダ・背景用画像の追加」のリストのなかから削除しておいてくださいね。

デスクトップに保存した背景画像は、作業完了後は削除します。

背景画像設定については他にも記事を書いています。あわせて読んでいただけるとより理解が深まると思います。最後までおつきあいいただき、ありがとうございました。

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

もし記事が気に入ったら、クリックいただければうれしいです
またのご訪問、お待ちしております

【即席】アメブロの背景画像設定（素材付き）