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

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

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

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

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


今回の、スライドショー部分のみを下記に変えてください



/* ----------------------------------------------------- */
/* 　アメンバー限定記事用　スライドショー用　ＣＳＳ３　　*/
/* ----------------------------------------------------- */
/* ＩＥ７　ＩＥ8　では機能しません 　　　　　　　　　　　*/
/* 画像３枚用です　　　　　　　　　　　　　　　　　　　　*/
/* ----------------------------------------------------- */
.slide_wrap3M {/* スライドショーの表示エリア*/
position:relative;
width:800px; /* 画像の幅 */
height:533px; /* 画像の高さ */
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_3M 12s ease 0s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01_3M 12s ease 0s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01_3M 12s ease 0s infinite normal;/* Safari and Chrome */
-o-animation: slide01_3M 12s ease 0s infinite normal;/* Opera */
-ms-animation: slide01_3M 12s ease 0s infinite normal;/* IE9 IE10 */
}
.slide_wrap3M img.slw2 {/* 画像２枚目 */
animation: slide01_3M 12s ease -4s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01_3M 12s ease -4s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01_3M 12s ease -4s infinite normal;/* Safari and Chrome */
-o-animation: slide01_3M 12s ease -4s infinite normal;/* Opera */
-ms-animation: slide01_3M 12s ease -4s infinite normal;/* IE9 IE10 */
}
.slide_wrap3M img.slw3 {/* 画像３枚目 */
animation: slide01_3M 12s ease -8s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01_3M 12s ease -8s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01_3M 12s ease -8s infinite normal;/* Safari and Chrome */
-o-animation: slide01_3M 12s ease -8s infinite normal;/* Opera */
-ms-animation: slide01_3M 12s ease -8s infinite normal;/* IE9 IE10 */
}

/* ----------------------------------------------------- */
/* 　アメンバー限定記事用　スライドショー用　ＣＳＳ３　　*/
/* ----------------------------------------------------- */
/* ＩＥ７　ＩＥ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: slide01 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.slw8 {/* 画像８枚目 */
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 */
}

/* ----------------------------------------------------- */
/* 　アメンバー限定記事用　スライドショー用　ＣＳＳ３　　*/
/* ----------------------------------------------------- */
/* ＩＥ７　ＩＥ8　では機能しません 　　　　　　　　　　　*/
/* 画像６枚用です　　　　　　　　　　　　　　　　　　　　*/
/* ----------------------------------------------------- */
.slide_wrap {/* スライドショーの表示エリア*/
position:relative;
width:500px; /* 画像の幅 */
height:750px; /* 画像の高さ */
z-index:20;
overflow:hidden;
border:23px solid #ffffff;/* 枠 */
}
.slide_wrap img {
margin-left:0px;
margin-right:0px;
}
.slide_wrap img {position:absolute; top:0; left:0; }/* 画像全体の設定 */
/* 画像６枚×４秒＝２４秒 ０秒から４秒単位で減少させる */
.slide_wrap img.slw1 {/* 画像１枚目 */
animation: slide01 24s ease 0s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 24s ease 0s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 24s ease 0s infinite normal;/* Safari and Chrome */
-o-animation: slide01 24s ease 0s infinite normal;/* Opera */
-ms-animation: slide01 24s ease 0s infinite normal;/* IE9 IE10 */
}
.slide_wrap img.slw2 {/* 画像２枚目 */
animation: slide01 24s ease -4s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 24s ease -4s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 24s ease -4s infinite normal;/* Safari and Chrome */
-o-animation: slide01 24s ease -4s infinite normal;/* Opera */
-ms-animation: slide01 24s ease -4s infinite normal;/* IE9 IE10 */
}
.slide_wrap img.slw3 {/* 画像３枚目 */
animation: slide01 24s ease -8s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 24s ease -8s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 24s ease -8s infinite normal;/* Safari and Chrome */
-o-animation: slide01 24s ease -8s infinite normal;/* Opera */
-ms-animation: slide01 24s ease -8s infinite normal;/* IE9 IE10 */
}
.slide_wrap img.slw4 {/* 画像４枚目 */
animation: slide01 24s ease -12s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 24s ease -12s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 24s ease -12s infinite normal;/* Safari and Chrome */
-o-animation: slide01 24s ease -12s infinite normal;/* Opera */
-ms-animation: slide01 24s ease -12s infinite normal;/* IE9 IE10 */
}
.slide_wrap img.slw5 {/* 画像５枚目 */
animation: slide01 24s ease -16s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 24s ease -16s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 24s ease -16s infinite normal;/* Safari and Chrome */
-o-animation: slide01 24s ease -16s infinite normal;/* Opera */
-ms-animation: slide01 24s ease -16s infinite normal;/* IE9 IE10 */
}
.slide_wrap img.slw6 {/* 画像６枚目 */
animation: slide01 24s ease -20s infinite normal;/* CSS3 Firefox etc. */
-moz-animation: slide01 24s ease -20s infinite normal;/* Firefox(old Ver) mozilla */
-webkit-animation: slide01 24s ease -20s infinite normal;/* Safari and Chrome */
-o-animation: slide01 24s ease -20s infinite normal;/* Opera */
-ms-animation: slide01 24s ease -20s infinite normal;/* IE9 IE10 */
}
@keyframes slide01{
0% { z-index: 6;opacity:1.0; }/* 表示中部分 */
10% { z-index: 6;opacity:1.0; }/* 表示中部分 */
20% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
30% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
40% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
50% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
60% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
70% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
80% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
90% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
100% { z-index: 6;opacity:1.0; }/* 表示部中分 */
}
@-moz-keyframes slide01{ /* Firefox(old Ver) mozilla */
0% { z-index: 6;opacity:1.0; }/* 表示中部分 */
10% { z-index: 6;opacity:1.0; }/* 表示中部分 */
20% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
30% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
40% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
50% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
60% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
70% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
80% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
90% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
100% { z-index: 6;opacity:1.0; }/* 表示部中分 */
}
@-webkit-keyframes slide01{ /* Safari and Chrome */
0% { z-index: 6;opacity:1.0; }/* 表示中部分 */
10% { z-index: 6;opacity:1.0; }/* 表示中部分 */
20% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
30% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
40% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
50% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
60% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
70% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
80% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
90% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
100% { z-index: 6;opacity:1.0; }/* 表示部中分 */
}
@-o-keyframes slide01{ /* Opera */
0% { z-index: 6;opacity:1.0; }/* 表示中部分 */
10% { z-index: 6;opacity:1.0; }/* 表示中部分 */
20% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
30% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
40% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
50% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
60% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
70% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
80% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
90% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
100% { z-index: 6;opacity:1.0; }/* 表示部中分 */
}
@-ms-keyframes slide01{ /* IE9 and IE10 */
0% { z-index: 6;opacity:1.0; }/* 表示中部分 */
10% { z-index: 6;opacity:1.0; }/* 表示中部分 */
20% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
30% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
40% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
50% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
60% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
70% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
80% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
90% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
100% { z-index: 6;opacity:1.0; }/* 表示部中分 */
}


