Ameba Ownd で HTML を使って “写真をスライドショー” する場合は、 "HTML" ボック内に "HTML/CSS" 両方のコードを書いています。
目次：
・スライドショーに使用したコード：写真が5枚の時
・表示がうまくいってない例：写真が5枚の時
・写真が9枚の時の例
・写真が5枚の時の例
・スライド数と切り替えのタイミング覚書
✍🏻 スクリプト (script) を使って “写真をスライドショー” を表示する方法も試みていますが、まだ問題が解決されていません 👉🏻 スクリプト (script) を使って “写真をスライドショー” を表示する方法
写真が5枚の時
スライドショーにする写真が5枚の時
<style>
.slide {
position: relative; width: 100%;
padding-top: 75%;
/*アスペクト比を使ってレスポンシブル対応。
今回使用している写真は600px x 450pxなので、
最大公約数 150
600/150=4
450/150=3
アスペクト比は3/4x100=75
*/
overflow: hidden;
background-color: #ffffff; /*背景画像。当ブログの色に合わせて白色を選択*/
}
.slide img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*画像を中心に表示して重ね合わせ*/
width: 100%;
height: auto;
opacity: 0;
/*opacity プロパティの値 0 は透明、1 は不透明*/
animation: slideshow 20s linear infinite;
/*画像表示時間 x 画像枚数 4秒 x 5枚＝20s*/
}
.slide img:nth-child(2) {
animation-delay: 4s;
}
.slide img:nth-child(3) {
animation-delay: 8s;
}
.slide img:nth-child(4) {
animation-delay: 12s;
}
.slide img:last-child {
animation-delay: 16s;
}
@keyframes slideshow {
0% { opacity: 0;
}
10% {
opacity: 1;
}
15% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/*スライドの数：5
切り替えタイミング：20%
切り替えの範囲：15%~25% */
</style>
<div class="slide">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
<img src="img5.jpg" alt="">
</div>
このブログは ameba ownd を使用していますが、写真が保存された場所 (URL) を探す方法が分からなかったので、次の様な方法で得た URL を使用しています。写真を右クリック、イメージを新規タブ(ウインドウ)で開く、URLをコピー。
実際に得られた URL は、https://cdn.amebaowndme.com/madrid-prd/madrid-web/images/sites/499076/16983b78adb3e487e0a83bf9a8d56227_4e5d727fe335f00553dacaee2592a256.jpg?width=960
こんな感じでコピーできたら ?width=960 を削除します。
<img src="https://cdn.amebaowndme.com/madrid-prd/madrid-web/images/sites/499076/16983b78adb3e487e0a83bf9a8d56227_4e5d727fe335f00553dacaee2592a256.jpg" alt="Massif des Écrins">
alt : 写真の説明を書く：Massif des Écrins
写真が5枚の時
そのほかの条件を色々と試してみる。
表示がうまくいってない例：写真が5枚
表示に問題がある例：スキップした感じ
@keyframes slideshow {
0% {
opacity: 0;
}
4.16% {
opacity: 1;
}
33.33% {
opacity: 1;
}
41.66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
この設定だと、次の写真を表示する時に、スキップした感じになる。
想定通りのスライドショー：写真が9枚
想定通りのスライドショー：写真が10枚
スライド数と切り替えのタイミング
スライドの数：3
切り替えタイミング：33%
切り替えの範囲：28%~38%
スライドの数：4
切り替えタイミング：25%
切り替えの範囲：20%~30%
スライドの数：5
切り替えタイミング：20%
切り替えの範囲：15%~25%
スライドの数：9
切り替えタイミング：11%
切り替えの範囲：6%~16%
スライドの数：10
切り替えタイミング：10%
切り替えの範囲：5%~15%
ところで、ブログやホームページにアフィリエイトを貼っていますか？アフィリエイトを始めるならA8.net (エーハチネット) がオススメです。このホームページでも使っています👉🏻 まずは無料会員登録だけでも してみてはいかがでしょうか？他社もいろいろ試しているけれど、A8.net (エーハチネット) は登録されている企業が多く、使い勝手がいいです。
✍🏻 Ameba Ownd で HTML を使って “表” を書く方法覚書 📝
✍🏻 テキストから音声ファイル (mp3) を作成し、その音声ファイルをブログ、ホームページに埋め込み、貼り付けて、再生する方法 🎶
0コメント