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

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


テーマ:

こんにちは、パソコンワンポイントレッスン!
PCインストラクターの川上です。


2015年06月14日(日) 13時08分03秒にアップしていた記事ですが、

 

2017年3月からのアメブロ常時SSL化によって、スクリプトを使ったスライドショーが動かなっていますので、CSSを使ったスライドショーに変更した記事に修正いたします。

 

ーーーーーーーーーーーーーーーーーーーーーーー

 

さらに、レオ父さんから、コメントいただきましたので、さらに再アップします^^!

ーーーーーーーーーーーーーーーーーーーーーーー

このようなご質問をいただいておりまして。

 

川上雄大のワンポイントレッスン!

 


花梨さん、いつもありがとうございます<m(__)m>


あ、「囲み枠」や「サムネイル付き紹介タグ」でいっぱいいっぱいだよ~~~^^;

と言う方もいらっしゃると思いますが、現在私のやってるサイドバーでのスライドショーの設置方法をお知らせいたしますね。(パソコンでの説明になります。)

 

 

 

川上雄大のワンポイントレッスン!

 

 

 


サイドバーの幅に合わせて画像を作るとよいです。
(私は5枚作っています。)

ここでは、幅300px×高さ200pxにしています。



そして、アメブロに画像をアップロードして、それぞれの画像URLを取得しておきます。


まずは、フリースペース編集で、次のタグをコピペして、画像URLを画像URL①〜⑤に差し替えます。

 

また、それぞれの画像にリンクを設定したい場合は、<img>タグを<a href="#" target="_blank">〜</a>で囲みます。そして、のところをURLにします。
(別窓で飛ばさない場合は、 target="_blank"を削除してください。)

フリースペース編集

 

<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"/></div>
 
 
CSS
次に、CSSの欄の一番下に、次のコードをコピペします。
 
↓↓ここから↓↓
 
/*ココからCSSでのスライドショー*/
 
@keyframes slide1 {
0% {opacity: 0;}
10% {opacity: 1;}
20% {opacity: 1;}
25% {opacity: 0;}
100% {opacity: 0;}
}
 
@keyframes slide2 {
0% {opacity: 0;}
20% {opacity: 0;}
25% {opacity: 1;}
40% {opacity: 1;}
45% {opacity: 0;}
100% {opacity: 0;}
}
 
@keyframes slide3 {
0% {opacity: 0;}
40% {opacity: 0;}
45% {opacity: 1;}
60% {opacity: 1;}
65% {opacity: 0;}
100% {opacity: 0;}
}
 
@keyframes slide4 {
0% {opacity: 0;}
60% {opacity: 0;}
65% {opacity: 1;}
80% {opacity: 1;}
85% {opacity: 0;}
100% {opacity: 0;}
}
 
@keyframes slide5 {
0% {opacity: 0;}
80% {opacity: 0;}
85% {opacity: 1;}
95% {opacity: 1;}
100% {opacity: 1;}
}
 
/*画像ブロック*/
#simg {
position: relative;
width: 100%;
height: auto;
clear: left;
}
 
/*5枚画像の共通設定*/
#slide1,#slide2,#slide3,#slide4,#slide5 {
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;
}
 
 
 

 

↑↑ここまで↑↑

 


以上で、このように↓サイドバーで画像をスライドショーすることができます!!

 

 

 

 

 

川上雄大のワンポイントレッスン!

 

 

 

 


ブラウザの更新は忘れないでくださいませ!(Windowsの方はF5キーを、Macの方はcommand+Rキーを押してください。)
(自分のブログを表示して、更新してください。)



おさらいしますと、

 

1.スライドする画像を作成する
2.アメブロに画像をアップロードして、画像URLを取得する
3.フリースペースにHTMLを記述する
4.CSSコードを記述する
5.ブラウザを更新する

 


という流れでできます。

 

 

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

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

 

川上 雄大☆パソコンインストラクターさんの読者になろう

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

SNSアカウント