SWELL完全対応！ループスライダーをCSSコピペで簡単実装

2025-11-162025-12-12

こんにちは。hakubi code 代表のてらだです。

SWELLで企業ロゴなんかが流れる、あの「ループスライダー」を実装したいけど、標準機能にはなくて困ってませんか。

CSSでのコピペ実装を探してるけど、画像が途切れる問題や、Lazy Loadとの兼ね合いでうまく動かない…なんてこともあるかもですね。

この記事では、SWELLのブロックエディタを使いつつ、CSSをコピペするだけで「無限ループスライダー」を実装する手順を、マークアップエンジニアの視点から徹底的に解説します。

JavaScriptを使ったLazy Load対策はもちろん、スライドの速度調整や、ホバーで停止させる方法まで、あなたが知りたいカスタマイズ方法を網羅的にお届けします。

CSSコピペでのループスライダー実装手順
画像が途切れるLazy Load問題の解決策
スライド速度や方向を調整するカスタマイズ
実装時のSEOやユーザビリティへの影響

【コピペOK】CSSのみで無限ループを作る実装手順

まずは、SWELLのブロックエディタとCSSのコピペだけで実装する、一番手軽で軽量な方法を紹介します。JavaScriptライブラリを使わないので、パフォーマンス的にもおすすめです。HTMLの構造からCSSの解説まで、ステップバイステップで見ていきましょう。

ブロックエディタでの構造作り

SWELLのいいところは、ブロックエディタが優秀なことですよね。今回は「リッチカラム」ブロックと「グループ」ブロックを組み合わせて、HTML構造を作っていきます。

STEP 1: ブロックエディタでの構造設計

ここが一番のキモです。CSSで「無限ループ」を錯覚させるために、全く同じ内容のカタマリを2セット用意するのがポイントです。

まず「リッチカラム」ブロックを挿入します。ロゴを5個並べたいなら、「列数（PC）」を「5」に設定してください。

Webデザインツールの「リッチカラム」設定パネル。上部のピンク枠「リッチカラム」タブの下に「スタイル」セクションがあり、「デフォルト」「ボーダー」「シドウ」の3つのデザインテンプレート選択肢と、「様々クローレで表示する」トグル、列数調整スライダー（デスクトップ、タブレット、モバイルで各5列設定）が表示されたレイアウト設定画面

各カラムに「画像」ブロックでロゴ画像を配置します。
【最重要】作った「リッチカラム」ブロック全体を選んで、「複製」します。これで、同じリッチカラムが2セット並びましたね。
この2セットのリッチカラムを両方選択して、「グループ」化します。（3.で作ったリッチカラムをグループ化し、再度リッチカラムを選択し複製してもよいです。）
グループブロックの設定で、配置を「全幅」にします。（※サイトのレイアウト設定でサイドバーがある場合は全幅になりません）

最後に、この「グループ」ブロックの「高度な設定」にある「追加 CSS クラス」に、loop-slider と入力します。このクラス名が、後でCSSを当てるための目印になります。

STEP 2: CSSアニメーションのコピペと解説

構造ができたら、次はこのCSSコードを「外観」＞「カスタマイズ」＞「追加CSS」などに貼り付けてください。

/* --- 基本設定 --- */
.loop-slider {
  display: flex;
  overflow: hidden;
}

.loop-slider > .wp-block-group__inner-container {
  display: flex;
  width: 200%;
  animation: infinity-scroll-left 60s linear infinite; /* ←速度調整 */
}

.loop-slider > .wp-block-group__inner-container > .swell-block-columns,
.loop-slider.wp-block-group > .swell-block-columns {
  display: contents;
}

/* --- アニメーション本体 --- */
.loop-slider .swell-block-columns__inner {
  display: flex;
  flex-wrap: nowrap;
}

/* --- カラム幅（ここを調整する） --- */
.loop-slider .swell-block-column {
  flex-shrink: 0;
  width: 200px; /* スマホ幅 */
  margin-bottom: 0;
}

@media (min-width: 960px) {
  .loop-slider .swell-block-column {
    width: 300px; /* PC幅 */
  }
}

