ワードプレスで関連記事をスライドショーで表示する方法（CSSアニメーション）

あまり効果的ではないことですが、
「こんなことができる」と知っておくのは良いこと。
CSSのみで作成可能です。

↓これを作る方法を説明します。

プロがやっているワードプレスのcanonical（カノニカル）設定

＜コピペ用＞ワードプレスのタイトルタグ設定方法

完璧版：ワードプレスのスマホの表示だけ本文の改行（br）を無くす方法

ワードプレスのテーマのディレクトリにファイルをPHPで作成する方法（UTF-8対応）

ワードプレスのランダム表示の負荷を軽くする方法（キャッシュとか）

作成方法

デザインなどは応用しないといけないので、
基本的な構造だけ説明します。

まずはHTML。

<div class="k-slider">
<div class="k-slider-a">

<div class="k-slider-k">
<!--ここに表示したい内容-->
</div>

<div class="k-slider-k">
<!--ここに表示したい内容-->
</div>

<div class="k-slider-k">
<!--ここに表示したい内容-->
</div>

<div class="k-slider-k">
<!--ここに表示したい内容-->
</div>

<div class="k-slider-k">
<!--ここに表示したい内容-->
</div>

</div>
</div>

次にCSS。

.k-slider {
width: 600px;
height: 70px;
overflow: hidden;
margin: 2em 0px;
}
.k-slider-k{
width: 600px;
height: 70px;
float: left;
position: relative;
}
.k-slider-a {
width: 500%;
position: relative;
left: 0;
-webkit-animation: ks 20s infinite ease;
animation: ks 20s infinite ease;
}

@media screen and (max-width: 640px) {

.k-slider {
width: 300px;
}
.k-slider-k{
width: 300px;
}
.k-slider-a {
-webkit-animation: ksm 20s infinite ease;
animation: ksm 20s infinite ease;
}

}

@keyframes ks {

0% {
transform: translateX(0);
}
10% {
transform: translateX(0);
}
20% {
transform: translateX(-600px);
}
30% {
transform: translateX(-600px);
}
40% {
transform: translateX(-1200px);
}
50% {
transform: translateX(-1200px);
}
60% {
transform: translateX(-1800px);
}
70% {
transform: translateX(-1800px);
}
80% {
transform: translateX(-2400px);
}
90% {
transform: translateX(-2400px);
}
100% {
transform: translateX(0);
}
}


@-webkit-keyframes ks {

0% {
-webkit-transform: translateX(0);
}
10% {
-webkit-transform: translateX(0);
}
20% {
-webkit-transform: translateX(-600px);
}
30% {
-webkit-transform: translateX(-600px);
}
40% {
-webkit-transform: translateX(-1200px);
}
50% {
-webkit-transform: translateX(-1200px);
}
60% {
-webkit-transform: translateX(-1800px);
}
70% {
-webkit-transform: translateX(-1800px);
}
80% {
-webkit-transform: translateX(-2400px);
}
90% {
-webkit-transform: translateX(-2400px);
}
100% {
-webkit-transform: translateX(0);
}
}


@keyframes ksm {

0% {
transform: translateX(0);
}
10% {
transform: translateX(0);
}
20% {
transform: translateX(-300px);
}
30% {
transform: translateX(-300px);
}
40% {
transform: translateX(-600px);
}
50% {
transform: translateX(-600px);
}
60% {
transform: translateX(-900px);
}
70% {
transform: translateX(-900px);
}
80% {
transform: translateX(-1200px);
}
90% {
transform: translateX(-1200px);
}
100% {
transform: translateX(0);
}
}


@-webkit-keyframes ksm {

0% {
-webkit-transform: translateX(0);
}
10% {
-webkit-transform: translateX(0);
}
20% {
-webkit-transform: translateX(-300px);
}
30% {
-webkit-transform: translateX(-300px);
}
40% {
-webkit-transform: translateX(-600px);
}
50% {
-webkit-transform: translateX(-600px);
}
60% {
-webkit-transform: translateX(-900px);
}
70% {
-webkit-transform: translateX(-900px);
}
80% {
-webkit-transform: translateX(-1200px);
}
90% {
-webkit-transform: translateX(-1200px);
}
100% {
-webkit-transform: translateX(0);
}
}

これで動きます。