こんにちは、パソコンワンポイントレッスン!
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"を削除してください。)
フリースペース編集
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;}
}
↑↑ここまで↑↑
以上で、このように↓サイドバーで画像をスライドショーすることができます!!
ブラウザの更新は忘れないでくださいませ!(Windowsの方はF5キーを、Macの方はcommand+Rキーを押してください。)
(自分のブログを表示して、更新してください。)
おさらいしますと、
2.アメブロに画像をアップロードして、画像URLを取得する
3.フリースペースにHTMLを記述する
4.CSSコードを記述する
5.ブラウザを更新する
という流れでできます。
LIDS札幌・ライフデザインスクール
川上 雄大