スライダーブロック

スライダーブロック

シンプルなスライドショーを作成できるブロックです。

  • このページで紹介している機能では有料プラグイン「yStandard Toolbox」を使用しています。
    プラグインの詳細は yStandard Toolbox ページをご覧ください。

※このブロックは yStandard Toolbox v1.17.0から利用できます。

スライダーサンプル

シンプルなスライダー

エフェクト:スライド、自動再生:3秒

フェード

エフェクト:フェード、自動再生:3秒

高さ指定

全幅、エフェクト:スライド、自動再生:3秒、高さ:PC-300,タブレット-400,モバイル-500

1画面に3スライド表示

エフェクト:スライド、自動再生:3秒、
1画面に表示するスライド数:PC-3,タブレット-2,モバイル-1
スライド間の余白:PC-20px,タブレット-10px,モバイル-0

スライダーブロックの追加方法

スライダーブロックは「[ys]yStandard Toolbox」カテゴリーにある「スライダー」を選択します。

スライダーブロックが追加されました。

最初に画像ブロックが1つ追加された状態になっています。画像ブロックの「アップロード」「メディアライブラリ」などから画像を選択します。

スライドの追加

スライドの追加はスライダーブロックの末尾に表示された「+」ボタンをクリックします。

追加するブロックの種類が表示されるので、選択します。

「スライダーアイテム」はスライダーアイテムブロック内に任意のブロックを追加できます。中・上級者向けの方法となりますが、自由にスライダーのコンテンツを作ることができます。

注意事項(仕様上の制限等)

スライダーブロックでは以下の仕様上の制限があります。

  • 編集画面ではスライダー表示できません。ページのプレビューでスライダーの動作を確認してください。
  • AMPページではスライダーは機能しません。最初のスライドしか表示されませんのでご注意ください。
  • Internet Explorerではスライダーは動作しません。

スライダーブロックの設定

スライダーブロックの設定は、内包するブロックを選択している状態では表示されません。

必ずスライダーブロックを選択するようにしてください。

設定一覧

設定説明
■ツールバー
プレビュータイプ変更編集画面のプレビューをグリッドタイプと横長タイプで切り替える設定
■基本設定
エフェクトスライドの切り替え方法
スライドの速さ(秒)スライド切り替えの時間
ループ再生最後のスライドまで進んだら最初のスライドから再生を繰り返す設定
■自動再生(オートプレイ)
自動再生スライドを自動再生する設定
スライド切り替えの時間(秒)自動再生でスライドを切り替える時間(秒)
マウスホバーで再生を止めるスライダーにマウスカーソルを乗せたときに自動再生を止める設定
手動スライドで再生を止める手動でスライド切り替えをしたときに自動再生を止める設定
■サイズ設定
縦横比スライダーのサイズを縦横比で指定する設定
高さスライダーの高さ設定
※「縦横比」設定との併用不可
■スライド表示数設定※エフェクトで「スライド」「カバー」を選択しているときのみ有効
1画面に表示するスライド数画面上に表示するスライドの数の設定
グループ化するスライド数1回のスライドで同時に動かすスライド数の設定
※スライドの総数と「1画面に表示するスライド数」と「グループ化するスライド数」の組み合わせによってはうまく動作しない場合があるのでご注意ください。
スライド間の余白スライドとスライドの間の余白設定
■矢印(ナビゲーション)設定
矢印(ナビゲーション)を表示するスライダーの左右にナビゲーションを表示するかの設定
ナビゲーションの色設定
■ページネーション設定
ページネーションタイプ表示するページネーションの種類設定
ページネーションの色設定
■上級者向け設定
スライダーIDスライダーを識別するためのID。スライダーのidの一部になります。
※スライダーIDを設定しない場合、または別のスライダーと同じIDをつけた場合正常にスライダーが動作しない場合があります。