Ameba Ownd でスクリプト (script) を使って “写真をスライドショー” する場合は、 "HTML" ボック内に <head> ~ </head>, <body> ~ </body>, <script> ~ </script> コードを書いています。
⚠️ 現時点での問題点：高さ調整がなぜか難しい。このページを携帯電話とパソコンで見比べてみてください。
height: 400px にすると、携帯電話 (縦) では写真全体が表示されるのに、パソコンでは下部が、あまり気にならない程度に少し切れる。もちろん高さの px を大きくすればパソコンの画面でも写真全体が表示される。そうすると、今度は携帯電話で見た時に問題が発生する。携帯電話で見ると、height: の値が大きいほど、スライドショーとその後の文字との間隔に大きなブランクができる。
height: 200px にすると、パソコンでは写真の下部が大幅に切れるけれど、携帯電話 (縦) で見るとそうでもない。でも携帯電話を横にしてみると (ワイド) 写真は明らかに下部の部分が切れている。スライドショーとその後の文字との間隔はそれほど気にならない。
height: 400px
height: 300px;
height: 250px;
height: 200px;
３枚の写真を使ってスライドショーを作る場合
<!DOCTYPE html>
<html>
<head>
<style>
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
height: 400px; /* Adjust the height as needed (ここの調整は重要です。今回の写真は600x450pxを使用。height は max 600px ぐらいがいいのかも？) */) */
overflow: hidden;
}
/* Hide the images by default */
.mySlides {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides">
<!-- Slides -->
<div class="mySlides">
<img src="Photo 1.jpg" style="width:100%" alt="Photo 1">
</div>
<div class="mySlides">
<img src="Photo 2.jpg" style="width:100%" alt="Photo 2">
</div>
<div class="mySlides">
<img src="Photo 3.jpg" style="width:100%" alt="Photo 3">
</div>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.opacity = "0";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1;
}
slides[slideIndex - 1].style.opacity = "1"; setTimeout(showSlides, 5000); // Change slide every 5 seconds
}
</script>
</body>
</html>
✍🏻 ホームページ Ameba Ownd でスクリプト (script) を使わないで “写真をスライドショー” する方法覚書 📝
0コメント