【再アップ記事】サイドバーにスライドショーを設定するには | パソコンが好きになるブログ〜表技・裏技・便利技伝授！
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

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

北海道札幌市中央区　大通駅徒歩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キーを押してください。）
（自分のブログを表示して、更新してください。）



おさらいしますと、

 

１．スライドする画像を作成する
２．アメブロに画像をアップロードして、画像URLを取得する
３．フリースペースにHTMLを記述する
４．CSSコードを記述する
５．ブラウザを更新する

 


という流れでできます。

 

 

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

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