実装の際、当サイトに掲載している画像を直接リンクして使用するケースが見受けられます。
これは著作権やサーバー負荷の面から望ましくありません。
必ずご自身で素材を用意し、ご自身のサイトに画像をアップロードしてから使用してください。
トップページに画像スライダーやカルーセルなどのアニメーションを設置すると、ぱっと目を引きサイト全体が華やかに見えます。
通常は JavaScriptを使って実装することが多いですが、フェードイン・アウトのようなシンプルな切り替えであればCSSアニメーションだけでも表現できます。その場合はページの読み込み速度が向上し、コードもシンプルに保てるというメリットも。
当サイトでも、トップページのメインビジュアルにこの手法を採用しています。
この記事では、CSSだけで作る画像スライダーの実装例と、トップページで効果的に見せるための工夫を分かりやすく解説します。
具体的なHTMLとCSSの完成コード、実装手順については、後半で紹介する有料パートで詳しく説明しています。
About meこの記事を書いた人
ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。
- ドメインパワー : 40
- 2023年より有料記事公開
累計510件（月間約20件）のご購入実績
（2025年10月現在） - カスタマイズを丁寧にサポート
CSSだけで実現！複数画像を切り替えるスライダーアニメーションとは
フェードイン・フェードアウトのようなシンプルな動きであれば、CSSアニメーションだけでスライドショーが作れます。
DEMO：CSSだけで作るフェード切り替えスライダー
以下は、3枚の画像を3秒ごとに切り替えてループする例です。
| 時間 | 表示画像 |
|---|---|
| 0～3秒 | 1枚目 |
| 3～6秒 | 2枚目 |
| 6～9秒 | 3枚目 |
| 9秒以降 | 1枚目に戻って繰り返し |
複数の画像を同じ位置に重ねて配置し、アニメーションで順番に表示します。
このCSSスライダーは画像を重ねて透明度だけで切り替えるシンプルな構造なので、ブログやランディングページなど、軽いフェードスライドを入れたい場面に最適です。
画像スライダーに使う素材を準備しよう
スライダーアニメーションをきれいに見せるためには画像選びと最適化がとても重要です。ここでは、写真素材の探し方とWeb表示に適したサイズや形式のポイントを紹介します。
画像をアップロードする
- ラベル画像をアップロード
WordPress管理画面の「メディア」から使用する画像をアップロードします。
- ラベル画像URLを取得
アップロードした画像の「URLをクリップボードにコピー」をクリックしてファイルのURLを取得します。
- ラベルコードに反映
取得したURLを、HTMLコード内の
imgタグやCSSのbackground-imageに設定します。
写真素材の探し方（おすすめサイト紹介）
スライダー用の画像は横長で印象的な写真を選ぶのが基本です。人物・風景・商品のいずれでも、余白が多めの構図を選ぶと文字を重ねても見やすくなります。
画像サイズ・形式・最適化のポイント
サイズの目安
- トップページなどのメインビジュアル：横幅 1600〜2000px 程度
- 高さはレイアウトに合わせて 600〜800px 程度
- すべての画像を同じサイズ・比率に統一することが大切です。
画像形式の選び方
| 用途 | 推奨形式 | 特徴 |
|---|---|---|
| 写真・風景 | JPEG（.jpg） | 軽くて発色が自然。汎用的 |
| イラスト・ロゴ・透過画像 | PNG（.png） | 背景透過に対応。やや重め |
| WebP | .webp | 軽量・高画質で近年主流。対応ブラウザも拡大中 |
画像圧縮・最適化ツール
- TinyPNG（PNG・JPEG対応）
- Squoosh（Google公式。画質調整も簡単）
- ILoveIMG（まとめ圧縮に便利）
複数画像切り替えアニメーションをメインビジュアルとして使う方法
固定ページで作るトップページに複数画像を切り替えるスライダーをメインビジュアルとして実装する際は、いくつか工夫が必要です。ポイントを押さえることでデザイン性と使いやすさを両立できます。
スライダーのコンテナ幅を画面いっぱいに広げることで、インパクトのあるメインビジュアルに。特にトップページの最初に表示される部分なので、ユーザーの目を引く効果が高まります。
アイキャッチ画像やSNSボタンなど、スライダー表示の妨げになる要素は非表示にしましょう。特定の要素を隠すだけでスライダーがスッキリ見え、デザインが引き締まります。
スライダーの周囲に余白があると、画像が画面にフィットせず見栄えが悪くなります。CSSで余白を調整して、画像が画面全体にしっかりフィットするようにしましょう。
ロゴやサイト名、キャッチコピーなどのコンテンツは、画像の中央に配置するのが基本です。中央揃えにすることで、ユーザーの視線が自然にコンテンツに集まり、メッセージが伝わりやすくなります。
実装に役立つ記事
- フルワイド設定／Cocoon対応
- 要素を幅いっぱいに広げる方法（テーマ共通）
- アイキャッチやSNSボタンなど不要な要素を非表示にする方法（Cocoonテーマ専用）
- 余白を消す方法（Cocoonテーマ専用）
- コンテンツを中央に揃える方法
CSSで左右・上下左右の要素を簡単に中央寄せ（テーマ共通）
以下の記事では、Cocoonテーマやブロックエディタを使ったトップページの作り方を紹介しています。デモページもありますのでぜひ参考にしてみてください。
実装方法｜CSSだけで複数画像を切り替えるスライダーの作り方
CSSだけで複数画像を切り替えるスライダーを実装するには、HTMLとCSSを使います。WordPressでの設置方法やCocoonテーマでのカスタマイズについては、別の記事で基礎を紹介しています。
HTML構造の基本
スライダーは基本的にコンテナ + 画像要素の構造で作ります。
表示したい画像の枚数分、.slideimg を用意します。
<div class="slider-container">
<div class="slideimg"></div>
<div class="slideimg"></div>
<div class="slideimg"></div>
</div><div class="slideimg"></div>の数を増やすと、表示する画像枚数も増やせます。- 画像はCSSで
background-imageを指定します。
ここから先は有料公開です。
すぐに使える完成版HTML・CSSコードと、タイミング調整のコツを詳しく解説しています。
動きのあるスライダーを導入してサイト全体の印象をアップさせたい方は、ぜひ続きをご覧ください。
■ サイト名
Turicco
■ サイトURL
https://turicco.com/
■ 運営者情報
運営責任者：はるみ
お問い合わせ先：https://turicco.com/contact/
■ 購入方法
コンテンツ販売サービス「codoc（コードク）」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。
■ 納品方法
購入完了後、対象の記事が閲覧可能になります。
■ お支払い方法
・クレジットカード
・デビットカード
・プリペイド型クレジットカード
・Apple Pay
・Google Pay
・コンビニ決済
※クレジットカード情報はSSLで暗号化され、決済サービス「Stripe」に直接送信されます。管理人がカード情報を取得・保管することはありません。
■ 返金・キャンセルについて
codoc株式会社の利用規約第10条（返金）に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。
■ 販売価格
500円（税込）
Comment 記事の感想を書き込んでいただけると幸いです
先ほど、Safariでスライダーが綺麗に表示されない件についてコメントをしましたが、
CSSでの設置は諦めて、プラグインを使うことにしました。
コメントは削除してください。
お騒がせしました。
> michie さん
こんにちは、いつもありがとうございます。
プラグインも良いのですけど、アピールエリアは表示せずに、ブロックメニュー→「カスタムHTML」を使ってみてはどうでしょうか？
アピールエリアの中にスライダーを入れていることで表示が崩れていると考えられます。