スライダー付きステップブロックを実装しよう【配布/Lazy Blocks Pro】

このスライダー付きステップブロックは、Lazy Blocksのコントロールを組んで作っています。

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

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

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

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

そこで、手順がいくつ増えても縦に伸びないステップブロックを作りました。

【完成デモと機能紹介】スクロール連動アニメーションとスライダー機能を備えた美しい手順解説

今回作成したカスタムブロックは、読者のスクロールに合わせて各ステップがフワッと浮かび上がるリッチなタイムライン型デザインです。

解説用の画像を複数登録すれば自動的にスライダー化されるため、スペースを節約しながら情報量の多いマニュアルやチュートリアルを直感的に伝えることができます。

手順が5つでも10でも、記事の縦の長さはほとんど変わりません。

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

読者がページをスクロールし、対象のステップが画面内に入ると、自動的にカードが浮き上がり、ノード（丸いアイコン）に色がつくアニメーションを実装しています。
現在どの手順を読んでいるのかが視覚的に際立ち、読者の集中力を途切れさせません。

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. 複数画像は自動でスライダー化！無駄なスクロールを削減

1つのステップ内に複数の画像を登録した場合、自動的に矢印ボタンとカウンター付きのスライダー（カルーセル）に切り替わります。スマホの小さな画面でも、横スワイプでサクサク手順画像を確認できるため、縦に間延びした読みにくい記事になるのを防ぎます。

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

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

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

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

一般的なテーマ標準のステップブロックは、単なるテキストとアイコンの羅列になりがちです。

また、スライダー機能を追加しようとすると、別途ギャラリープラグインを導入してショートコードを埋め込むなどの手間がかかり、レイアウト崩れの原因にもなります。

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

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

スライダーもSwiperのような外部ライブラリを読み込まず、ブラウザ標準の横スクロール（scrollBy()）だけで実装しています。
読み込むJSが増えない分、サイトの表示速度への影響も最小限に抑えられます。

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

以下のリンクから、今回作成した「ステップブロック」の設計図（JSONファイル）をダウンロードしてください。

※当サイトでは、ステップブロック以外にもクリック率を上げるレビューボックスや比較表などのカスタムブロックを無料配布しています。ぜひ併せてご活用ください

なお、当サイトのリンク経由でPro版を購入された方には、Pro版で動くブロックをまとめた限定ページをお渡ししています。

【最短3分】このデザインをあなたのサイトに導入する準備
「Lazy Blocks Proの導入」

ここからは、先ほど紹介したデザインブロックを実際に使えるようにするための簡単な準備を解説します。

一度インストールしてしまえば、当サイトで無料配布している他の高品質デザインもすべて使い放題になります。サクッと終わらせてしまいましょう。

当サイトのこのシリーズで配布しているブロックは、いずれもLazy Blocks Proが必要です。

コントロールの種類自体は無料版の範囲のものが中心なのですが、見た目と動きを作っているCSS・JSをブロック定義の「Styles & Scripts」欄に置いており、この欄をページへ出力できるのがPro版だけだからです。

無料版プラグインのソースを確認したところ、この欄の値を保存する処理はあっても、出力する処理そのものが入っていませんでした。
無料版で読み込むと、HTMLは出るのに装飾も動作も効かない状態になります。

CSSとJSはどちらも素のコードなので、テーマの「追加CSS」やフッターへ手で移し替えれば無料版でも再現はできます。
ただ「JSONを読み込むだけ」で済ませたいなら、Pro版が前提になります。

Pro版を買うほどではない、という場合はLazyblocks 無料版で使えるブロックテンプレート集をどうぞ。
あちらはCSS・JSをブロック本体に直接埋め込んであるので、無料版のままで動きます。

Pro版があると、条件分岐(Controls Conditions)でこの記事のような複雑なブロックの編集画面を整理できたり、CSSとJSをブロックごとに分離できたりします。
1つのブロックのためだけでなく、今後も自作ブロックを増やしていく予定なら検討する価値があります。

プラン名	ライセンス数	価格 (年額)	主な機能
Personal	1 サイト	$49 （税込み$53.90）	すべてのPro機能 1年間の更新
Freelancer	20 サイト	$169 （税込み$185.90）
Agency	無制限	$299 （税込み$328.90）

Pro版を導入することで、編集画面の項目が整理され、より直感的な操作が可能になります。さらに、Pro版限定の高度な機能により、カスタマイズの幅が飛躍的に広がります。

デザインを導入する手順

導入は非常に簡単です。

「プラグインのじかん」からの提案

「一度 Lazy Blocks PRO を導入すれば、デザインの悩みはすべて消える」

私も長年、テーマ特有の装飾デザインを利用してきましたが、「もっとこうだったらいいのに」という物足りなさや、他サイトとの差別化についてずっと頭を悩ませてきました。

しかし、理想の装飾を追加しようとすると、複数のプラグインを入れなければならなかったり、そもそも条件に合うプラグイン自体が見つからなかったりすることも少なくありません。

当サイト「プラグインのじかん」では、この記事のブロック以外にもカスタムブロックを作り続けています。

記事を1本ずつ回って集めなくても、Pro版で動くブロック36種を1か所にまとめてあります。
このページのリンク経由でPro版を購入された方に、そこを開くパスワードをお渡しする形です。

しかも渡して終わりではありません。新しく作ったブロックは同じ場所に追加していくので、一度受け取れば、あとから増えたぶんも追加料金なしで取りに来られます。

特典の中身と受け取り方を見る

※今後も随時追加していきます。

また、「こんな装飾ができるブロックが欲しい」といったリクエストも随時募集しています。皆さまの理想を形にするお手伝いをさせていただきますので、ぜひお気軽にご意見をお寄せください！

• お問い合わせはこちら

さらに詳しく知りたい方へ

Lazy Blocks PRO を使いこなして、サイトのユーザー体験を上げたい方はこちらの徹底解説記事も併せてご覧ください。