画像スライダー付きステップブロックの作り方｜手順と画像を分かりやすく整理

手順記事の画像は、番号と説明文を追える順番で見せることが先です。本文で作業を理解できる状態を作り、補足画像が複数ある場合にスライダーを使います。この記事では実装デモと配布JSON、導入時の確認点を整理します。

スクロール連動アニメーションはIntersectionObserver、スライダーはブラウザ標準のネイティブスクロールで実装しています。特別なライブラリは使っていません。

ところが、そのJSとCSSの置き場所がブロック定義の「Styles & Scripts」欄で、ここを出力できるのはPro版だけです。
無料版はこの欄を保存はしますが、ページへ書き出す処理を持っていません。

Lazy Blocksの基本操作はLazy Blocks使い方完全ガイドで確認できます。

• 「手順を解説しても読者が途中で離脱してしまう…」
• 「テーマ標準のステップブロックはデザインが地味で物足りない…」
• 「解説用の画像を複数見せたいが、縦長になりすぎてしまう…」

各手順の説明は縦に並べ、手順内の複数画像は横に切り替える構成です。画像をすべて縦積みにする場合の長さを抑えられます。

完成デモ：手順の説明と複数画像の切り替えを確認する

まず下のデモで、説明を読みながら画像を切り替えられるか確かめてください。操作マニュアルや設定の解説に使える構成です。

複数画像を登録するとスライダーになります。順番が分かる画像名と説明を用意し、飛ばしてよい補足と必須の操作を区別して載せます。

手順や説明文が増えれば記事全体は長くなります。スライダーで省けるのは主に画像の縦積みなので、説明自体も一手順ずつ簡潔に書きましょう。

1. スクロールに連動してハイライトされるアニメーション機能

PCでは、画面中央付近の手順がハイライトされます。現在位置を示す補助ですが、色だけに頼らず、番号と見出しでも順番が分かるようにします。

new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    entry.target.classList.toggle('is-active', entry.isIntersecting);
  });
}, { rootMargin: "-30% 0px -40% 0px", threshold: 0 });

ポイントはrootMargin: "-30% 0px -40% 0px"です。
画面の上下をそれぞれ30%・40%だけ削った、画面中央あたりの帯にステップが来たときだけ「読んでいる最中」と判定しています。
画面に入った瞬間・出る瞬間に反応させると忙しない動きになるので、あえて中央付近に絞っています。

なお、このハイライトはwindow.innerWidth > 600の条件でPCだけに限定しています。
スマホは画面が縦に狭く、ステップが常に画面中央付近にあるような状態になりやすいため、ハイライトを付けても意味を持たないと判断しました。

ハイライトされたステップは、こんな見た目になります（枠が青くなり、ノードにも色が付きます）。

2. 手順内の複数画像を横へ切り替える

一つの手順に複数画像を入れると、矢印とカウンターが表示されます。スマホでは、スワイプに気づけるか、最後の画像まで到達できるかを確認してください。

3. ステップごとのテーマカラー指定＆充実の補足要素

ステップごとにアクセントカラーを自由に変更できるため、警告事項には赤、完了イメージには青など、直感的なデザインが可能です。

さらに、ワンポイントの「アドバイス（補足情報）」や、外部サイトへ誘導する「CTAボタン」もブロックの設定からサクッと追加できます。

「既存プラグイン」との差別化

文章だけの短い手順なら、テーマ標準のステップ表示で足りる場合があります。複数画像と説明を一緒に管理したいときに、このブロックを選びます。

画像切り替えを追加すると、操作の確認箇所も増えます。公開前にPCの矢印操作とスマホのスワイプを両方試しておきましょう。

このブロックはRepeaterコントロールを使って、必要な数だけステップを増減できるように作っています。
Repeater自体は無料版でも使える機能です。

ただし前述のとおり、見た目と動きを支えているCSS・JSはPro版でないと出力されません。
配布JSONをそのまま動かすにはPro版が必要、という点は先にお伝えしておきます。

画像の移動にはブラウザ標準のscrollBy()を使い、外部スライダーライブラリは読み込みません。実際の表示速度は画像容量や他の機能にも左右されるため、導入後に確認してください。

画像だけのスライダーと、手順説明を分ける

目的	選び方
作業を順に説明する	ステップ番号・見出し・説明を本文で読める形にし、補足画像を組み合わせる。
写真を順番に見せる	画像スライダーやギャラリーを比較。手順番号を無理に付けない。
記事一覧を自動表示する	投稿を取得する別の実装が必要。入力した画像を切り替える機能とは分ける。

画像の順番は説明文に合わせ、同じ役割の画像は比率と表示サイズをそろえます。スマホで切り抜かれる場合は、操作ボタンや読ませたい文字が残る画像を選び直してください。キャプションと代替テキストには、前後の説明を補う情報を書きます。

自動再生や切り替え効果は、手順を理解する速度より優先しません。読み終わる前に画像が変わるなら手動切り替えを検討します。停止操作、矢印、キーボード、タップが使えるかを確認し、操作が難しい環境でも本文だけで手順を追えるようにします。

テーマ標準のギャラリー、スライダー用ブロック、独自コードにはそれぞれ用途があります。たとえばWordPress.comのスライドショーやVK Blocksの案内にある設定が、そのままこの配布ブロックで使えるわけではありません。導入先の機能と、画像の並び順・高さ・余白の設定を照合してください。

画像を大量に追加する前に、数枚で表示を確かめます。容量を抑えた適切なサイズを使い、読み込み前後のレイアウトとページ末尾までの動作を確認してから増やしましょう。

配布用JSONファイルダウンロード

JSONを保存し、まず二つの手順と各二枚程度の画像で試してください。画像の順番、カウンター、説明との対応が合っていれば、本番の手順へ置き換えます。

入力欄やJSONの扱いが分からない場合は、ブロックの設定・インポート手順を参照してください。既存の環境に合うか、検証用ページで確かめてから使用します。

配布データの動作条件と読み込み手順

この記事のJSONは、記載した環境向けのブロック定義です。プラグイン本体のZIPとは別のファイルです。動作条件を確認し、バックアップを取ったうえで検証用ページへ読み込んでください。

CSS・JavaScriptをStyles & Scriptsで管理している配布物は、その出力機能が必要です。入力コントロールが無料版に含まれていても、同じ見た目や動作が再現できるとは限りません。条件が合わない場合は、標準ブロックや無料版向けの配布データを確認できます。

• 配布ページからJSONを保存し、ブロック管理画面のExport / Importで読み込む。
• 一覧に追加された定義を確認し、テスト記事へ一つ配置する。
• 見出し・本文・画像・URLを自分の内容へ置き換える。
• PC・スマホで長文、空欄、クリック、開閉などの動作を確認する。
• 問題がある場合は重ねてインポートせず、読み込み状態とCSS・JavaScriptの出力を確認する。

設定方法はブロック設定の技術ガイドにまとめています。配布物についての連絡はお問い合わせページをご利用ください。