全幅で流れる画像を作る方法

以下のコードを使うと、画面いっぱいの横幅で、画像がゆっくりと左右に流れる「無限スライダー」を作ることができます。

1 HTMLコード

<div class="flow-banner" id="flowBanner">
  <div class="flow-track">
    <img src="https://example.com/wp-content/uploads/2000/00/image1.jpg" alt="">
    <img src="https://example.com/wp-content/uploads/2000/00/image2.jpg" alt="">
    <img src="https://example.com/wp-content/uploads/2000/00/image3.jpg" alt="">
    <img src="https://example.com/wp-content/uploads/2000/00/image4.jpg" alt="">
    <img src="https://example.com/wp-content/uploads/2000/00/image5.jpg" alt="">
    <!-- 無限ループ用にもう一度同じ画像群を追加 -->
    <img src="https://example.com/wp-content/uploads/2000/00/image1.jpg" alt="">
    <img src="https://example.com/wp-content/uploads/2000/00/image2.jpg" alt="">
    <img src="https://example.com/wp-content/uploads/2000/00/image3.jpg" alt="">
    <img src="https://example.com/wp-content/uploads/2000/00/image4.jpg" alt="">
    <img src="https://example.com/wp-content/uploads/2000/00/image5.jpg" alt="">
  </div>
</div>

2 汎用CSS

/* -----------------------------
 * 全幅で流れる画像
----------------------------- */

.flow-banner {
  width: 100vw; /** ビューポート全体の幅に設定 **/
  margin-left: calc(-50vw + 50%); /** コンテンツ中央から全幅に補正 **/
  overflow: hidden; /** 横スクロールバーやはみ出し部分を非表示 **/
  background-color: #fff; /** 背景色を白に設定（任意） **/
}

.flow-track {
  display: flex; /** 画像を横並びに配置 **/
  width: calc(20vw * 10); /** 画像10枚分の幅に設定（2セット分） **/
  animation: flowAnime 50s linear infinite; /** 50秒で左へ無限ループアニメーション **/
  will-change: transform; /** GPUレンダリングを使用し、アニメーションを滑らかに **/
}

.flow-track img {
  width: 20vw; /** 各画像の幅を画面幅の20%に設定 **/
  flex-shrink: 0; /** 親要素が狭くなっても画像サイズを縮めない **/
}

@keyframes flowAnime {
  0% { transform: translateX(0); } /** 開始位置（左端） **/
  100% { transform: translateX(-50%); } /** 1セット分左に流す **/
}

/* タブレット向け */
@media screen and (max-width: 800px) {
  .flow-track img {
    width: 35vw; /** 少し大きくする **/
  }
}

/* スマホ向け */
@media screen and (max-width: 600px) {
  .flow-track img {
    width: 45vw; /** 小さい画面でさらに大きく見せる **/
  }
}

/* 超小型スマホ向け */
@media screen and (max-width: 400px) {
  .flow-track img {
    width: 50vw; /** 画面幅いっぱいに近くする **/
  }
}

3 設置方法

1. 上記HTMLをクラシックエディタの「テキストモード」で貼り付け。
2. CSSは子テーマのstyle.cssか「外観 → カスタマイズ → 追加CSS」に貼り付け。
3. 画像URL（https://example.com/wp-content/uploads/20××/××/image.jpg）を自分の画像に置き換える。

4 ポイント

• 画像は同じサイズ（横長推奨、例：1920×1080）に統一。
• animation: flowAnime 30s linear infinite; の「30s」を変えると速度調整可能。
• 全幅エリアとして自然に見せたい場合は、直前・直後のセクションの余白を少なくすると良い。
• 左方向・右方向の変更：
  CSSの@keyframesを変更するだけで簡単に方向を変えられます。

4.1 左向き（デフォルト）

@keyframes flowAnime {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /** 左方向に流れる **/
}

4.2 右向きに流したい場合

@keyframes flowAnime {
  0% { transform: translateX(-50%); } /** 開始位置を左側に設定 **/
  100% { transform: translateX(0); } /** 右方向に流れる **/
}

• 左方向：画像が左に流れる（通常のニュースティッカー風）
• 右方向：画像が右に流れる（逆向きにスライド）
• 両方向を交互に動かしたい場合は、animation-direction: alternate;を追加。

5 完成イメージ

Lightning デザイン設定で「１カラム」に設定する。

全幅で流れる画像は、別ページで表示中。
▶ 全幅で流れる画像