/* --- figure調整 --- */
.loop-slider .swell-block-column figure {
  margin-bottom: 0;
}

/* --- 無限スクロール --- */
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

なぜカラムを2セット複製したの？
アニメーションの transform: translateX(-100%) は、リッチカラム1セット分を左に動かす、という意味です（※SWELLの構造上、.swell-block-columns__innerが2つ並び、その各々がアニメーション対象になるため）。もし1セットだけだと、それが左に消えた瞬間、右側が空白になって、アニメーションがリセットされると「カクッ」とワープしちゃいます。でも、[セットA]と[セットB]（＝Aと同じもの）を並べておけば、[セットA]が左に消えきるのと同時に、[セットB]が[セットA]の開始位置にピッタリはまるんです。これで、見た目上シームレスにループし続けるように見える、というカラクリです。

これでうまくいったでしょうか？実際の実装例ページを確認してみましょう。

重要：画像が途切れる「遅延読み込み」への対策コード

さて、ここが多くの人がつまずくポイントです。CSSを当てただけだと、「スライドの途中で画像が消える」「2セット目の画像が表示されず空白になる」って現象が起きませんか？

これ、原因はSWELLに標準搭載されてる画像の「Lazy Load（遅延読み込み）」機能との競合です。

Lazy Loadは、画面の外にある画像を後から読み込むことで、ページの表示速度を上げるための超重要な機能です。でも、ループスライダーの2セット目（[セットB]）は、初期表示では「画面外」にあると判定されちゃうんですよ。

だから、[セットB]が画面に入ってくるタイミングで画像が読み込まれず、空白になっちゃうんです。

非推奨な解決策（NG例）

SWELL設定でサイト全体のLazy Loadをオフにするのは、絶対にやめてください。たった一つのスライダーのために、サイト全体の表示速度（Core Web Vitals）を犠牲にするのは、SEO的に推奨できません。

推奨：対象スライダーだけLazy Loadを解除するJS

一番スマートな解決策は、サイト全体のLazy Loadは活かしつつ、このスライダー内の画像だけ「遅延読み込みさせない」ようにJavaScriptで制御することです。

以下のJSコードを、記事や固定ページの編集画面下部にある「カスタムCSS＆JS」の「JS用コード」エリアに貼り付けてください。

/* ループスライダー内のLazy Loadを強制解除 */
document.addEventListener('DOMContentLoaded', function () {
  let images = document.querySelectorAll('.loop-slider img');

  if (images.length > 0) {
    Array.prototype.forEach.call(images, function (image) {

      /* SWELLの lazysizes.js 対応 */
      if (image.classList.contains('lazyload')) {
        image.classList.remove('lazyload');
        image.classList.remove('lazy'); // 念のため
      }

      if (image.getAttribute('data-src')) {
        image.src = image.getAttribute('data-src');
      }

      if (image.getAttribute('data-srcset')) {
        image.srcset = image.getAttribute('data-srcset');
      }

      /* WordPress 5.5〜 ネイティブLazyLoad */
      image.loading = 'eager';
    });
  }
});

このコードは、.loop-slider の中にある全ての img タグを探し出して、強制的に src 属性（画像URL）を書き換え、遅延読み込みの対象から除外してくれます。これで、アニメーションが始まる前に全ての画像が読み込まれるので、途切れなくなります。

流れるスピードを調整するCSSの書き方

「もうちょっとゆっくり流したい」「速くしたい」というニーズも多いですよね。速度調整は、さっきのCSSの1行を書き換えるだけでOKです。

.loop-slider .swell-block-columns__inner の中にある animation プロパティを見てください。

/* ▼ アニメーション速度（1周の時間） */

/* 変更前：60秒（標準） */
animation: infinity-scroll-left 60s linear infinite;

/* 変更例①：30秒（←速くなる） */
animation: infinity-scroll-left 30s linear infinite;

/* 変更例②：120秒（←遅くなる） */
animation: infinity-scroll-left 120s linear infinite;

この 60s (60秒) の部分の数字を、小さくすれば速く、大きくすれば遅くなります。簡単ですよね。

