WordPress

WordPressでプラグイン不要のスライドショーを8つ作ってみた

WordPressでスライドショーを使いたいのですが、プラグインを使わずにHTMLとCSSだけで作る方法を教えてください。あと、初心者でも簡単にコピペでできるといいな。

といった悩みにお答えします。

 本記事の内容

  • WordPressでプラグイン不要のスライドショーを8つ作ってみた

 本記事の信頼性


Ryota(@ryotablogger

 

 

 

本記事を読むことにより、プラグイン不要でスライドショーを作ることができます。

そうすることで、サイトの表示速度を遅くすることなくスライドショーをブログに実装できます。

 

WordPressでプラグイン不要のスライドショーを8つ作ってみた

早速、プラグイン不要のスライドショーを8つ紹介します。

コピペで使えるから初心者の方でも簡単にスライドショーを実装できるよ!念の為、バックアップを取っておきましょう!詳しくは以下の記事を見てね。
みほ
関連記事
【超簡単】UpdraftPlusならバックアップと復元がワンクリック!

その➀:シンプル 1

sample_image1
sample_image2
sample_image3
sample_image4

 

 html
<div class="sample1">
<img src="sample_image1" alt=""> <!-- 1枚目 -->
<img src="sample_image2" alt=""> <!-- 2枚目 -->
<img src="sample_image3" alt=""> <!-- 3枚目 -->
<img src="sample_image4" alt=""> <!-- 4枚目 -->
</div>
 CSS
/* ==//外枠//============================================ */
.sample1 {
border: solid 1px #000; /* 線種 線の太さ 線の色 */
width: 500px; /* 横幅 */
height: 350px; /* 縦幅 */
overflow: hidden; /* 上記設定サイズを超える部分は非表示 */
margin: 0 auto; /* 要素の周りの余白(上下 左右) */
position: relative; /* 相対位置へ配置(ここを基準に他の要素を配置する) */
}
/* 500px以下(スマホ用) */
@media screen and (max-width: 500px) {
.sample1 {
max-width: 100%; /* 横幅 */
height: 200px; /* 縦幅 */
}
}
/* ==//画像の表示設定//=================================== */
.sample1 img {
width: 100%; /* 親要素の値 */
height: 100%; /* 親要素の値 */
position: absolute; /* 絶対位置へ配置(親要素(relative)を基準に配置) */
top: 0; /* 親要素(relative)を基準に、指定した位置に表示 */
left: 0; /* 親要素(relative)を基準に、指定した位置に表示 */
transform: translateX(100%); /* 表示位置を右に100%移動 */
-webkit-animation: slide1 16s ease-in-out infinite;
animation: slide1 16s ease-in-out infinite; /* 名前 時間 変化の度合 繰り返し */
}
/* ==//アニメーションの開始時間//============================ */
.sample1 img:nth-of-type(1) { -webkit-animation: slide1-1st 16s ease-in-out 0.1s infinite; animation: slide1-1st 16s ease-in-out 0.1s infinite; } /* 1枚目 */
.sample1 img:nth-of-type(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } /* 2枚目 */
.sample1 img:nth-of-type(3) { -webkit-animation-delay: 4.1s; animation-delay: 4.1s; } /* 3枚目 */
.sample1 img:nth-of-type(4) { -webkit-animation-delay: 8.1s; animation-delay: 8.1s; } /* 4枚目 */
/* ==//画像の動き方(アニメーションの指定)//=================== */
@-webkit-keyframes slide1-1st {
0% { transform: translateX(0); z-index: 1;}
12.5% { transform: translateX(0); z-index: 1;}
25% { transform: translateX(-100%); }
37.5% { transform: translateX(-100%);}
50% { transform: translateX(-100%); }
87.5% { transform: translateX(100%); }
100% { transform: translateX(0); z-index: 1;}
}
@keyframes slide1-1st {
0% { transform: translateX(0); z-index: 1;}
12.5% { transform: translateX(0); z-index: 1;}
25% { transform: translateX(-100%); }
37.5% { transform: translateX(-100%);}
50% { transform: translateX(-100%); }
87.5% { transform: translateX(100%); }
100% { transform: translateX(0); z-index: 1;}
}
@-webkit-keyframes slide1 {
0% { transform: translateX(100%); }
12.5% { transform: translateX(100%); }
25% { transform: translateX(0); z-index: 1; }
37.5% { transform: translateX(0); z-index: 1; }
50% { transform: translateX(-100%); }
87.5% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes slide1 {
0% { transform: translateX(100%); }
12.5% { transform: translateX(100%); }
25% { transform: translateX(0); z-index: 1; }
37.5% { transform: translateX(0); z-index: 1; }
50% { transform: translateX(-100%); }
87.5% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

 

その②:シンプル 2

sample_image1
sample_image2
sample_image3
sample_image4

 

 html
<div class="sample1-1">
<img src="sample_image1" alt=""> <!-- 1枚目 -->
<img src="sample_image2" alt=""> <!-- 2枚目 -->
<img src="sample_image3" alt=""> <!-- 3枚目 -->
<img src="sample_image4" alt=""> <!-- 4枚目 -->
</div>
 CSS
/* ==//外枠//============================================== */
.sample1-1 {
border: solid 1px #000; /* 線種 線の太さ 線の色 */
width: 500px; /* 横幅 */
height: 350px; /* 縦幅 */
overflow: hidden; /* 上記設定サイズを超える部分は非表示 */
margin: 0 auto; /* 要素の周りの余白(上下 左右) */
position: relative; /* 相対位置へ配置(ここを基準に他の要素を配置する) */
}
/* 500px以下(スマホ用) */
@media screen and (max-width: 500px) {
.sample1-1 {
max-width:100%; /* 横幅 */
height: 200px; /* 縦幅 */
}
}
/* ==//画像の表示設定//===================================== */
.sample1-1 img {
width: 100%; /* 親要素の値 */
height: 100%; /* 親要素の値 */
position: absolute; /* 絶対位置へ配置(親要素(relative)を基準に配置) */
top: 0; /* 親要素(relative)を基準に指定した位置に表示 */
left: 0; /* 親要素(relative)を基準に指定した位置に表示 */
-webkit-animation: slide1-1 16s ease-in-out infinite;
animation: slide1-1 16s ease-in-out infinite; /* 名前 時間 変化の度合 繰り返し */
}
/* ==//アニメーションの開始時間&画像の重なる順番//=========== */
.sample1-1 img:nth-of-type(1) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; z-index: 3; } /* 1枚目 */
.sample1-1 img:nth-of-type(2) { -webkit-animation-delay: 4.1s; animation-delay: 4.1s; z-index: 2; } /* 2枚目 */
.sample1-1 img:nth-of-type(3) { -webkit-animation-delay: 8.1s; animation-delay: 8.1s; z-index: 1; } /* 3枚目 */
.sample1-1 img:nth-of-type(4) { -webkit-animation-delay: 12.1s; animation-delay: 12.1s; z-index: 0; } /* 4枚目 */
/* ==//画像の動き方(アニメーションの指定)//================= */
@-webkit-keyframes slide1-1 {
0% { opacity: 1; z-index: 3; }
12.5% { opacity: 1; z-index: 3; }
25% { opacity: 0; }
87.5% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes slide1-1 {
0% { opacity: 1; z-index: 3; }
12.5% { opacity: 1; z-index: 3; }
25% { opacity: 0; }
87.5% { opacity: 0; }
100% { opacity: 1; }
}

 

その③:テキスト付き 1

sample_image1
sample_image2
sample_image3
sample_image4

ここにテキストを入れられるよ

 

 html
 
<div class="sample2">
<!-- 画像エリア -->
<div class="sample2-pic">
<img src="sample_image1" alt="sample_image1">
<img src="sample_image2" alt="sample_image2">
<img src="sample_image3" alt="sample_image3">
<img src="sample_image4" alt="sample_image4">
</div>
<!-- テキストエリア -->
<div class="sample2-cap">
<p>ここにテキストを入れられるよ</p>
</div>
</div>
 CSS
/* ==//外枠//============================================== */
.sample2 {
border: solid 1px #000; /* 線種 線の太さ 線の色 */
width: 500px; /* 横幅 */
height: 350px; /* 縦幅 */
overflow: hidden; /* 上記設定サイズを超える部分は非表示 */
margin: 0 auto; /* 要素の周りの余白(上下 左右) */
position: relative; /* 相対位置へ配置(ここを基準に他の要素を配置する) */
}
/* 500px以下(スマホ用) */
@media screen and (max-width: 500px) {
.sample2 {
max-width:100%; /* 横幅 */
height: 200px; /* 縦幅 */
}
}
/* ==//画像エリア//========================================= */
.sample2-pic {
width: 100%; /* 親要素の値 */
height: 100%; /* 親要素の値 */
}
/* ==//画像の表示設定//===================================== */
.sample2-pic img {
width: 100%; /* 横幅 */
height: 100%; /* 縦幅 */
position: absolute; /* 絶対位置へ配置(親要素(relative)を基準に配置) */
top: 0; /* 親要素(relative)を基準に、指定した位置に表示 */
left: 0; /* 親要素(relative)を基準に、指定した位置に表示 */
transform: translateX(100%); /* 表示位置を右に100%移動 */
-webkit-animation: slide2 16s ease-in-out infinite;
animation: slide2 16s ease-in-out infinite; /* 名前 時間 変化の度合 繰り返し */
}
/* ==//テキストエリア//===================================== */
.sample2-cap {
box-sizing: border-box;
width: 100%; /* 横幅 */
max-height: 100%; /* 縦幅 */
overflow: hidden; /* 上記サイズを超える部分は非表示 */
padding: 10px; /* 余白 */
position: absolute; /* 絶対位置へ配置(親要素(relative)を基準に配置) */
top: 50%; /* 親要素(relative)を基準に指定した位置に表示 */
left: 50%; /* 親要素(relative)を基準に指定した位置に表示 */
transform: translate(-50%, -50%); /* 表示位置を左に50%・上に50%移動 */
z-index: 5; /* 要素の重なる順番 */
text-align: center; /* 文字を中央揃え */
font-size: 120%; /* フォントのサイズ */
font-weight: bold; /* フォントの太さ */
color: #fff; /* フォントの色 */
}
.sample2-cap p {
margin: 0;  /* 要素の周りの余白(上下 左右) */
}
/* ==//アニメーションの開始時間//============================ */
.sample2-pic img:nth-of-type(1) { -webkit-animation: slide2-1st 16s ease-in-out 0.1s infinite; animation: slide2-1st 16s ease-in-out 0.1s infinite; } /* 1枚目の開始時間 */
.sample2-pic img:nth-of-type(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } /* 2枚目の開始時間 */
.sample2-pic img:nth-of-type(3) { -webkit-animation-delay: 4.1s; animation-delay: 4.1s; } /* 3枚目の開始時間 */
.sample2-pic img:nth-of-type(4) { -webkit-animation-delay: 8.1s; animation-delay: 8.1s; } /* 4枚目の開始時間 */
/* ==//画像の動き方(アニメーションの指定)//=================== */
@-webkit-keyframes slide2-1st {
0% { transform: translateX(0); z-index: 1;}
12.5% { transform: translateX(0); z-index: 1;}
25% { transform: translateX(-100%); }
37.5% { transform: translateX(-100%);}
50% { transform: translateX(-100%); }
87.5% { transform: translateX(100%); }
100% { transform: translateX(0); z-index: 1;}
}
@keyframes slide2-1st {
0% { transform: translateX(0); z-index: 1;}
12.5% { transform: translateX(0); z-index: 1;}
25% { transform: translateX(-100%); }
37.5% { transform: translateX(-100%);}
50% { transform: translateX(-100%); }
87.5% { transform: translateX(100%); }
100% { transform: translateX(0); z-index: 1;}
}
@-webkit-keyframes slide2 {
0% { transform: translateX(100%); }
12.5% { transform: translateX(100%); z-index: 1; }
25% { transform: translateX(0); z-index: 1; }
37.5% { transform: translateX(0); z-index: 1; }
50% { transform: translateX(-100%); z-index: 1; }
87.5% { transform: translateX(-100%); z-index: -1; }
100% { transform: translateX(100%); }
}
@keyframes slide2 {
0% { transform: translateX(100%); }
12.5% { transform: translateX(100%); z-index: 1; }
25% { transform: translateX(0); z-index: 1; }
37.5% { transform: translateX(0); z-index: 1; }
50% { transform: translateX(-100%); z-index: 1; }
87.5% { transform: translateX(-100%); z-index: -1; }
100% { transform: translateX(100%); }
}

 

その④:テキスト付き 2

sample_image1
sample_image2
sample_image3
sample_image4

ここにテキストを入れられるよ

 

 html
<div class="sample2-2">
<!-- 画像エリア -->
<div class="sample2-2_pic">
<img src="sample_image1" alt=""> <!-- 1枚目 -->
<img src="sample_image2" alt=""> <!-- 2枚目 -->
<img src="sample_image3" alt=""> <!-- 3枚目 -->
<img src="sample_image4" alt=""> <!-- 4枚目 -->
</div>
<!-- テキストエリア -->
<div class="sample2-2_cap">
<p>ここにテキストを入れられるよ</p>
</div>
</div>
 CSS
/* ==//外枠//============================================== */
.sample2-2 {
border: solid 1px #000; /* 線種 線の太さ 線の色 */
width: 500px; /* 横幅 */
height: 350px; /* 縦幅 */
overflow: hidden; /* 上記設定サイズを超える部分は非表示 */
margin: 0 auto; /* 要素の周りの余白(上下 左右) */
position: relative; /* 相対位置へ配置(ここを基準に他の要素を配置する) */
}
/* 500px以下(スマホ用) */
@media screen and (max-width: 500px) {
.sample2-2 {
max-width:100%; /* 横幅 */
height: 200px; /* 縦幅 */
}
}
/* ==//画像エリア//========================================= */
.sample2-2_pic {
width: 100%; /* 横幅 */
height: 100%; /* 縦幅 */
}
/* ==//画像の表示設定//===================================== */
.sample2-2_pic img {
width: 100%; /* 横幅 */
height: 100%; /* 縦幅 */
position: absolute; /* 絶対位置へ配置(親要素(relative)を基準に配置) */
top: 0; /* 親要素(relative)を基準に、指定した位置に表示 */
left: 0; /* 親要素(relative)を基準に、指定した位置に表示 */
-webkit-animation: slide2-2 16s ease-in-out infinite;
animation: slide2-2 16s ease-in-out infinite; /* 名前 時間 変化の度合 繰り返し */
}
/* ==//テキストエリア//===================================== */
.sample2-2_cap {
box-sizing: border-box;
width: 100%; /* 横幅 */
max-height: 100%; /* 縦幅 */
overflow: hidden; /* 上記サイズを超える部分は非表示 */
padding: 10px; /* 余白 */
position: absolute; /* 絶対位置へ配置(親要素(relative)を基準に配置) */
top: 50%; /* 親要素(relative)を基準に指定した位置に表示 */
left: 50%; /* 親要素(relative)を基準に指定した位置に表示 */
transform: translate(-50%, -50%); /* 表示位置を左に50%・上に50%移動 */
z-index: 5; /* 要素の重なる順番 */
text-align: center; /* 文字を中央揃え */
font-size: 120%; /* フォントのサイズ */
font-weight: bold; /* フォントの太さ */
color: #fff; /* フォントの色 */
}
.sample2-2_cap p {
margin: 0;  /* 要素の周りの余白(上下 左右) */
}
/* ==//アニメーションの開始時間&画像の重なる順番//============ */
.sample2-2 img:nth-of-type(1) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; z-index: 3; } /* 1枚目 */
.sample2-2 img:nth-of-type(2) { -webkit-animation-delay: 4.1s; animation-delay: 4.1s; z-index: 2; } /* 2枚目 */
.sample2-2 img:nth-of-type(3) { -webkit-animation-delay: 8.1s; animation-delay: 8.1s; z-index: 1; } /* 3枚目 */
.sample2-2 img:nth-of-type(4) { -webkit-animation-delay: 12.1s; animation-delay: 12.1s; z-index: 0; } /* 4枚目 */
/* ==//画像の動き方(アニメーションの指定)//=================== */
@-webkit-keyframes slide2-2 {
0% { opacity: 1; z-index: 3; }
12.5% { opacity: 1; z-index: 3; }
25% { opacity: 0; }
87.5% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes slide2-2 {
0% { opacity: 1; z-index: 3; }
12.5% { opacity: 1; z-index: 3; }
25% { opacity: 0; }
87.5% { opacity: 0; }
100% { opacity: 1; }
}

 

その⑤:ナビ付き 1

sample_image1
sample_image2
sample_image3
sample_image4

 

 html
<div class="sample3">
<!-- 画像&ナビエリア -->
<div class="sample3-pic">
<span class="sample3-navi"><img src="sample_image1" alt=""></span> <!-- 1枚目 -->
<span class="sample3-navi><img src="sample_image2" alt=""></span> <!-- 2枚目 -->
<span class="sample3-navi><img src="sample_image3" alt=""></span> <!-- 3枚目 -->
<span class="sample3-navi><img src="sample_image4" alt=""></span> <!-- 4枚目 -->
</div>
</div>
 CSS
/* ==//外枠//============================================== */
.sample3 {
border: solid 1px #000; /* 線種 線の太さ 線の色 */
width: 500px; /* 横幅 */
height: 350px; /* 縦幅 */
overflow: hidden; /* 上記設定サイズを超える部分は非表示 */
margin: 0 auto; /* 要素の周りの余白(上下 左右) */
position: relative; /* 相対位置へ配置(ここを基準に他の要素を配置する) */
}
/* 500px以下(スマホ用) */
@media screen and (max-width: 500px) {
.sample3 {
max-width: 100%; /* 横幅 */
height: 200px; /* 縦幅 */
}
}
/* ==//画像&ナビエリア//==================================== */
.sample3-pic {
width: 100%; /* 横幅 */
height: 100%; /* 縦幅 */
display: flex; /* 子要素をflexboxにする */
justify-content: center; /* アイテム(子要素)を中央に配置 */
align-items: flex-end; /* アイテム(子要素)を末尾に配置 */
}
/* ==//画像の表示設定//===================================== */
.sample3-pic img {
width: 100%; /* 横幅 */
height: 100%; /* 縦幅 */
position: absolute; /* 絶対位置へ配置(親要素(relative)を基準に配置) */
top: 0; /* 親要素(relative)を基準に、指定した位置に表示 */
left: 0; /* 親要素(relative)を基準に、指定した位置に表示 */
transform: translateX(100%); /* 表示位置を右に100%移動 */
-webkit-animation: slide3 16s ease-in-out infinite;
animation: slide3 16s ease-in-out infinite; /* 名前 時間 変化の度合 繰り返し */
}
/* ==//ナビゲーション//=================================== */
.sample3-navi::before {
content: ""; /* 疑似要素のコンテンツ内容 */
display: block; /* インライン要素をブロック要素にする */
width: 15px; /* 横幅*/
height: 15px; /* 縦幅 */
border-radius: 50%; /* 角を丸くする */
margin: 15px 10px; /* 要素の周りの余白(上下 左右) */
position: relative; /* 相対位置へ配置 */
z-index: 5; /* 要素の重なる順番 */
background: #c9f; /* 背景色 */
opacity: .5; /* 透明度 */
-webkit-animation: slide3-btn 16s ease-in-out infinite;
animation: slide3-btn 16s ease-in-out infinite; /* 名前 時間 変化の度合 繰り返し */
}
/* ==//画像&ナビのアニメーション開始時間//=================== */
/* 1枚目 */
.sample3-navi:nth-of-type(1) img { -webkit-animation: slide3-1st 16s ease-in-out 0.1s infinite; animation: slide3-1st 16s ease-in-out 0.1s infinite; }
.sample3-navi:nth-of-type(1)::before { -webkit-animation: slide3_1st-btn 16s ease-in-out 0.1s infinite; animation: slide3_1st-btn 16s ease-in-out 0.1s infinite; }
/* 2枚目 */
.sample3-navi:nth-of-type(2) img,
.sample3-navi:nth-of-type(2)::before { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
/* 3枚目 */
.sample3-navi:nth-of-type(3) img,
.sample3-navi:nth-of-type(3)::before { -webkit-animation-delay: 4.1s; animation-delay: 4.1s; }
/* 4枚目 */
.sample3-pic span:nth-of-type(4) img,
.sample3-pic span:nth-of-type(4)::before { -webkit-animation-delay: 8.1s; animation-delay: 8.1s; }
/* ==//画像の動き方(アニメーションの指定)//=================== */
@-webkit-keyframes slide3-1st {
0% { transform: translateX(0); z-index: 1;}
12.5% { transform: translateX(0); z-index: 1;}
25% { transform: translateX(-100%); }
37.5% { transform: translateX(-100%);}
50% { transform: translateX(-100%); }
87.5% { transform: translateX(100%); }
100% { transform: translateX(0); z-index: 1;}
}
@keyframes slide3-1st {
0% { transform: translateX(0); z-index: 1;}
12.5% { transform: translateX(0); z-index: 1;}
25% { transform: translateX(-100%); }
37.5% { transform: translateX(-100%);}
50% { transform: translateX(-100%); }
87.5% { transform: translateX(100%); }
100% { transform: translateX(0); z-index: 1;}
}
@-webkit-keyframes slide3 {
0% { transform: translateX(100%); }
12.5% { transform: translateX(100%); z-index: 1; }
25% { transform: translateX(0); z-index: 1; }
37.5% { transform: translateX(0); z-index: 1; }
50% { transform: translateX(-100%); z-index: 1; }
87.5% { transform: translateX(-100%); z-index: -1; }
100% { transform: translateX(100%); }
}
@keyframes slide3 {
0% { transform: translateX(100%); }
12.5% { transform: translateX(100%); z-index: 1; }
25% { transform: translateX(0); z-index: 1; }
37.5% { transform: translateX(0); z-index: 1; }
50% { transform: translateX(-100%); z-index: 1; }
87.5% { transform: translateX(-100%); z-index: -1; }
100% { transform: translateX(100%); }
}
/* ==//ナビの動き方(アニメーションの指定)//=================== */
@-webkit-keyframes slide3_1st-btn {
0% { opacity: 1; }
12.5% { opacity: 1; }
25% { opacity: .5; }
37.5% { opacity: .5; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: 1; }
}
@keyframes slide3_1st-btn {
0% { opacity: 1; }
12.5% { opacity: 1; }
25% { opacity: .5; }
37.5% { opacity: .5; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: 1; }
}
@-webkit-keyframes slide3-btn {
0% { opacity: .5; }
12.5% { opacity: .5; }
25% { opacity: 1; }
37.5% { opacity: 1; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: .5; }
}
@keyframes slide3-btn {
0% { opacity: .5; }
12.5% { opacity: .5; }
25% { opacity: 1; }
37.5% { opacity: 1; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: .5; }
}

 

その⑥:ナビ付き 2

sample_image1
sample_image2
sample_image3
sample_image4

 

 html
<div class="sample3-3">
<!-- 画像&ナビエリア -->
<div class="sample3-3_pic">
<span class="sample3-3_navi"><img src="sample_image1" alt=""></span> <!-- 1枚目 -->
<span class="sample3-3_navi><img src="sample_image2" alt=""></span> <!-- 2枚目 -->
<span class="sample3-3_navi><img src="sample_image3" alt=""></span> <!-- 3枚目 -->
<span class="sample3-3_navi><img src="sample_image4" alt=""></span> <!-- 4枚目 -->
</div>
</div>
 

 

 CSS
/* ==//外枠//============================================== */
.sample3-3 {
border: solid 1px #000; /* 線種 線の太さ 線の色 */
width: 500px; /* 横幅 */
height: 350px; /* 縦幅 */
overflow: hidden; /* 上記設定サイズを超える部分は非表示 */
margin: 0 auto; /* 要素の周りの余白(上下 左右) */
position: relative; /* 相対位置へ配置(ここを基準に他の要素を配置する) */
}
/* 500px以下(スマホ用) */
@media screen and (max-width: 500px) {
.sample3-3 {
max-width: 100%; /* 横幅 */
height: 200px; /* 縦幅 */
}
}
/* ==//画像&ナビエリア//==================================== */
.sample3-3_pic {
width: 100%; /* 横幅 */
height: 100%; /* 縦幅 */
display: flex; /* 子要素をflexboxにする */
justify-content: center; /* アイテム(子要素)を中央に配置 */
align-items: flex-end; /* アイテム(子要素)を末尾に配置 */
}
/* ==//画像の表示設定//===================================== */
.sample3-3_pic img {
width: 100%; /* 横幅 */
height: 100%; /* 縦幅 */
position: absolute; /* 絶対位置へ配置(親要素(relative)を基準に配置) */
top: 0; /* 親要素(relative)を基準に、指定した位置に表示 */
left: 0; /* 親要素(relative)を基準に、指定した位置に表示 */
-webkit-animation: slide3-3 16s ease-in-out infinite;
animation: slide3-3 16s ease-in-out infinite; /* 名前 時間 変化の度合 繰り返し */
}
/* ==//ナビゲーション//=================================== */
.sample3-3_navi::before {
content: ""; /* 疑似要素のコンテンツ内容 */
display: block; /* インライン要素をブロック要素にする */
width: 15px; /* 横幅*/
height: 15px; /* 縦幅 */
border-radius: 50%; /* 角を丸くする */
margin: 15px 10px; /* 要素の周りの余白(上下 左右) */
position: relative; /* 相対位置へ配置 */
z-index: 10; /* 要素の重なる順番 */
background: #c9f; /* 背景色 */
opacity: .5; /* 透明度 */
-webkit-animation: slide3-3_btn 16s ease-in-out infinite;
animation: slide3-3_btn 16s ease-in-out infinite; /* 名前 時間 変化の度合 繰り返し */
}
/* ==//画像のアニメーション開始時間&重なる順番//============== */
.sample3-3_navi:nth-of-type(1) img { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; z-index: 3; } /* 1枚目 */
.sample3-3_navi:nth-of-type(2) img { -webkit-animation-delay: 4.1s; animation-delay: 4.1s; z-index: 2; } /* 2枚目 */
.sample3-3_navi:nth-of-type(3) img { -webkit-animation-delay: 8.1s; animation-delay: 8.1s; z-index: 1; } /* 3枚目 */
.sample3-3_navi:nth-of-type(4) img { -webkit-animation-delay: 12.1s; animation-delay: 12.1s; z-index: 0; } /* 4枚目 */
/* ==//画像の動き方(アニメーションの指定)//=================== */
@-webkit-keyframes slide3-3 {
0% { opacity: 1; z-index: 3; }
12.5% { opacity: 1; z-index: 3; }
25% { opacity: 0; }
87.5% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes slide3-3 {
0% { opacity: 1; z-index: 3; }
12.5% { opacity: 1; z-index: 3; }
25% { opacity: 0; }
87.5% { opacity: 0; }
100% { opacity: 1; }
}
/* ==//ナビのアニメーション開始時間//========================= */
.sample3-3_navi:nth-of-type(1)::before { -webkit-animation: slide3-3_1st-btn 16s ease-in-out 0.1s infinite; animation: slide3-3_1st-btn 16s ease-in-out 0.1s infinite; } /* 1枚目 */
.sample3-3_navi:nth-of-type(2)::before { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } /* 2枚目 */
.sample3-3_navi:nth-of-type(3)::before { -webkit-animation-delay: 4.1s; animation-delay: 4.1s; } /* 3枚目 */
.sample3-3_navi:nth-of-type(4)::before { -webkit-animation-delay: 8.1s; animation-delay: 8.1s; } /* 4枚目 */
/* ==//ナビの動き方(アニメーションの指定)//=================== */
@-webkit-keyframes slide3-3_1st-btn {
0% { opacity: 1; }
12.5% { opacity: 1; }
25% { opacity: .5; }
37.5% { opacity: .5; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: 1; }
}
@keyframes slide3-3_1st-btn {
0% { opacity: 1; }
12.5% { opacity: 1; }
25% { opacity: .5; }
37.5% { opacity: .5; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: 1; }
}
@-webkit-keyframes slide3-3_btn {
0% { opacity: .5; }
12.5% { opacity: .5; }
25% { opacity: 1; }
37.5% { opacity: 1; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: .5; }
}
@keyframes slide3-3_btn {
0% { opacity: .5; }
12.5% { opacity: .5; }
25% { opacity: 1; }
37.5% { opacity: 1; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: .5; }
}

 

その⑦:ナビ&テキスト付き 1

  sample_image1
sample_image2
sample_image3
sample_image4

ここにテキストを入れられるよ

 

 html
<div class="sample4">
<!-- 画像&ナビエリア -->
<div class="sample4-pic">
<span class="sample4-navi"><img src="sample_image1" alt=""></span> <!-- 1枚目 -->
<span class="sample4-navi"><img src="sample_image2" alt=""></span> <!-- 2枚目 -->
<span class="sample4-navi"><img src="sample_image3" alt=""></span> <!-- 3枚目 -->
<span class="sample4-navi"><img src="sample_image4" alt=""></span> <!-- 4枚目 -->
</div>
<!-- テキストエリア -->
<div class="sample4-cap">
<p>ここにテキストを入れられるよ</p>
</div>
</div>

 CSS
/* ==//外枠//============================================== */
.sample4 {
border: solid 1px #000; /* 線種 線の太さ 線の色 */
width: 500px; /* 横幅 */
height: 350px; /* 縦幅 */
overflow: hidden; /* 上記設定サイズを超える部分は非表示 */
margin: 0 auto; /* 要素の周りの余白(上下 左右) */
position: relative; /* 相対位置へ配置(ここを基準に他の要素を配置する) */
}
/* 500px(スマホ用) */
@media screen and (max-width: 500px) {
.sample4 {
max-width: 100%; /* 横幅 */
height: 200px; /* 縦幅 */
}
}
/* ==//画像&ナビエリア//==================================== */
.sample4-pic {
width: 100%; /* 横幅 */
height: 100%; /* 縦幅 */
display: flex; /* 子要素をflexboxにする */
justify-content: center; /* アイテム(子要素)を中央に配置 */
align-items: flex-end; /* アイテム(子要素)を末尾に配置 */
}
/* ==//画像の表示設定//===================================== */
.sample4-pic img {
width: 100%; /* 横幅 */
height: 100%; /* 縦幅 */
position: absolute; /* 絶対位置へ配置(親要素(relative)を基準に配置) */
top: 0; /* 親要素(relative)を基準に、指定した位置に表示 */
left: 0; /* 親要素(relative)を基準に、指定した位置に表示 */
transform: translateX(100%); /* 表示位置を右に100%移動 */
-webkit-animation: slide4 16s ease-in-out infinite;
animation: slide4 16s ease-in-out infinite; /* 名前 時間 変化の度合 繰り返し */
}
/* ==//ナビゲーション//=================================== */
.sample4-navi::before {
content: ""; /* 疑似要素のコンテンツ内容 */
display: block; /* インライン要素をブロック要素にする */
width: 15px; /* 横幅*/
height: 15px; /* 縦幅 */
border-radius: 50%; /* 角を丸くする */
margin: 15px 10px; /* 要素の周りの余白(上下 左右) */
position: relative; /* 相対位置へ配置 */
z-index: 5; /* 要素の重なる順番 */
background: #c9f; /* 背景色 */
opacity: .5; /* 透明度 */
-webkit-animation: slide4-btn 16s ease-in-out infinite;
animation: slide4-btn 16s ease-in-out infinite;/* 名前 時間 変化の度合 繰り返し */
}
/* ==//テキストエリア//===================================== */
.sample4-cap {
box-sizing: border-box;
width: 100%; /* 横幅 */
max-height: 100%; /* 縦幅 */
overflow: hidden; /* 上記サイズを超える部分は非表示 */
padding: 10px; /* 余白 */
position: absolute; /* 絶対位置へ配置(親要素(relative)を基準に配置) */
top: 50%; /* 親要素(relative)を基準に指定した位置に表示 */
left: 50%; /* 親要素(relative)を基準に指定した位置に表示 */
transform: translate(-50%, -50%); /* 表示位置を左に50%・上に50%移動 */
z-index: 5; /* 要素の重なる順番 */
text-align: center; /* 文字を中央揃え */
font-size: 120%; /* フォントのサイズ */
font-weight: bold; /* フォントの太さ */
color: #fff; /* フォントの色 */
}
.sample4-cap p {
margin: 0;  /* 要素の周りの余白(上下 左右) */
}
/* ==//画像&ナビのアニメーション開始時間//=================== */
.sample4-navi:nth-of-type(1) img { -webkit-animation: slide4-1st 16s ease-in-out 0.1s infinite; animation: slide4-1st 16s ease-in-out 0.1s infinite; }
.sample4-navi:nth-of-type(1)::before { -webkit-animation: slide4_1st-btn 16s ease-in-out 0.1s infinite; animation: slide4_1st-btn 16s ease-in-out 0.1s infinite; }
.sample4-navi:nth-of-type(2) img,
.sample4-navi:nth-of-type(2)::before { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } /* 2枚目 */
.sample4-navi:nth-of-type(3) img,
.sample4-navi:nth-of-type(3)::before { -webkit-animation-delay: 4.1s; animation-delay: 4.1s; } /* 3枚目 */
.sample4-navi:nth-of-type(4) img,
.sample4-navi:nth-of-type(4)::before { -webkit-animation-delay: 8.1s; animation-delay: 8.1s; } /* 4枚目 */
/* ==//画像の動き方(アニメーションの指定)//=================== */
@-webkit-keyframes slide4-1st {
0% { transform: translateX(0); z-index: 1;}
12.5% { transform: translateX(0); z-index: 1;}
25% { transform: translateX(-100%); }
37.5% { transform: translateX(-100%);}
50% { transform: translateX(-100%); }
87.5% { transform: translateX(100%); }
100% { transform: translateX(0); z-index: 1;}
}
@keyframes slide4-1st {
0% { transform: translateX(0); z-index: 1;}
12.5% { transform: translateX(0); z-index: 1;}
25% { transform: translateX(-100%); }
37.5% { transform: translateX(-100%);}
50% { transform: translateX(-100%); }
87.5% { transform: translateX(100%); }
100% { transform: translateX(0); z-index: 1;}
}
@-webkit-keyframes slide4 {
0% { transform: translateX(100%); }
12.5% { transform: translateX(100%); z-index: 1; }
25% { transform: translateX(0); z-index: 1; }
37.5% { transform: translateX(0); z-index: 1; }
50% { transform: translateX(-100%); z-index: 1; }
87.5% { transform: translateX(-100%); z-index: -1; }
100% { transform: translateX(100%); }
}
@keyframes slide4 {
0% { transform: translateX(100%); }
12.5% { transform: translateX(100%); z-index: 1; }
25% { transform: translateX(0); z-index: 1; }
37.5% { transform: translateX(0); z-index: 1; }
50% { transform: translateX(-100%); z-index: 1; }
87.5% { transform: translateX(-100%); z-index: -1; }
100% { transform: translateX(100%); }
}
/* ==//ナビの動き方(アニメーションの指定)//=================== */
@-webkit-keyframes slide4_1st-btn {
0% { opacity: 1; }
12.5% { opacity: 1; }
25% { opacity: .5; }
37.5% { opacity: .5; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: 1; }
}
@keyframes slide4_1st-btn {
0% { opacity: 1; }
12.5% { opacity: 1; }
25% { opacity: .5; }
37.5% { opacity: .5; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: 1; }
}
@-webkit-keyframes slide4-btn {
0% { opacity: .5; }
12.5% { opacity: .5; }
25% { opacity: 1; }
37.5% { opacity: 1; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: .5; }
}
@keyframes slide4-btn {
0% { opacity: .5; }
12.5% { opacity: .5; }
25% { opacity: 1; }
37.5% { opacity: 1; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: .5; }
}

 

その⑧:ナビ&テキスト付き 2

sample_image1
sample_image2
sample_image3
sample_image4

ここにテキストを入れられるよ

 html
<div class="sample4-4">
<!-- 画像&ナビエリア -->
<div class="sample4-4_pic">
<span class="sample4-4_navi"><img src="sample_image1" alt="""></span> <!-- 1枚目 -->
<span class="sample4-4_navi"><img src="sample_image2" alt=""></span> <!-- 2枚目 -->
<span class="sample4-4_navi"><img src="sample_image3" alt=""></span> <!-- 3枚目 -->
<span class="sample4-4_navi"><img src="sample_image4" alt=""></span> <!-- 4枚目 -->
</div>
<!-- テキストエリア -->
<div class="sample4-4_cap">
<p>ここにテキストを入れられるよ</p>
</div>
</div>
 
 CSS
/* ==//外枠//============================================== */
.sample4-4 {
border: solid 1px #000; /* 線種 線の太さ 線の色 */
width: 500px; /* 横幅 */
height: 350px; /* 縦幅 */
overflow: hidden; /* 上記設定サイズを超える部分は非表示 */
margin: 0 auto; /* 要素の周りの余白(上下 左右) */
position: relative; /* 相対位置へ配置(ここを基準に他の要素を配置する) */
}
/* 500px以下(スマホ用) */
@media screen and (max-width: 500px) {
.sample4-4 {
max-width: 100%; /* 横幅 */
height: 200px; /* 縦幅 */
}
}
/* ==//画像&ナビエリア//==================================== */
.sample4-4_pic {
width: 100%; /* 横幅 */
height: 100%; /* 縦幅 */
display: flex; /* 子要素をflexboxにする */
justify-content: center; /* アイテム(子要素)を中央に配置 */
align-items: flex-end; /* アイテム(子要素)を末尾に配置 */
}
/* ==//画像の表示設定//===================================== */
.sample4-4_pic img {
width: 100%; /* 横幅 */
height: 100%; /* 縦幅 */
position: absolute; /* 絶対位置へ配置(親要素(relative)を基準に配置) */
top: 0; /* 親要素(relative)を基準に、指定した位置に表示 */
left: 0; /* 親要素(relative)を基準に、指定した位置に表示 */
-webkit-animation: slide4-4 16s ease-in-out infinite;
animation: slide4-4 16s ease-in-out infinite; /* 名前 時間 変化の度合 繰り返し */
}
/* ==//ナビゲーション//=================================== */
. sample4-4_navi::before{
content: ""; /* 疑似要素のコンテンツ内容 */
display: block; /* インライン要素をブロック要素にする */
width: 15px; /* 横幅*/
height: 15px; /* 縦幅 */
border-radius: 50%; /* 角を丸くする */
margin: 15px 10px; /* 要素の周りの余白(上下 左右) */
position: relative; /* 相対位置へ配置 */
z-index: 5; /* 要素の重なる順番 */
background: #c9f; /* 背景色 */
opacity: .5; /* 透明度 */
-webkit-animation: slide4-4_btn 16s ease-in-out infinite;
animation: slide4-4_btn 16s ease-in-out infinite; /* 名前 時間 変化の度合 繰り返し */
}
/* ==//テキストエリア//===================================== */
.sample4-4_cap {
box-sizing: border-box;
width: 100%; /* 横幅 */
max-height: 100%; /* 縦幅 */
overflow: hidden; /* 上記サイズを超える部分は非表示 */
padding: 10px; /* 余白 */
position: absolute; /* 絶対位置へ配置(親要素(relative)を基準に配置) */
top: 50%; /* 親要素(relative)を基準に指定した位置に表示 */
left: 50%; /* 親要素(relative)を基準に指定した位置に表示 */
transform: translate(-50%, -50%); /* 表示位置を左に50%・上に50%移動 */
z-index: 5; /* 要素の重なる順番 */
text-align: center; /* 文字を中央揃え */
font-size: 120%; /* フォントのサイズ */
font-weight: bold; /* フォントの太さ */
color: #fff; /* フォントの色 */
}
.sample4-4_cap p {
margin: 0;  /* 要素の周りの余白(上下 左右) */
}
/* ==//画像のアニメーション開始時間&重なる順番//============== */
.sample4-4_navi:nth-of-type(1) img { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; z-index: 3; } /* 1枚目 */
.sample4-4_navi:nth-of-type(2) img { -webkit-animation-delay: 4.1s; animation-delay: 4.1s; z-index: 2; } /* 2枚目 */
.sample4-4_navi:nth-of-type(3) img { -webkit-animation-delay: 8.1s; animation-delay: 8.1s; z-index: 1; } /* 3枚目 */
.sample4-4_navi:nth-of-type(4) img { -webkit-animation-delay: 12.1s; animation-delay: 12.1s; z-index: 0; } /* 4枚目 */
/* ==//画像の動き方(アニメーションの指定)//=================== */
@-webkit-keyframes slide4-4 {
0% { opacity: 1; z-index: 3; }
12.5% { opacity: 1; z-index: 3; }
25% { opacity: 0; }
87.5% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes slide4-4 {
0% { opacity: 1; z-index: 3; }
12.5% { opacity: 1; z-index: 3; }
25% { opacity: 0; }
87.5% { opacity: 0; }
100% { opacity: 1; }
}
/* ==//ナビのアニメーション開始時間//========================= */
.sample4-4_navi:nth-of-type(1)::before { -webkit-animation: slide4-4_1st-btn 16s ease-in-out 0.1s infinite; animation: slide4-4_1st-btn 16s ease-in-out 0.1s infinite; } /* 1枚目 */
.sample4-4_navi:nth-of-type(2)::before { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } /* 2枚目 */
.sample4-4_navi:nth-of-type(3)::before { -webkit-animation-delay: 4.1s; animation-delay: 4.1s; } /* 3枚目 */
.sample4-4_navi:nth-of-type(4)::before { -webkit-animation-delay: 8.1s; animation-delay: 8.1s; } /* 4枚目 */
/* ==//ナビの動き方(アニメーションの指定)//=================== */
@-webkit-keyframes slide4-4_1st-btn {
0% { opacity: 1; }
12.5% { opacity: 1; }
25% { opacity: .5; }
37.5% { opacity: .5; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: 1; }
}
@keyframes slide4-4_1st-btn {
0% { opacity: 1; }
12.5% { opacity: 1; }
25% { opacity: .5; }
37.5% { opacity: .5; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: 1; }
}
@-webkit-keyframes slide4-4_btn {
0% { opacity: .5; }
12.5% { opacity: .5; }
25% { opacity: 1; }
37.5% { opacity: 1; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: .5; }
}
@keyframes slide4-4_btn {
0% { opacity: .5; }
12.5% { opacity: .5; }
25% { opacity: 1; }
37.5% { opacity: 1; }
50% { opacity: .5; }
87.5% { opacity: .5; }
100% { opacity: .5; }
}

 

まとめ:

今回はコピペでできる、WordPressスライドショー12選を紹介しました。

プラグインを使うと読み込みに時間がかかるため、サイトの表示速度が遅くなってしまい、離脱率が上がり、結果的にGoogleからの評価が悪くなってしまいます。

極力プラグインは使わずにhtmlやcssでプログラミングしましょう。

プログラミングできなくて悩んでいるという方はお問い合わせよりご連絡ください。
みほ

-WordPress