新デザインの変更⑨（自動で切替る背景）

アメブロカスタマイズ

新しいCSS編集用デザインを使って自分専用のオリジナルデザインにするための『ステップ⑨』です。

新デザインの変更②（背景に画像を挿入し位置を固定）
こちらの記事で行った、カスタマイズを少し変更し、2つの背景が交互に入れ替わるようにするための手順がご覧になれます。

カスタマイズ前の準備

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

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

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

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

カスタマイズ手順

CSSの編集手順

あらかじめ、2枚目となる 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」をスクロールし、下記のコードまで移動します。
/* 背景に画像を固定（iOS対応版） */
body:before{
background-image: url("以前アップロードした1枚目の画像のURL");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #666;
content: "";
display: block;
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: -1;
}

上記のコードを下記のコードと置き換えます。

/* 背景に画像を固定（iOS対応版） */
body:before, body:after{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #000;
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
  opacity:0;
}
body:before{
  background-image: url("以前アップロードした1枚目の画像のURL");
  animation: fadeinout 10s 0s infinite;
}
body:after{
  background-image: url("今回アップロードした2枚目の画像のURL");
  animation: fadeinout 10s 5s infinite;
}
@keyframes fadeinout {
 0% { opacity:0; }
 20% { opacity:1; }
 50% { opacity:1; }
 80% { opacity:0; }
 100% { opacity:0; }
}