hide 「 ファッションバイヤー 」さんへ | リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）

アメブロ　新ＣＳＳ　ＣＳＳ編集用デザイン　無料
カスタマイズ　アメブロカスタマイズ　初心者
ＣＳＳ　スタイルシート　デザイン
javascript jQuery

hide 「 ファッションバイヤー 」さんへ


＞hide 「 ファッションバイヤー 」さんへ


①　３枚の場合は、下記をCSSの一番最後に追加する（slide_wrap3M）

/* ----------------------------------------------------- */
/* 　アメンバー限定記事用　スライドショー用　ＣＳＳ３　　*/
/* ----------------------------------------------------- */
/* ＩＥ７　ＩＥ8　では機能しません 　　　　　　　　　　　*/
/* 画像３枚用です　　　　　　　　　　　　　　　　　　　　*/
/* ----------------------------------------------------- */
.slide_wrap3M {/* スライドショーの表示エリア*/
position:relative;
width:800px; /* 画像の幅 */
height:1200px; /* 画像の高さ */
z-index:20;
overflow:hidden;
}
.slide_wrap3M img {
margin-left:0px;
margin-right:0px;
}
.slide_wrap3M img {position:absolute; top:0; left:0; }/* 画像全体の設定 */
/* 画像３枚×４秒＝１２秒 ０秒から４秒単位で減少させる */
.slide_wrap3M img.slw1 {/* 画像１枚目 */
animation: slide01 12s ease 0s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 12s ease 0s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 12s ease 0s infinite normal;/* Safari and Chrome */
-o-animation: slide01 12s ease 0s infinite normal;/* Opera */
-ms-animation: slide01 12s ease 0s infinite normal;/* IE9 IE10 */
}
.slide_wrap3M img.slw2 {/* 画像２枚目 */
animation: slide01 12s ease -4s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 12s ease -4s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 12s ease -4s infinite normal;/* Safari and Chrome */
-o-animation: slide01 12s ease -4s infinite normal;/* Opera */
-ms-animation: slide01 12s ease -4s infinite normal;/* IE9 IE10 */
}
.slide_wrap3M img.slw3 {/* 画像３枚目 */
animation: slide01 12s ease -8s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 12s ease -8s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 12s ease -8s infinite normal;/* Safari and Chrome */
-o-animation: slide01 12s ease -8s infinite normal;/* Opera */
-ms-animation: slide01 12s ease -8s infinite normal;/* IE9 IE10 */
}


②　限定記事の画像は下記にする

<div class="slide_wrap3M"><img class="slw1" src="画像のＵＲＬ①" /><img class="slw2" src="画像のＵＲＬ②" /><img class="slw3" src="画像のＵＲＬ③" /></div>



③　８枚の場合は、下記をCSSの一番最後に追加する（slide_wrap8M）

/* ----------------------------------------------------- */
/* 　アメンバー限定記事用　スライドショー用　ＣＳＳ３　　*/
/* ----------------------------------------------------- */
/* ＩＥ７　ＩＥ8　では機能しません 　　　　　　　　　　　*/
/* 画像８枚用です　　　　　　　　　　　　　　　　　　　　*/
/* ----------------------------------------------------- */
.slide_wrap8M {/* スライドショーの表示エリア*/
position:relative;
width:800px; /* 画像の幅 */
height:1200px; /* 画像の高さ */
z-index:20;
overflow:hidden;
}
.slide_wrap8M img {
margin-left:0px;
margin-right:0px;
}
.slide_wrap8M img {position:absolute; top:0; left:0; }/* 画像全体の設定 */
/* 画像８枚×４秒＝３２秒 ０秒から４秒単位で減少させる */
.slide_wrap8M img.slw1 {/* 画像１枚目 */
animation: slide01 32s ease 0s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 32s ease 0s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 32s ease 0s infinite normal;/* Safari and Chrome */
-o-animation: slide01 32s ease 0s infinite normal;/* Opera */
-ms-animation: slide01 32s ease 0s infinite normal;/* IE9 IE10 */
}
.slide_wrap8M img.slw2 {/* 画像２枚目 */
animation: slide01 32s ease -4s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 32s ease -4s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 32s ease -4s infinite normal;/* Safari and Chrome */
-o-animation: slide01 32s ease -4s infinite normal;/* Opera */
-ms-animation: slide01 32s ease -4s infinite normal;/* IE9 IE10 */
}
.slide_wrap8M img.slw3 {/* 画像３枚目 */
animation: slide01 32s ease -8s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 32s ease -8s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 32s ease -8s infinite normal;/* Safari and Chrome */
-o-animation: slde01 32s ease -8s infinite normal;/* Opera */
-ms-animation: slide01 32s ease -8s infinite normal;/* IE9 IE10 */
}
.slide_wrap8M img.slw4 {/* 画像４枚目 */
animation: slide01 32s ease -12s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 32s ease -12s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 32s ease -12s infinite normal;/* Safari and Chrome */
-o-animation: slide01 32s ease -12s infinite normal;/* Opera */
-ms-animation: slide01 32s ease -12s infinite normal;/* IE9 IE10 */
}
.slide_wrap8M img.slw5 {/* 画像５枚目 */
animation: slide01 32s ease -16s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 32s ease -16s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 32s ease -16s infinite normal;/* Safari and Chrome */
-o-animation: slide01 32s ease -16s infinite normal;/* Opera */
-ms-animation: slide01 32s ease -16s infinite normal;/* IE9 IE10 */
}
.slide_wrap8M img.slw6 {/* 画像６枚目 */
animation: slide01 32s ease -20s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 32s ease -20s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 32s ease -20s infinite normal;/* Safari and Chrome */
-o-animation: slide01 32s ease -20s infinite normal;/* Opera */
-ms-animation: slide01 32s ease -20s infinite normal;/* IE9 IE10 */
}
.slide_wrap8M img.slw7 {/* 画像７枚目 */
animation: slide01 32s ease -24s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 32s ease -24s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 32s ease -24s infinite normal;/* Safari and Chrome */
-o-animation: slide01 32s ease -24s infinite normal;/* Opera */
-ms-animation: slide01 32s ease -24s infinite normal;/* IE9 IE10 */
}
.slide_wrap8M img.slw3 {/* 画像８枚目 */
animation: slide01 32s ease -28s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 32s ease -28s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 32s ease -28s infinite normal;/* Safari and Chrome */
-o-animation: slide01 32s ease -28s infinite normal;/* Opera */
-ms-animation: slide01 32s ease -28s infinite normal;/* IE9 IE10 */
}


④　限定記事の画像は下記にする

<div class="slide_wrap8M"><img class="slw1" src="画像のＵＲＬ①" /><img class="slw2" src="画像のＵＲＬ②" /><img class="slw3" src="画像のＵＲＬ③" /><img class="slw4" src="画像のＵＲＬ④" /><img class="slw5" src="画像のＵＲＬ⑤" /><img class="slw6" src="画像のＵＲＬ⑥" /><img class="slw7" src="画像のＵＲＬ⑦" /><img class="slw8" src="画像のＵＲＬ⑧" /></div>