逆方向（左から右）へ流したい場合の記述

デフォルトは「右から左へ」流れるアニメーション（translateX(-100%)）ですが、逆に「左から右へ」流したい場合もあるかもですね。

その場合は、@keyframes の定義を変更します。

/* ▼ 変更前：右 → 左へ流れる（通常） */
@keyframes infinity-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}


/* ▼ 変更後：左 → 右へ流れる（逆方向） */
@keyframes infinity-scroll-right {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes の名前を infinity-scroll-right に変えたら、animation プロパティで呼び出す名前も変えるのを忘れないでくださいね。

/* ▼ 変更前：右 → 左（既存） */
.loop-slider .swell-block-columns__inner {
  animation: infinity-scroll-left 60s linear infinite;
}


/* ▼ 変更後：左 → 右（逆方向に流れる） */
.loop-slider .swell-block-columns__inner {
  animation: infinity-scroll-right 60s linear infinite;
}

ロゴのサイズや余白を整えるテクニック

ロゴスライダーだと、画像のサイズがバラバラだったり、余白が気になったりしますよね。ここもCSSで制御できますよ。

画像サイズの均一化

さっきのCSSスニペット例では、.loop-slider .swell-block-column に対して width: 300px; (PC) や width: 200px; (スマホ) を指定しました。このwidthの値を調整して、好みの画像幅にしてください。

「高さも揃えたい！」という場合は、CSSでアスペクト比を指定するのも手ですが、SWELLの画像ブロックは優秀なので、アップロードする画像サイズ（特に高さ）をあらかじめ揃えておくのが一番手っ取り早いかもです。

画像間の余白をなくす方法

ロゴ同士を隙間なくピッタリくっつけたい場合。これは2段階の調整が必要です。

ブロックエディタ側： loop-slider クラスを付けた「グループ」ブロックの中にある、2つの「リッチカラム」ブロックをそれぞれ選択します。右側のブロック設定で「カラム間の余白」のスライダーを「0」にしてください。
CSS側： .loop-slider .swell-block-column に padding が設定されている場合は、それも padding: 0; などに調整する必要があります。（※今回のスニペット例では特に指定していません）

さらに使いやすくするための応用カスタマイズ

CSSでの基本実装ができるようになったら、次はもう少し応用的なカスタマイズや、実装する上での注意点について解説します。ユーザビリティを上げたり、そもそも「本当にこのスライダー必要？」っていうSEO的な視点も、エンジニアとしては大事なポイントですよ。

マウスホバー時に動きを一時停止させる方法

これ、個人的には必須の対応かなと思います。

ロゴスライダーに提携先のサイトリンクを貼る場合、自動で動いてるとユーザーが「クリックしようとしたら動いちゃった！」ってストレスになりますよね。

ユーザビリティ向上のために、マウスカーソルが乗ったら（ホバーしたら）アニメーションが一時停止するようにしましょう。以下のCSSを「追加CSS」に追記するだけです。

/* ▼ ホバー時にアニメーションを停止 */
.loop-slider:hover > .wp-block-group__inner-container {
  animation-play-state: paused;
}

animation-play-state: paused; で「アニメーションを一時停止」できます。これで、ユーザーが落ち着いてロゴをクリックできるようになります。

（参考）JSライブラリを使うメリット・デメリット

今回紹介したのはCSSの @keyframes を使った方法ですが、もちろんJavaScriptを使っても実装できます。

例えば、SWELLのリッチカラムが持ってる「横スクロールで表示する」オプションを活用する方法がありますね。

このオプションをオンにすると、手動でスワイプできる横スクロールエリアができます。これに対して、JavaScriptで「自動でスクロールし続ける」処理を追加するイメージです。

CSSアニメーションと違って、投稿リストなんかを端から端まで自動スクロールさせる（ニュースティッカーみたいな）用途に向いてるかなと思います。ただ、シームレスな「無限ループ」をJSで自作するのは、CSSよりちょっと複雑になりがちですね。

高機能な「Swiper.js」は導入すべき？

「矢印ボタンが欲しい」「今何枚目か分かる点（ページネーション）が欲しい」みたいに、もっと高機能なスライダーが欲しいなら、「Swiper.js」みたいな専門のJavaScriptライブラリを導入する方法もあります。

ただ、これはハッキリ言って最上級者向けです。

Swiper.js導入の難しさ

Swiper.jsをSWELLで使うには、ただコピペするだけじゃダメです。

子テーマの functions.php を編集して、SwiperのCSSファイルとJSファイルを読み込ませる
Swiperを動かすための初期化JSファイルを自分で作って、サーバーにアップロードする
投稿画面では「カスタムHTML」ブロックを使って、Swiperが要求する専用のHTML構造（.swiper とか .swiper-wrapper とか）を書く

…といった「開発者」向けの作業が必要になります。SWELLの手軽さとは、ちょっと相反する方法になっちゃいますね。

もしSwiper.jsを導入するなら、SWELLの「ブログパーツ」機能と組み合わせるのがおすすめです。スライド1枚分の内容をブログパーツで作っておいて、その「ショートコード」を書き出すだけにするんです。

これなら、複雑なHTML構造を壊さずに、スライドの中身だけはブロックエディタで簡単に修正できるようになるので、メンテナンス性が爆上がりします。

とはいえ、「無限ループ」させたいだけなら、Swiper.jsの出番じゃないかなと私は思います。CSSアニメーションで十分です。

実装前に知っておきたいSEO・ユーザビリティへの影響

ループスライダーって、見た目はカッコイイんですけど、導入する前にSEOやユーザビリティへの影響をちゃんと考える必要があります。

パフォーマンス低下（SEOへの悪影響）

スライダー、特に画像が多いものは、ページの読み込み速度を遅くする可能性があります。Core Web VitalsのLCP（Largest Contentful Paint）スコアが悪化すると、Googleの検索順位にもマイナスの影響が出かねません。

だからこそ、さっき解説したLazy Load対策（JSでの部分解除）が重要なんです。画像ファイル自体も、WebP形式にしたり、しっかり圧縮して軽くしておくのが大前提です。

ユーザビリティ懸念（バナーブラインドネス）

「バナーブラインドネス」って言葉、聞いたことありますか？

ユーザーは、「動いているもの＝広告」と無意識に判断して、そこにある情報を見ない（無視する）傾向があるんです。

もし、スライダーに「今すぐクリックしてほしい重要なお知らせ」を載せても、かえって見逃されるリスクがあるってことですね。自動で動くものは、さっきの「ホバーで停止」みたいに、ユーザーが操作をコントロールできるようにしておく配慮が大事です。

もし「複数のメッセージを伝えたい」のが目的なら、スライダーじゃなくて、静的な「ヒーローイメージ」や、SWELLの「リッチアニメーション」ブロックなんかを使うほうが、メッセージが伝わりやすくてパフォーマンスも良い、なんてケースも多いです。

まとめ：目的に合わせて実装方法を選ぼう

お疲れ様でした。今回は、SWELLでカスタムループスライダーを実装する方法について、CSSベースの方法をメインに解説しました。

SWELL ループスライダーを実装する上での、私からの最終的な推奨はこうです。

hakubi code的・推奨戦略

目的が「ロゴの装飾」なら： 今回紹介した「CSSキーフレーム方式」がベストです。軽量ですし、SWELLのブロック機能とも親和性が高いです。ただし、「Lazy Load解除JS」と「ホバーで停止CSS」はセットで実装することをお勧めします。
目的が「メインビジュアル」なら： CSS方式は不向きです。ユーザーが操作できないからですね。この場合は、そもそもスライダーをやめて、SWELLの標準機能（全画面動画や静止画）で代替するのを強く推奨します。

デザインのカッコよさと、サイトのパフォーマンスは、常にトレードオフの関係にあります。

コピペで実装する時も、「なんでこのコードで動くのか」「どんなデメリットがあるのか」をちょっとでも理解しておくと、トラブルが起きた時に自分で対処できるようになりますよ。ぜひ、あなたのサイトにうまく取り入れてみてください！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！