デザインの変更②（背景に画像を挿入し位置を固定）

アメブロカスタマイズ

自分専用のオリジナルデザインにするための『ステップ②』です。

背景に、画像を挿入し、ページをスクロールしても背景が一緒にスクロールしないようにするための手順をご覧になれます。

カスタマイズ前の準備

この記事を読む前に、こちらの設定をしておいてくださいね。

デザインの変更①（CSS編集用デザインを適用する）

変更に失敗し元に戻したい場合、こちらの記事をご覧ください。

デザインの変更（初期化用CSS）

カスタマイズ手順

あらかじめ、3840×2160（16：9）の1MB以下の画像を用意します。
※上記のサイズは、4ｘフルHD対応のためです。
※どうしても1MBを超える場合は、2560×1440でも良いかと思います。
『ブログ管理』画面を開きます。
https://blog.ameba.jp/ucs/top.do
『デザインの設定』ボタンをクリックします。

https://blog.ameba.jp/ucs/skin/skinselecttop.do
「デザインの変更」の「適用中のデザイン」にある『CSSの編集』をクリックします。

https://blog.ameba.jp/ucs/editcss/srvcssupdateinput.do
「ブログデザインヘッダ・背景用画像の追加」の『参照』をクリックし、手順 1 で用意した画像を指定し、『アップロード』ボタンをクリックします。
「アップロードされた画像」の『この画像のパス』をコピーします。
「現在使用中のプロぐデザインCSS」をスクロールし、「（1-2）基本背景」に
```
/* 背景に画像を固定（iOS対応版）*/
body:before{
  background-image:url("https://stat.blogskin.ameba.jp/blogskin_images/20200401/11/31/xe/j/o38402560youx2moon1585706403620.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  background-color: #ffffff;
  content:"";
  display:block;
  position:fixed;
  width:100%;
  height:100vh;
  top:0;
  left:0;
  z-index:-1;
}
```
上記のコードをコピーします

※パスをコピーした例
background-image:url("https://stat.blogskin.ameba.jp/blogskin_images/20200401/11/31/xe/j/o38402560youx2moon1585706403620.jpg");
「コンテンツ背景、ヘッダー以下の背景色」の部分を下記のように変更し、『保存』をクリックします。

/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background-color: #ffffff;
}

を
```
/* コンテンツ背景 */
.skin-blogBody, {
}

/* ヘッダー以下の背景色 */
.skin-blogBodyInner {
  background-color: #ffffff;
}
```