背景画像を変える | 【CSS魂】*アメブロCSSテンプレート,ダウンロード*Raidi Office

【CSS魂】*アメブロCSSテンプレート,ダウンロード*Raidi Office

シンプルで使いやすいアメブロのCSSを配布、公開しています

アメブロで背景画像を設定する方法です。

◆1、まずは、CSSの編集画面に行きます。
 (自分のブログのCSSを編集できるようにする手順はコチラ
  http://ameblo.jp/css-template/entry-11190523534.html


◆2、CSSコード内の中央付近にある、


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

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



という部分の、
.skinBody{ 

}/* ←ブログ全体に背景を敷きたいとき */

の間にコードを書いていきます。



◆3、そこに以下の3行のコードを記述します。

background: #FFFFFF url(http://***);
background-repeat: no-repeat;
background-position: top center;


【1行目】
・url(http://***);の部分のカッコ内に背景画像のURLを書いてください。
・#FFFFFF は、背景画像の余白部分の色指定です。ちなみに、#FFFFFFだと100%の白色になります。

【2行目】
・background-repeatは、画像を並べて表示するかどうかを指定します。
・上記の「no-repeat」の部分を、以下に書き換えることで変更できます。

 repeat  (縦横に背景画像を並べて表示。)
 repeat-x (横方向にのみ画像を並べて表示。)
 repeat-y (縦方向にのみ画像を並べて表示。)
 no-repeat (画像を並べず、1つだけ表示。)

【3行目】
・画像を縦横に並べて表示する場合は、この行は削除して大丈夫です。
・background-positionは、画像の位置を指定します。
 left、right、top、bottom、center などで場所を指定できます。
 組み合わせて指定することもできます。
 「top center」だと中央上、「top left」だと左上に画像が表示されます。


◆4、「保存」を押して完了です。