@keyframes slide01_3M{
0% { z-index: 6;opacity:1.0; }/* 表示中部分 */
20% { z-index: 6;opacity:1.0; }/* 表示中部分 */
40% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
60% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
80% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
100% { z-index: 6;opacity:1.0; }/* 表示部中分 */
}
@-moz-keyframes slide01_3M{ /* Firefox(old Ver) mozilla */
0% { z-index: 6;opacity:1.0; }/* 表示中部分 */
20% { z-index: 6;opacity:1.0; }/* 表示中部分 */
40% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
60% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
80% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
100% { z-index: 6;opacity:1.0; }/* 表示部中分 */
}
@-webkit-keyframes slide01_3M{ /* Safari and Chrome */
0% { z-index: 6;opacity:1.0; }/* 表示中部分 */
20% { z-index: 6;opacity:1.0; }/* 表示中部分 */
40% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
60% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
80% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
100% { z-index: 6;opacity:1.0; }/* 表示部中分 */
}
@-webkit-keyframes slide01_3M{ /* Safari and Chrome */
0% { z-index: 6;opacity:1.0; }/* 表示中部分 */
20% { z-index: 6;opacity:1.0; }/* 表示中部分 */
40% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
60% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
80% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
100% { z-index: 6;opacity:1.0; }/* 表示部中分 */
}
@-o-keyframes slide01_3M{ /* Opera */
0% { z-index: 6;opacity:1.0; }/* 表示中部分 */
20% { z-index: 6;opacity:1.0; }/* 表示中部分 */
40% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
60% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
80% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
100% { z-index: 6;opacity:1.0; }/* 表示部中分 */
}
@-ms-keyframes slide01_3M{ /* IE9 and IE10 */
0% { z-index: 6;opacity:1.0; }/* 表示中部分 */
20% { z-index: 6;opacity:1.0; }/* 表示中部分 */
40% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
60% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
80% { z-index: 5;opacity:0.0; }/* 非表示中部分 */
100% { z-index: 6;opacity:1.0; }/* 表示部中分 */
}



/*--------------------------------- */
/* アメンバー限定記事の記事幅を変更 */
/*--------------------------------- */
#frame{width:1200px;} /* コンテンツ全体 */
#main {width:1000px;} /* 記事全体 */
.entry{width:1000px !important;} /* 記事個別 */
/*--------------------------------- */