好きなXmasイルミ

このブログで使用しているスライドショーＣＳＳのソースです。
　
ｈｔｍｌで「photo-slideshow10」と「photo-illumination5」を使って
写真１０枚と５枚指定のスライドショーが表現できます。

はてなブログにＣＳＳを設定
スライドショータイプのｈｔｍｌ例
点滅タイプのｈｔｍｌ例
写真の枚数が足りない時
スライドショータイプのＣＳＳ　
点滅タイプのＣＳＳ
注意：

はてなブログにＣＳＳを設定

　
管理画面の[デザイン]→[カスタマイズ]→[デザインCSS]でＣＳＳ編集画面を開き
下記の緑の文字のＣＳＳを追加します。
　

スライドショータイプのｈｔｍｌ例

photo-slideshow10　で写真を指定します。
　
　<div class="photo-slideshow10">
　　<img src="写真１" />
　　<img src="写真２" />
　　<img src="写真３" />
　　<img src="写真４" />
　　<img src="写真５" />
　　<img src="写真６" />
　　<img src="写真７" />
　　<img src="写真８" />
　　<img src="写真９" />
　　<img src="写真１０" />
</div>

点滅タイプのｈｔｍｌ例

photo-illumination5　で写真を指定します。
　
　<div class="photo-illumination5">
　　<img src="写真１" />
　　<img src="写真２" />
　　<img src="写真３" />
　　<img src="写真４" />
　　<img src="写真５" />
　</div>

写真の枚数が足りない時

同じ写真を２回指定することで数合わせをしています。

例：写真が３枚しか無い時

スライドショータイプのＣＳＳ　

写真がフェードアウトしてスライドショー

