無限スクロール

2025年12月10日2025年12月19日

サンプル

作成するための要素

ブロック要素

<!-- wp:group {"className":"infiniteLoop","layout":{"type":"constrained"}} -->
<div class="wp-block-group infiniteLoop"><!-- wp:loos/columns {"margin":{"x":"0rem","y":"1.5rem"},"className":"infinite-loop"} -->
<div class="swell-block-columns infinite-loop" style="--swl-clmn-mrgn--x:0rem"><div class="swell-block-columns__inner"><!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:image {"id":2600,"width":"300px","height":"150px","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://sousaw.jp/wp-content/uploads/2025/07/23277795_l-scaled.jpg" alt="" class="wp-image-2600 lazyload" style="object-fit:cover;width:300px;height:150px" ><noscript><img decoding="async" src="http://sousaw.jp/wp-content/uploads/2025/07/23277795_l-scaled.jpg" alt="" class="wp-image-2600" style="object-fit:cover;width:300px;height:150px" ></noscript></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:image {"id":2605,"width":"300px","height":"150px","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-13.png" alt="" class="wp-image-2605 lazyload" style="object-fit:cover;width:300px;height:150px" ><noscript><img decoding="async" src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-13.png" alt="" class="wp-image-2605" style="object-fit:cover;width:300px;height:150px" ></noscript></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:image {"id":2608,"width":"300px","height":"150px","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-14.png" alt="" class="wp-image-2608 lazyload" style="object-fit:cover;width:300px;height:150px" ><noscript><img decoding="async" src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-14.png" alt="" class="wp-image-2608" style="object-fit:cover;width:300px;height:150px" ></noscript></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:image {"id":2634,"width":"300px","height":"150px","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-19.png" alt="" class="wp-image-2634 lazyload" style="object-fit:cover;width:300px;height:150px" ><noscript><img decoding="async" src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-19.png" alt="" class="wp-image-2634" style="object-fit:cover;width:300px;height:150px" ></noscript></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:image {"id":2615,"width":"300px","height":"150px","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-18.png" alt="" class="wp-image-2615 lazyload" style="object-fit:cover;width:300px;height:150px" ><noscript><img decoding="async" src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-18.png" alt="" class="wp-image-2615" style="object-fit:cover;width:300px;height:150px" ></noscript></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:image {"id":2636,"width":"300px","height":"150px","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-20.png" alt="" class="wp-image-2636 lazyload" style="object-fit:cover;width:300px;height:150px" ><noscript><img decoding="async" src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-20.png" alt="" class="wp-image-2636" style="object-fit:cover;width:300px;height:150px" ></noscript></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column --></div></div>
<!-- /wp:loos/columns -->

<!-- wp:loos/columns {"margin":{"x":"0rem","y":"1.5rem"},"className":"infinite-loop"} -->
<div class="swell-block-columns infinite-loop" style="--swl-clmn-mrgn--x:0rem"><div class="swell-block-columns__inner"><!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:image {"id":2600,"width":"300px","height":"150px","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://sousaw.jp/wp-content/uploads/2025/07/23277795_l-scaled.jpg" alt="" class="wp-image-2600 lazyload" style="object-fit:cover;width:300px;height:150px" ><noscript><img decoding="async" src="http://sousaw.jp/wp-content/uploads/2025/07/23277795_l-scaled.jpg" alt="" class="wp-image-2600" style="object-fit:cover;width:300px;height:150px" ></noscript></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:image {"id":2605,"width":"300px","height":"150px","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-13.png" alt="" class="wp-image-2605 lazyload" style="object-fit:cover;width:300px;height:150px" ><noscript><img decoding="async" src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-13.png" alt="" class="wp-image-2605" style="object-fit:cover;width:300px;height:150px" ></noscript></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:image {"id":2608,"width":"300px","height":"150px","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-14.png" alt="" class="wp-image-2608 lazyload" style="object-fit:cover;width:300px;height:150px" ><noscript><img decoding="async" src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-14.png" alt="" class="wp-image-2608" style="object-fit:cover;width:300px;height:150px" ></noscript></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:image {"id":2634,"width":"300px","height":"150px","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-19.png" alt="" class="wp-image-2634 lazyload" style="object-fit:cover;width:300px;height:150px" ><noscript><img decoding="async" src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-19.png" alt="" class="wp-image-2634" style="object-fit:cover;width:300px;height:150px" ></noscript></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:image {"id":2615,"width":"300px","height":"150px","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-18.png" alt="" class="wp-image-2615 lazyload" style="object-fit:cover;width:300px;height:150px" ><noscript><img decoding="async" src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-18.png" alt="" class="wp-image-2615" style="object-fit:cover;width:300px;height:150px" ></noscript></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:image {"id":2636,"width":"300px","height":"150px","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-20.png" alt="" class="wp-image-2636 lazyload" style="object-fit:cover;width:300px;height:150px" ><noscript><img decoding="async" src="http://sousaw.jp/wp-content/uploads/2025/07/名称未設定のデザイン-20.png" alt="" class="wp-image-2636" style="object-fit:cover;width:300px;height:150px" ></noscript></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column --></div></div>
<!-- /wp:loos/columns --></div>
<!-- /wp:group -->

CSS

/* =========================================================
//  コピペで簡単！無限ループアニメーション (Swellテーマ競合対策版)
// ========================================================= */

/* 無限ループアニメーションのメインスタイル */
.infiniteLoop {
  /* 設定項目 START */
  –item-max-width: 300px;       /* 各アイテムの最大幅 (主にPC) */
  –item-mobile-width: 200px;     /* スマホでのアイテムの幅 */
  –duration: 40s;               /* アニメーションスピード */
  –gap: 1rem;                   /* 各アイテム同士の間隔 */
  –image-height: 150px;         /* PCでの画像の高さ */
  –image-mobile-height: 100px;   /* スマホでの画像の高さ */
  /* 設定項目 END */

  –play-state: running;
  –direction: normal;

  /* 無限ループ領域の表示範囲を定義し、内容がはみ出したら隠す */
  overflow: hidden !important;
  width: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* 無限ループアニメーションの定義 */
@keyframes infinite-loop {
  from {
    transform: translateX(0);
  }
  to {
    /* アニメーション要素が自身の幅の50%だけ移動する（全体の半分＝1セット分の幅） */
    transform: translateX(-50%);
  }
}

.infiniteLoop.-reverse {
  –direction: reverse;
}

/* アニメーションを実行する実際のスクロールトラック (wp-block-group__inner-container) */
.infiniteLoop > .wp-block-group__inner-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: var(–flex-direction, row) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: max-content !important;

  animation: infinite-loop var(–duration) linear infinite both;
  animation-play-state: var(–play-state);
  animation-direction: var(–direction);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 個々の画像セット (swell-block-columns) のスタイル */
.infiniteLoop .swell-block-columns {
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* swell-block-columns__inner を flex コンテナとして設定し、ギャップを適用 */
.infiniteLoop .swell-block-columns__inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(–gap) !important;
  margin: 0 !important;
  padding: 0 !important; /* ループの切れ目をなくすためにパディングを追加 */
  padding-right: var(–gap) !important; /* 2つのループのつなぎ目にギャップを作る */
  width: max-content !important;
  box-sizing: border-box !important;
}

/* [修正] 各アイテム (swell-block-column) のスタイル */
.infiniteLoop .swell-block-column {
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* [修正] 各アイテムの「内側」のラッパー (<figure>要素) のスタイル */
.infiniteLoop .swell-block-column > figure {
  margin: 0 !important;
  width: 100% !important;
  height: var(–image-height) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* 画像自体のスタイル */
.infiniteLoop img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  max-width: none !important;
  display: block !important;
  box-sizing: border-box !important;
  /* LazyLoad対策 */
  opacity: 1 !important;
}

/* PC表示 (画面幅600px以上) のアイテム幅 */
@media (min-width: 600px) {
  .infiniteLoop .swell-block-column {
    width: var(–item-max-width) !important;
  }
}

/* スマホ表示 (画面幅599px以下) のアイテム幅 */
@media (max-width: 599px) {
  .infiniteLoop .swell-block-column {
    width: var(–item-mobile-width) !important;
  }
  .infiniteLoop .swell-block-column > figure {
    height: var(–image-mobile-height) !important;
  }
}

Javascript

なし

備考等

①　同一の画像の入ったリッチカラムブロックを上下に２種類作成。（リッチカラムブロックを作成後にコピーする）
②　上記をグループ化
③　グループのクラス名にinfiniteLoopを指定

※　フルワイド表示にしたい場合は、CSSの末尾に以下を追加

/* PC表示のみ：無限スクロールを画面幅いっぱいに広げる / @media (min-width: 960px) { .infiniteLoop { width: 100vw !important; / 画面幅ジャスト / max-width: 100vw !important; margin-left: calc(50% – 50vw) !important;/ コンテンツ中央基準で左右にはみ出させる */
margin-right: calc(50% – 50vw) !important;
}
}

※　枚数が多いとスクロールが早くなるので、
/* 無限ループアニメーションのメインスタイル */
.infiniteLoop
の　–duration: 〇s;
で調整する