makeshopサポート │ コピペだけでOK！HTMLとCSSだけで動くスライドショーを作ってみよう！

こんにちは、makeshopデザイン質問掲示板です。
いつもmakeshopをご利用いただきありがとうございます。

今回は、JavaScriptを一切使わずに、HTMLとCSSのコピペだけで動く「自動スライドショー」の作り方をご紹介します！

こんなお悩みありませんか？

「バナーを自動で切り替えて、ショップをもっと賑やかにしたい！」
「でも、難しいスクリプトの設定はちょっと苦手……」

[難易度 ★★★ ] CSSアニメーションで動く！スライドショー設置ガイド

事前準備

編集の前には、かならずデザインセットをコピーしましょう。
意図しない表示になった場合でも、コピーをショップに適用することですぐに元に戻すことができます。

万が一にそなえてデザイン編集する前にバックアップをとりましょう！

うっかり変なところにコピペしちゃったかも！？そんな場合にもバックアップがあれば大丈夫です！
関連記事：ショップデザインバックアップしてますか？！

設定方法

（1）HTMLを記述する！

クリエイターモード

ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップまたは表示したい画面の「HTML」欄

のエディターエリアに、下記のように記載してください。

<div class="css-slider">
<ul class="slider-inner">
<li><a href="リンク先のURL01"><img src="image01.jpg" alt="バナー01"></a></li>
<li><a href="リンク先のURL02"><img src="image02.jpg" alt="バナー02"></a></li>
<li><a href="リンク先のURL03"><img src="image03.jpg" alt="バナー03"></a></li>
<!-- 無限ループを滑らかにするため、最後に「1枚目と同じバナー」を必ず入れます -->
<li><a href="リンク先のURL01"><img src="image01.jpg" alt="バナー01"></a></li>
</ul>
</div>

・画像の枚数は最大で5枚までがおすすめです。画像が多いとページの読み込みが重くなる場合があります。
・最後に「1枚目と同じ画像」を入れることで、最後の画像から1枚目に戻る瞬間がカクつかずにスムーズ（無限ループ）になります。
・バナー画像は、【100MBサーバー(ギガプラス10)】からアップロードしましょう！

（2）CSSを指定する！

クリエイターモード

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」欄

下記のスタイル指定を追記してください。今回は、1枚あたり「5秒静止して、1.5秒でスライド」する設定です。

/* スライダー全体の枠 */
.css-slider {
width: 100%;
max-width: 1000px;/*ショップに合わせた最大横幅 */
margin: 0 auto;
overflow: hidden;/*枠からはみ出した画像を切る */
}
/*画像を横に並べる中身 */
.slider-inner {
display: flex;
width: 400%;/*画像数（実質3枚+ループ用1枚）× 100% */
list-style: none;
padding: 0;
margin: 0;
animation: slide-anim 19.5s infinite;/*合計時間：（5秒+1.5秒）×3枚 = 19.5秒 */
}
.slider-inner li {
width: 25%;/*100% ÷ 全画像数（ループ用含め4枚） */
}
.slider-inner li img {
width: 100%;
height: auto;
display: block;
}
/*スライドの動きを指定（静止時間を作るための記述） */
@keyframes slide-anim {
0%, 25.64%   { transform: translateX(0); }       /*1枚目表示(5秒間) */
33.33%, 58.97% { transform: translateX(-25%); }  /*2枚目へ移動(1.5秒) ＋ 表示(5秒間) */
66.67%, 92.31% { transform: translateX(-50%); }  /*3枚目へ移動(1.5秒) ＋ 表示(5秒間) */
100%           { transform: translateX(-75%); }  /*ループ用(1枚目と同じ)へ移動して終了 */
}
/*マウスを乗せたときに止める設定 */
.css-slider:hover .slider-inner {
animation-play-state: paused;
}

（3）自動スライド完了！

CSSが適用されると、画像がピタッと止まり、時間になるとスルスルとスライドして切り替わるようになります！

・枚数を変えたい場合：
枚数が変わると、CSSの「width」や「@keyframes」の数値をすべて計算し直す必要があります。
・数値の計算を楽にしたい：
「画像が4枚のときはどう書けばいいの？」「もっと速く動かしたい」といった計算が大変なときは、下記の自動作成ツールを使うのがおすすめです！

もっと手軽に！スライドショー作成ツール

「バナーの枚数に合わせて計算するのがちょっと大変……」「スマホ用の画像も設定してみたい！」というショップ様向けに、画像を貼って秒数を選ぶだけでコードが完成するツールも作ってみました！

計算はすべてツールにお任せ。生成されたコードをそのまま貼り付けるだけで、理想のスライドショーが完成します！

下記のリンクからぜひ試してみてくださいね。
→スライドショー作成ツールはこちら

生成されたHTMLとCSSをコピーして貼り付けるだけで、スライドショーが完成します。
※ツールは予告なく公開停止する場合がございます。ご了承ください。

いかがでしたでしょうか。 JavaScriptを使わなくても、CSSだけで動きのあるショップを作ることができます。ぜひ試してみてくださいね。それではまた！

コピペだけでOK！HTMLとCSSだけで動くスライドショーを作ってみよう！