WordPress　おすすめ設定　作品スライドの手順書

<div class="marquee-wrap">
  <div class="marquee">
    <img src="http://e218.deau-ae.com/portfolio/wp-content/uploads/2025/07/ば　バナー＿２＿クラフトビール＿レモン＿白＿10801080＿25.jpg" />
    <img src="http://e218.deau-ae.com/portfolio/wp-content/uploads/2025/07/ば　バナー＿2＿クラフトビール＿レモン＿10801080＿25.6.jpg" />
    <img src="http://e218.deau-ae.com/portfolio/wp-content/uploads/2025/07/ば　バナー＿1＿クラフトビール＿レモン＿10801080＿25.6.jpg" />
    <!-- 以下、繰り返し -->
    <img src="http://e218.deau-ae.com/portfolio/wp-content/uploads/2025/07/ば　バナー＿２＿クラフトビール＿レモン＿白＿10801080＿25.jpg" />
    <img src="http://e218.deau-ae.com/portfolio/wp-content/uploads/2025/07/ば　バナー＿2＿クラフトビール＿レモン＿10801080＿25.6.jpg" />
    <img src="http://e218.deau-ae.com/portfolio/wp-content/uploads/2025/07/ば　バナー＿1＿クラフトビール＿レモン＿10801080＿25.6.jpg" />
  </div>
</div>

～流れる画像作成の手順～

【ステップ１】ElementorでHTMLウィジェットを配置

1. 固定ページや投稿ページでElementorを開く
2. **「HTMLウィジェット」**をページにドラッグ
3. 以下のHTMLコードをコピペします（画像URLはご自身のに変更してください）：

<div class="marquee-wrap">
  <div class="marquee">
    <img src="https://example.com/image1.jpg" />
    <img src="https://example.com/image2.jpg" />
    <img src="https://example.com/image3.jpg" />
    <!-- 以下、画像を2周させると継ぎ目が自然になります -->
    <img src="https://example.com/image1.jpg" />
    <img src="https://example.com/image2.jpg" />
    <img src="https://example.com/image3.jpg" />
  </div>
</div>

【ステップ２】カスタムCSSを追加する

1. WordPressの管理画面 → 「外観」＞「カスタマイズ」＞「追加CSS」 にアクセス
2. 以下のCSSを追加してください：

.marquee-wrap {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
}

.marquee {
  display: inline-flex;
  animation: scroll-left 30s linear infinite;
}

.marquee img {
  height: 200px; /* 画像の高さは自由に調整可能 */
  margin-right: 30px;
  flex-shrink: 0;
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}