More than 1 year has passed since last update.

ScrollSequenceの使い方【WordPressプラグイン】

Last updated at 2022-06-14Posted at 2022-06-14

Scrollsequenceとは、スクロールに応じて画像が細かく切り替わるコンテンツを作成するプラグインです。以下の画像は公式サイト内サンプルの１つです。スクロールバーと連動して画像が切り替わっていることがわかります。（リンクをクリックするとGif画像が開きます）
https://hanbee88.kagoyacloud.com//wp-content/uploads/2022/06/Watches-–-Scrollsequence-Live-Demo-Google-Chrome-2022-06-14-11-48-56-3.gif

実際にページを動かすとわかりやすいので、サンプルページにアクセスしてみてください。
公式サイトにはデモ映像もあります。

なんとなくイメージが掴めたでしょうか？ユーザーの操作に連動して画面が動くため、ユーザーの印象に残るページを作ることができます。
※当記事ではFREE版（無料）の解説です。PRO、BUSINESS版では異なる場合がありますのでご注意ください。

事前準備

このプラグインの仕組みとしては、複数の画像をスクロールに合わせて１枚ずつ切り替えて表示しています。パラパラ漫画のようなイメージですね。
そのため、まずはスクロールさせる画像ファイルを用意します。少なすぎるとすぐに終わってしまうため、５０枚ぐらいはあると良いでしょう。（※参考　上の使用例は１２３枚使用）

※動画を一連の画像にしたい場合はVideo to JPG converterというツールが便利です。

（手順）
ファイルを選択して「Upload Video!」をクリック→Start time（開始秒数）とEnd time（修了秒数）を設定し、「Convert to Jpg」をクリック→画像を確認し、OKなら「Download frames as ZIP」をクリック→ZIPファイルがダウンロードされる。

使用方法

1, Scrollsequenceをインストールし、有効化します。

2, ダッシュボードのScrollsequenceから、「Add New Scrollsequence」を選択する。

3, タイトルを設定します。

4, Scrollsequence内、「Add Scene」を選択します。
Sceneは複数個追加可能です。

5, 「Select Attachments」を選択すると、メディア選択画面になります。用意した画像をすべて挿入/選択し、「Use Attachments」をクリックしましょう。
※最初の画像を選び、最後の画像までShiftを押しながら選択すると一括選択することが出来ます。

無料版では1シーンにつき９９枚までしか写真が挿入できません。画像一覧には表示されていますが、数字の部分が「Ｘ」と表示されているものは無効になっていますのでご注意ください。

6, 写真が挿入できたら、「Fixed Content」からコンテンツを設定します。WordPress本体のブロックエディタと同じく、テキストエディタとビジュアルエディタを選択できます。
CSSは「ScrollsequenceSetting」のCustomCSSから設定できます。デフォルトではちょうど真ん中に設置されるようになっています。