photo-slideshow10 { /* CSS クラス名 photo-slideshow8 */
height: 800px; /* 表示したい大きさ */
margin: 0 0 -120 0; /* 上右下左のマージンをまとめて指定する */
max-width: 100%; /* 領域の幅の最大値 */
position: relative; /* ボックスの配置方法 relative=相対位置への配置 */
width: 800px; /* 表示したい大きさ、height と合わせる */
}
.photo-slideshow10 img { /* CSS クラス名 photo-slideshow8 の子孫セレクタ = img */
animation: slide10 100s infinite; /* アニメーションプロパティ一括指定空白で区切る */
/* animation-name、 animation-duration、 animation-timing-function、*/
/* animation-delay、animation-iteration-count、 animation-direction */
/* animation-name アニメーション名 = slide10 */
/* animation-duratio アニメーション一回分の時間の長さを指定秒 */
/* animation-iteration-count 繰り返し回数を指定 infinite=無限 */
-webkit-animation: slide10 100s infinite; /* -webkit- ベンダープレフィックス Chrome、Safari指令 */
height: auto; /* 領域の高さを指定自動設定 */
max-width: 100%; /* 領域の幅の最大値 */
opacity: 0; /* 要素の透明度を指定 0.0（完全に透明） */
position: absolute; /* ボックスの配置方法絶対位置=画像を全て重ねる */
}
/* @keyframes = アニメーションのキーフレーム (通過点)で制御する */
@keyframes slide10 { /* animation-name slide10 のキーフレームを指定 */
0% {opacity:0} /* opacity(要素透明度指定) 0.0（完全に透明）～1.0（完全に不透明） */
10% {opacity:1}
25% {opacity:0}
}
/* -webkit- = ベンダープレフィックス Chrome、Safari指令 */
@-webkit-keyframes slide10 {
0% {opacity:0} /* opacity(要素透明度指定) 0.0（完全に透明）～1.0（完全に不透明）*/
10% {opacity:1}
25% {opacity:0}
}
/* 各画像のアニメーションの開始時間をずらす */
/* CSS クラス名 photo-slideshow8 */
/* E:nth-of-type(n) 、疑似クラス、 n番目のその種類の要素にスタイルを適用する */
.photo-slideshow10 img:nth-of-type(1) {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
.photo-slideshow10 img:nth-of-type(1) {animation-delay: 0s; -webkit-animation-delay: 0s;}
.photo-slideshow10 img:nth-of-type(2) {animation-delay: 10s; -webkit-animation-delay: 10s;}
.photo-slideshow10 img:nth-of-type(3) {animation-delay: 20s; -webkit-animation-delay: 20s;}
.photo-slideshow10 img:nth-of-type(4) {animation-delay: 30s; -webkit-animation-delay: 30s;}
.photo-slideshow10 img:nth-of-type(5) {animation-delay: 40s; -webkit-animation-delay: 40s;}
.photo-slideshow10 img:nth-of-type(6) {animation-delay: 50s; -webkit-animation-delay: 50s;}
.photo-slideshow10 img:nth-of-type(7) {animation-delay: 60s; -webkit-animation-delay: 60s;}
.photo-slideshow10 img:nth-of-type(8) {animation-delay: 70s; -webkit-animation-delay: 70s;}
.photo-slideshow10 img:nth-of-type(9) {animation-delay: 80s; -webkit-animation-delay: 80s;}
.photo-slideshow10 img:nth-of-type(10) {animation-delay: 90s; -webkit-animation-delay: 90s;}

点滅タイプのＣＳＳ

写真が一瞬で切り変わるためクリスマスツリー点滅が表現できます。

.photo-illumination5 { /* CSS クラス名 photo-illumination5 */
height: 800px; /* 表示したい大きさ */
margin: 0 0 -120 0; /* 上右下左のマージンをまとめて指定する */
max-width: 100%; /* 領域の幅の最大値 */
position: relative; /* ボックスの配置方法 relative=相対位置への配置 */
width: 800px; /* 表示したい大きさ、height と合わせる */
}
.photo-illumination5 img { /* CSS クラス名 photo-illumination5 の子孫セレクタ = img */
animation: illum5show 10s infinite; /* アニメーションプロパティ一括指定空白で区切る */
/* animation-name、 animation-duration、 animation-timing-function、*/
/* animation-delay、animation-iteration-count、 animation-direction */
/* animation-name アニメーション名 = illum5show */
/* animation-duratio アニメーション一回分の時間の長さを指定秒 */
/* animation-iteration-count 繰り返し回数を指定 infinite=無限 */
-webkit-animation: illum5show 10s infinite; /* -webkit- ベンダープレフィックス Chrome、Safari指令 */
height: auto; /* 領域の高さを指定自動設定 */
max-width: 100%; /* 領域の幅の最大値 */
opacity: 0; /* 要素の透明度を指定 0.0（完全に透明） */
position: absolute; /* ボックスの配置方法絶対位置=画像を全て重ねる */
}
/* @keyframes = アニメーションのキーフレーム (通過点)で制御する */
@keyframes illum5show { /* animation-name illum5show のキーフレームを指定 */
0% {opacity:0} /* opacity(要素透明度指定) 0.0（完全に透明）～1.0（完全に不透明） */
0.2% {opacity:1} /* ５個の画像なので１つ20%で不透明にする */
20% {opacity:1}
20.2% {opacity:0}
}
/* -webkit- = ベンダープレフィックス Chrome、Safari指令 */
@-webkit-keyframes illum5show {
0% {opacity:0} /* opacity(要素透明度指定) 0.0（完全に透明）～1.0（完全に不透明）*/
0.2% {opacity:1} /* ５個の画像なので１つ20%で不透明にする */
20% {opacity:1}
20.2% {opacity:0}
}
/* 各画像のアニメーションの開始時間をずらす */
/* CSS クラス名 photo-illumination5 */
/* E:nth-of-type(n) 、疑似クラス、 n番目のその種類の要素にスタイルを適用する */
.photo-illumination5 img:nth-of-type(1) { animation-delay: 0s; -webkit-animation-delay: 0s;}
.photo-illumination5 img:nth-of-type(2) { animation-delay: 2s; -webkit-animation-delay: 2s;}
.photo-illumination5 img:nth-of-type(3) { animation-delay: 4s; -webkit-animation-delay: 4s;}
.photo-illumination5 img:nth-of-type(4) { animation-delay: 6s; -webkit-animation-delay: 6s;}
.photo-illumination5 img:nth-of-type(5) { animation-delay: 8s; -webkit-animation-delay: 8s;}

注意：

ＣＳＳはインターネットを調べながら作成したものです、使い方が間違えていたらすみません。

f:id:neko_suika:20181126085019j:plain