Smart Sliderで利用出来る『レイヤーの種類(Media Layer)』について解説しています。Pro版の機能も含めて解説しているので、すでにPro版ユーザーの方、または、これからPro版を使い始める方にとって有益になるよう構成しています。
また、無料版ユーザーの方にとっても基本操作の理解が深まるように記述しており、合わせて『Pro版アップグレードで可能になること』のイメージも明確になると思います。
本記事は、パソコンの画面から見ていただくことを推奨します。
Mediaレイヤー
Smart Slider の『Media』レイヤーを使用すると、動画や音声を簡単にスライドに組み込むことが出来ます。
左端の『レイヤー追加パネル』には、５つの基本レイヤーが並んでいますが、これら基本レイヤー以外の特別なレイヤーは、緑色のプラスボタンを押して、開いたウインドウの中から選択することが出来ます。
ここでは、全部で４種類ある『メディアレイヤー』について詳しく解説していきます。
Vimeoレイヤー
『Vimeo』レイヤーを使用すると、スライドにVimeo動画を配置できます。
『Media』カテゴリーの中から『Vimeo』を挿入したい箇所にドラッグ&ドロップします。
『Vimeo』レイヤーが配置されました。
表示させたい VimeoのURLを設定します。カバー画像は自由に変更することも出来ます。
『VIDEO SETTINGS』の各項目で、動画の再生・停止条件を指定します。ただし、ブラウザ側の仕様や制限などから、ここで指定した通りの動作にならないこともあるそうです。
・自動再生：スライドが表示されたら自動再生
・When Ended：ビデオ再生が終了後の動作を指定
・Start Time：ビデオの開始位置を「秒数」で指定できる
・Volume：ビデオの音量を指定
・スクロール時に一時停止：スクロールによって動画が画面外となった際の動作
・Loop：ビデオが終了したら最初から再生し直す
・Restart On Slide Change：別スライドに移動→再度戻った際にビデオを０秒から再生
『表示設定』の項目は、動作させるのに、動画側に一定の条件が必要となるそうです。
＊「縦向き」は誤訳：Portrait = プロファイル画像
YouTubeレイヤー
『YouTube』レイヤーを挿入したい箇所にドラッグ&ドロップして配置します。
表示させたい YouTubeのURLを設定します。カバー画像は自由に変更することも出来ます。
『VIDEO SETTINGS』の各項目で、動画の再生・停止条件を指定します。
（ブラウザ側の仕様や制限などから、ここで指定した通りの動作にならないこともある。）
『操作』(オフ)でビデオ下部のコントロールとタイムバーを非表示にします。
・『Centered』：(オン)レイヤーのアスペクト比が動画と異なる場合、動画が拡大表示されて隙間が出来ないようにする。
・『Show Related Videos』：
- Same Channel：再生した動画と同じチャンネルの関連動画を表示
- Anywhere：どのチャンネルからの関連動画でも表示
動画レイヤー
『動画』レイヤーを挿入したい箇所にドラッグ&ドロップして配置します。
MP4形式の動画を設定。カバー画像は自由に変更することも出来ます。
『Preload』では、動画をどのタイミングで読み込むかを指定します。
・『Auto』：スライダーが読み込まれると動画も自動的に読み込む。
・『Metadata』：動画が含まれるスライドが表示されていない場合、動画は読み込まない。
・『なし』：ユーザー操作によって動画再生されるまで動画の読み込みはしない。
Audioレイヤー
『Audio』レイヤーを挿入したい箇所にドラッグ&ドロップして配置します。
MP3形式の音声ファイルを指定します。URLを貼り付けて外部ファイルを使用することも可。
コントロールバーの色は変更できます。
『表示設定』で、オーディオプレーヤー各パーツの表示や、非表示にするかなどを設定できます。
まとめ
今回は、Smart Slider3 Proの『レイヤーの種類 (Media Layer)』について解説いたしました。
スライドに動画や音声を配置できるようになると、スライダー制作の幅も広がると思います。
Pro版を使ってみる
本記事を読んで『Pro版を使ってみたい』『興味が湧いた』と思われた方は、以下の記事で導入方法を詳しく解説しております🚀
Pro版の機能を含めた使い方については、詳しく解説した記事を少しずつ追加しておりますので、こちらもぜひご覧ください👇👇👇
コメント