サイドバーにスライドショーを設定するには(画像7枚用) | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:

こんにちは、パソコンインストラクターの川上雄大です。

 

 

 

 

パソコンで見ると、このブログのサイドバーに画像のスライドショーが設置されています。

 

 

過去に、サイドバーにスライドショーを設定するには、といった記事を書いておりますが↓

 

【再アップ記事】サイドバーにスライドショーを設定するには

 

この記事では、5枚の画像だったもので、

 

「画像を増やすにはどうしたらいいでしょうか?」

 

 

といったご質問をいただいております。

 

 

簡単に言うと、

 

・フリースペース編集に画像を追加する

・CSS設定を変更する

 

なのですが。

 

 

ただ、CSSのキーフレーム設定が面倒かと思います。

 

そこで、エクセルでこのキーフレーム設定をみてみると。

 

 

5枚設定の場合は、こんな感じでしょうか。

 

 

6枚設定だと、こんな感じでしょうか。

 

 

7枚設定だと、こんな感じでしょうか。

 

 

 

そして、この↑画像7枚用のタグはこんな感じです↓

 

・フリースペース編集は

 

<div id="simg"><img src="画像URL①" alt="" id="slide1"/><img src="画像URL②"
alt="" id="slide2"/><img src="画像URL③" alt="" id="slide3"/><img src="画像
URL④" alt="" id="slide4"/><img src="画像URL⑤" alt="" id="slide5"/><img
src="画像URL⑥" alt="" id="slide6"/><img src="画像URL⑦" alt=""
id="slide7"/></div>

 

 

 

 

・CSSは

 

 

/*ココからCSSでのスライドショー*/
 
@keyframes slide1 {
0% {opacity: 0;}
5% {opacity: 1;}
15% {opacity: 1;}
20% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes slide2 {
0% {opacity: 0;}
15% {opacity: 0;}
20% {opacity: 1;}
30% {opacity: 1;}
35% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes slide3 {
0% {opacity: 0;}
30% {opacity: 0;}
35% {opacity: 1;}
45% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes slide4 {
0% {opacity: 0;}
45% {opacity: 0;}
50% {opacity: 1;}
60% {opacity: 1;}
65% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes slide5 {
0% {opacity: 0;}
60% {opacity: 0;}
65% {opacity: 1;}
75% {opacity: 1;}
100% {opacity: 0;}
}

@keyframes slide6 {
0% {opacity: 0;}
75% {opacity: 0;}
80% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}

@keyframes slide7 {
0% {opacity: 0;}
90% {opacity: 0;}
95% {opacity: 1;}
100% {opacity: 1;}
}



/*画像ブロック*/
#simg {
position: relative;
width: 100%;
height: auto;
clear: left;
}
 
/*7枚画像の共通設定*/
#slide1,#slide2,#slide3,#slide4,#slide5,#slide6,#slide7 {
animation-duration: 20s;
animation-iteration-count:infinite;
}
 
/*1枚目*/
#slide1 {
animation-name: slide1;
width: 100%;
height: auto;
}
 
/*2枚目*/
#slide2 {
animation-name: slide2;
position: absolute;
left:0px;
top:0px;
width: 100%;
height: auto;
}
 
/*3枚目*/
#slide3 {
animation-name: slide3;
position: absolute;
left:0px;
top:0px;
width: 100%;
height: auto;
}
 
/*4枚目*/
#slide4 {
animation-name: slide4;
position: absolute;
left:0px;
top:0px;
width: 100%;
height: auto;
}
 
/*5枚目*/
#slide5 {
animation-name: slide5;
position: absolute;
left:0px;
top:0px;
width: 100%;
height: auto;
}
 
/*6枚目*/
#slide6 {
animation-name: slide6;
position: absolute;
left:0px;
top:0px;
width: 100%;
height: auto;
}

/*7枚目*/
#slide7 {
animation-name: slide7;
position: absolute;
left:0px;
top:0px;
width: 100%;
height: auto;
}

 

 


といった感じになります。

 

 

 

 

この7枚画像の設定がどんな感じで動いているのか、は

 

 

 

私の音楽用のブログで確認できますので^^!

 

 

 

 

 

※注意!

フリースペース編集やCSSを修正する前に、元のちゃんと動いていたコードはメモ帳などのエディタにコピーしてバックアップしてください!

 

また、修正した後は、ご自分のブログを更新してください。(F5キー、またはCtrl+F5キーなど)

 

 


以上、サイドバーにスライドショーでした。

 

Instagram

 


LIDS札幌・ライフデザインスクール
川上 雄大

 

 

 

 

川上雄大

 

川上 雄大☆パソコンインストラクターさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント