ブログ全体の背景画像を固定してみよう。［CSS編集用］

ご訪問ありがとうございます。
ブログランキングの応援
をして頂けると励みになります。

ここをクリックしてくださいね。
　　　　　　

FC2ブログランキング

今回は、ブログ全体の背景画像を固定してみましょう。

【１】画像の保存

まず、背景画像を用意します。
デジカメで撮った写真を任意のフォルダに保存しました。

【２】CSS編集画面の表示

［マイページ］→［クイックリンク］→［スキンCSSの編集］の順にクリックすると、
CSSの編集画面が開きます。

（注意）アメブロは、どんどん改良されていて、現在は次のようにして下さいね。

[マイページ]→[デザインの変更]→CSS編集用デザインの[CSSの編集]の順にクリックすると、CSSの編集画面が開きます。

【３】画像のアップロード

［ブログデザインヘッダ・背景用画像の追加］の［参照］ボタンをクリックして、
使用する画像を選択し、［アップロード］ボタンをクリックします。

すると、次の通り、アップロードできました。

【４】CSSの追加

CSSの編集画面の一番最後の次に下記のCSSをコピペします。

/* ■ブログ全体の背景画像■ */
.skinBody{
background-image:url(上記【３】の赤枠内の画像のパスをここにコピペする);
background-repeat:no-repeat;/* 繰り返さない */
background-attachment:fixed;/* 固定 */
background-position:left top;/* 位置を左上に */
}

これで背景画像が設置できない場合は、次のCSSをコピペしてみてください。

/* ■ブログ全体の背景画像■ */
.skinBody{
background-image:url(上記【３】の赤枠内の画像のパスをここにコピペする) !important;
background-repeat:no-repeat !important;/* 繰り返さない */
background-attachment:fixed !important;/* 固定 */
background-position:left top !important;/* 位置を左上に */
}

【５】背景画像の設置完了

以上で背景画像の設置が完了しました。