メディア – スライダー
作成対象：
- 初心者
- 中級
- ユーザー
Slider コンテンツタイプを使用して、Page Builder stage に画像のスライドショーを追加します。 新しい画像をアップロードしたり、ギャラリーや製品カタログから既存の画像を選択したりできます。 スライダーは、自動的に再生するように設定することも、ナビゲーションボタンを使用して手動で制御することもできます。 スライダーを特定のプロモーションに関連付けるには、 ダイナミックブロックを参照してください。
NOTEツールボックス
Slider コンテンツ タイプを使用する場合は、個々のスライドと、1 つ以上のスライドを保持するスライダ コンテナを追加および編集します。 スライドごとに専用のツールボックスがあり、Page Builder のステージでスライドをデザインするのに使用します。
個別のスライド ツールボックス
| ツール | アイコン | 説明 |
|---|---|---|
| 移動 |
 | スライドをスライド上の別の位置に移動します。 |
| （ラベル） | スライド番号 | 現在のスライドの番号を識別します。 |
| 設定 |
 | Edit Slide ページを開きます。このページで、現在のスライドのプロパティを変更できます。 |
| 複製 |
 | 現在のスライドをコピーします。 |
| 削除 |
 | スライダーから現在のスライドを削除します。 |
スライダーツールボックス
| ツール | アイコン | 説明 |
|---|---|---|
| 移動 |
| スライダをステージ上の別の位置に移動します。 |
| （ラベル） | Slider | スライダーコンテナを識別します。 |
| 設定 |
| Edit Slider ページが開き、ビデオとコンテナのプロパティを変更できます。 |
| Hide |
 | 現在のスライダを非表示にします。 |
| 表示 |
 | 非表示のスライダーを表示します。 |
| 複製 |
| スライダのコピーを作成します。 |
| 削除 |
| ステージからスライダーを削除します。 |
NOTE個々のスライドの追加
-
スライダーを配置するページ、ブロック、またはダイナミック ブロックを開き、[Content] セクションを展開します。
-
Page Builder パネルで Media を展開し、Slider プレースホルダーをステージの行、列、タブにドラッグします。
次の例では、行の背景色は黄色（
#fffd16）です。
スライダーコンテナは、空のスライドが 1 つ表示されたステージに表示されます。
-
スライダーコンテナ内をクリックして テキストエディターを表示し、最初のスライドのコンテンツを入力します。
コンテンツ設定を使用して、より複雑なバナーコンテンツを含めることもできます。
-
スライダーの下部にあるナビゲーションドットをクリックして、個々のスライドのツールボックスを表示し、設定 （
スライダには 2 つのツールボックスがあります。 下部のスライドツールボックスを使用していることを確認します。
-
必要に応じて、次の節に従って設定を行います。
-
完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。
さらにスライドを追加
次の節では、個々のスライドから始めて、特定の製品の機能とリンクを備えたレスポンシブスライダーを作成する一連の手順について説明します。 個別のスライドがまだない場合は、前の手順に従って個別のスライドをステージに追加します。
スライドを追加するには、次のいずれかの方法または組み合わせを使用します。
方法 1：既存のスライドを複製する
既に設定されているスライドを必要な設定で複製することで、時間を節約できます。
-
スライドの下にあるナビゲーションドットをクリックしてツールボックスを表示し、複製 （
-
新しいスライドのナビゲーションドットをクリックしてツールボックスを表示し、設定 （
-
必要に応じて、次の節に従って設定を変更します。
-
完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。
方法 2：新しい空のスライドを追加する
-
上部のスライダーコンテナにマウスポインターを置いてツールボックスを表示し、「追加」（
新しい空白のスライドがスライダーに追加され、独自のナビゲーション ドットとツールボックスがステージに表示されます。
-
新しいスライドのナビゲーションドットをクリックしてツールボックスを表示し、設定 （
-
必要に応じて、次の節に従って設定を変更します。
-
完了したら、右上隅の「Save」をクリックして、Edit Slide ページを閉じます。
スライドにウィジェットを追加
次の手順を使用して、Page Builder のステージのスライドに任意の ウィジェットタイプを追加できます。
-
スライドに表示する ウィジェットを作成します。
-
スライダーを配置するページ、ブロック、またはダイナミック ブロックを開き、[Content] セクションを展開します。
-
Page Builder パネルで Media を展開し、Slider プレースホルダーをステージの行、列、タブにドラッグします。
-
スライダーコンテナ内をクリックして テキストエディターツールバーを表示し、ウィジェットを挿入 （
-
必要な Widget Type を選択します。
-
ウィジェットのタイプによって異なる設定を指定します
-
完了したら、右上隅の「Insert Widget」をクリックします。
-
必要に応じて他の設定を変更します。
-
完了したら、右上隅の「Save」をクリックします。
各スライドを表示
ステージ上に各スライドを表示するには、現在表示されているスライドの下にある次の点をクリックします。
前の例のスライドには、背景画像、透明なモバイル画像、テキストエディターから追加されたインライン画像があります。 この手法は、モバイルデバイスで背景画像をオフにし、小さいインライン画像のみを表示する方法でよく機能します。 この例の製品スライドには、次の追加設定があります。
Collage Right#ffffff （白）AutoMinerva LumaTech™ V-Tee （中央揃え）ProductAlwaysBuy NowNever ShowCenter （ボタンの位置揃え）Solid#000000 （黒）1 px個々のスライド設定の変更
-
ステージ上のスライダー表示を変更し、変更するスライドを表示します。
-
個々のスライドツールボックスで、設定 （
-
右上隅にある「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。
Appearance
-
次のいずれかのスライド配置タイプを選択します。
タイプ説明Posterスライドコンテンツをスライダーコンテナの中央に配置します。 オーバーレイを使用すると、スライダーの全幅が拡張されます。Collage Leftスライダーコンテナの左側の定義済み領域にスライドコンテンツを配置します。 オーバーレイを使用すると、定義した領域のみがオーバーレイ対象になります。Collage Centerスライダーコンテナの中央にある定義済み領域にスライドコンテンツを配置します。 オーバーレイを使用すると、定義した領域のみがオーバーレイ対象になります。Collage Rightスライダーコンテナの右側の定義済み領域にスライドコンテンツを配置します。 オーバーレイを使用すると、定義した領域のみがオーバーレイ対象になります。
-
Slide Name を入力します。
編集モードで作業しているときは、ナビゲーションドットの上にスライド名がツールヒントとして表示されます。 スライド名は、ストアフロントからは表示されません。
-
スライドの Minimum Height を入力します。
最小の高さは、有効な CSS 単位（
100px、50%、50em、100vhなど）または計算（100vh - 237pxなど）を含む数値です。例えば、ページの高さを最大にカバーするようにスライドの最小の高さを設定し、背景画像とビデオを使用して魅力的なデザインオプションを作成できます。
NOTEスライドがページの高さ全体（100vh）に設定されている場合、スライドを含むスライダーもページの高さ全体をスライドの高さに合わせて伸縮します。
Background
スライドの背景表示を定義するには、多くのオプションがあります。 シンプルなカラーまたは背景画像を適用し、より高度な効果を管理できます。
Background Color
スウォッチを選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、背景色を指定します。 この設定により、行の背景色が決まります。 また、カラーの不透明度を調整することもできます。
次の 3 つの方法のいずれかで値を設定できます。
- 定義済みのカラー名（
Whiteなど） - カラーの 16 進数カラー値（例：
#ffffff） - カラーの rgba 値（不透明度の割合）（
rgba(255, 255, 255, 0.75)など）。
カラーを選択する場合は、「カラーなし ボックスの左側にあるスウォッチをクリックし す。
カラーボックスをクリックして再度カラーピッカーを開くと、スライダの下のボックスに現在の赤、緑、青、アルファ値（rgba）が表示されます。 最後の数値は、現在の不透明度の割合を小数で示します。 スライダを使用して、不透明度を調整したり、必要な小数値を入力したりできます。
NOTEBackground Type
背景の種類は、画像またはビデオです。 デフォルト Page BuilderImage で、様々な画像設定が表示されます。 Video を選択すると、Page Builder は画像設定をビデオ設定にスワップします。 両方の背景タイプの設定について、次の節で説明します。
画像タイプの設定
Background Type を Image に設定した場合は、次の設定を使用して背景画像の表示を定義します。
-
Background Image – 必要に応じて、用意されているツールを使用してバナーに適用する背景画像を選択します。
ツール説明Uploadローカルコンピューターからギャラリーに画像ファイルをアップロードし、それをバナーの背景画像として適用します。Select from Galleryバナーの背景画像として、ギャラリーから既存の画像を選択するように求めるプロンプトを表示します。
画像をカメラタイルにドラッグするか、ローカルファイルシステム内の画像を参照できます。 -
Background Mobile Image – 必要に応じて、同じツールを使用して、モバイルデバイスでの表示に使用する別の背景画像を選択します。
-
Background Size - バナーの幅に対する背景画像の拡大縮小の方法を選択します。
オプション説明Cover背景画像はバナーの全幅をカバーしています。Contain背景画像は、コンテンツ領域の幅に制限されます。Auto現在のスタイル シートからサイズを適用します。
-
Background Position - バナーに対する背景画像のアンカー方法を選択します。
アンカーポイント位置Top左/中央/右Center左/中央/右Bottom左/中央/右アンカーポイントは、プッシュピンのようなもので、指定した背景位置で画像をバナーにアタッチします。
-
Background Repeat – 背景画像を繰り返してスペースを埋める場合は、この設定
Yesを変更します。
ビデオタイプの設定
背景の種類 を Video に設定する場合、次の設定を使用して背景画像の表示を定義します。
-
Video URL – 有効なビデオ URL を入力します。 有効なビデオ URL は、次へのリンクです。
- YouTube ビデオ：
https://youtu.be/CoDhMRUUjeI - Vimeo ビデオ：
https://vimeo.com/190156113 - 有効なビデオ ファイル （
.mp4を推奨）:https://myvideos.com/spiral.mp4
- YouTube ビデオ：
-
Overlay Color - ビデオに透明の濃淡を適用するカラーを選択します。
-
Infinite Loop -
Noに設定すると、ビデオを 1 回再生して停止します。 このオプションをYes（デフォルト）に設定すると、ビデオは無限ループで繰り返されます。 -
Lazy Load -
Noに設定すると、非表示の場合でもビデオがページと共に読み込まれます。 このオプションをYes（デフォルト）に設定すると、画面に表示されている場合にのみ、ビデオはソースから読み込まれます。 -
Play Only When Visible - ビデオが表示されているかどうかに関係なく、ビデオの読み込み直後に再生を開始するには、
Noに設定します。 このオプションがYes（デフォルト）に設定されている場合、ビデオは表示されているときにのみ再生を開始します。 -
Fallback Image – 必要に応じて、ビデオが読み込まれる前および何らかの理由でビデオが読み込まれない場合に画面に表示する画像を指定します。
Content
スライドコンテンツは、ステージ上で直接変更することも、設定を変更する場合に変更することもできます。 設定では、スライドリンク、ボタン、オーバーレイなど、より複雑なコンテンツ機能が提供されます。 コンテンツの位置は、 アピアランスの配置設定を反映します。
ステージ上のシンプルなコンテンツ
-
プレースホルダーまたは既存のテキストをクリックし、スライドに表示する新しいテキストを入力します。
テキストボックスの上にエディターツールバーが表示されます。
-
エディターツールバーを使用して、テキストの入力や書式設定のほか、リンク、画像、ウィジェットなどの要素を挿入します。
設定の複雑なコンテンツ
-
スライダーの下部にあるナビゲーションドットをクリックして、個々のスライドのツールボックスを表示し、設定 （
-
Content セクションで、スライドに表示する Message Text を入力します。
-
「Content」セクションまでスクロールし、Message Text エディターを使用してバナーテキストを入力および書式設定します。
テキストリンク、画像、ウィジェットなどの要素を挿入することもできます。
-
必要に応じて、エディターツールバーを使用してテキストを書式設定します。
この例の最初のスライドには背景画像がありますが、メッセージ テキストはありません。 スライダーの上の
Buy 3 Get 1 Freeのテキストはテキストコンテナ内にあります（後で追加します）。 -
必要に応じて、スライドの Link を指定します。
リンクは、顧客がスライド領域をクリックすると表示される宛先ページです。 次の 3 つのリンクタイプのいずれかを使用できます。
-
URL – 相対 URL または完全修飾 URL へのリンク。
-
Product – 製品名または SKU に基づいて宛先ページを識別します。 部分的または完全な名前に基づいて、名前で製品を検索します。 検索結果リストから製品を選択します。
-
Category - カテゴリツリー内の特定のカテゴリまたはサブカテゴリとして宛先ページを識別します。 名前の一部または全部に基づいてカテゴリを検索します。 表示されたツリーの展開セクションからカテゴリを選択します。
-
Page – 宛先ページを特定のコンテンツページとして識別します。 名前の一部または全部に基づいてページを検索します。 検索結果リストからページを選択します。
2.4.1 リリース以降、ストアフロントの表示に関する問題により、Page Builder はスライドとネストされたテキスト内のリンクのリンクをサポートしなくなりました。 _Message Text_内のリンクを使用している場合は、_Link_ オプションを設定できません。 スライド全体に 1 つのリンクを使用する場合は、テキストからすべてのリンクを削除できます。
訪問者がストアから移動できないようにするには、「Open in new tab」チェックボックスを選択します。 このチェックボックスをオフにすると、リンクされた宛先は同じブラウザータブで開くので、訪問者をストアから効果的に移動できます。
-
-
必要に応じて、リンクをたどるように顧客に促すボタンを追加します。
スライド 外観 を配置すると、テキストの下に 1 つのリンクまたはボタンが配置されます。 追加するリンクまたはボタンのプロパティを入力します。
NOTEバナーに ブロックを追加して、複数のボタンやリンクを使用することもできます。 競合を避けるために、すべてのリンクまたはボタンを個別のブロックに保持し、リンクまたはボタンをバナーに直接追加しないでください。-
Show Button を次のいずれかに設定します。
オプション説明Alwaysボタンは常にスライドに表示されます。On Hoverボタンは、マウスポインターを置いたときにのみスライドに表示されます。Never Showボタンはスライドに表示されません。 -
ボタンに表示する Button Text を入力します。
-
Button Type を次のいずれかに設定します。
オプション説明Primary現在のスタイル シートからプライマリ ボタン スタイルを適用します。Secondary現在のスタイル シートからセカンダリ ボタン スタイルを適用します（該当する場合）。Linkボタンではなくハイパーリンクを作成します。現在のテーマのボタンのスタイルによって、ボタンの形式が決まります。 通常、プライマリボタンの背景色は、セカンダリボタンの背景色よりも目立ちます。
-
-
Show Overlay を次のいずれかに設定します。
オプション説明Alwaysオーバーレイは常に表示されます。On Hoverオーバーレイは、カーソルを合わせたときにのみ表示されます。Never Showオーバーレイが表示されません。オーバーレイを使用して、アピアランス設定で定義されたアクティブなコンテンツ領域に背景色を適用できます。 スライドの背景画像は、スライドの幅全体に対して表示されたままになります。
オーバーレイの表示を選択した場合は、Overlay Color を設定します。
- カラーなし スウォッチをクリックし、スウォッチを選択します。
- Color フィールドに、有効なカラー名または 16 進数値を入力します。
Search Engine Optimization
これらの設定のテキストは、検索エンジンに表示され、ページのインデックス作成方法が改善されます。
-
Alternative Text しくは、表示するデジタルアクセシビリティツールの alt テキストの説明を入力します。
代替テキストの使用は、アクセシビリティのベストプラクティスであり、一部のロケールでは法律で義務付けられています。 HTMLすると、
alt属性はimageタグのサブセットです。<image title="tooltip" alt="description" src="image.jpg"> -
Title Attribute：マウスオーバーしたときにツールヒントとして表示するテキストを入力します。
ベストプラクティスとして、説明的でキーワードの多いタイトルを選択すると、検索エンジンによる画像のインデックス作成方法が改善されます。 HTMLすると、
title属性はimageタグのサブセットです。<image title="tooltip" alt="description" src="image.jpg">
Advanced
-
スライドに追加されるコンテンツの水平方向の位置を制御するには、Alignment のいずれかを選択します。
オプション説明Default現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。Left指定したパディングに対する許容値を使用して、スライドの左境界線に沿ってコンテンツを揃えます。Center指定したパディングに対する許容値を使用して、コンテンツをスライドの中央に揃えます。Right指定したパディングに対する許容値を使用して、スライドの右端に沿ってコンテンツを配置します。 -
スライドの 4 つの辺すべてに適用する Border スタイルを設定します。
オプション説明Default関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。Noneスライドの境界線が見えるようには表示されません。Dottedコンテナの境界線は点線で表示されます。Dashedコンテナの境界線は破線で表示されます。Solidコンテナの境界線は実線で表示されます。Doubleコンテナの境界線は二重線で表示されます。Grooveコンテナの境界線は溝付き線で表示されます。Ridgeコンテナの境界線は、境界線として表示されます。Insetコンテナの境界線は、インセットされた線として表示されます。Outsetコンテナの境界線は、先頭行として表示されます。 -
None以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。
オプション説明Border Color見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。Border Width境界線の幅のピクセル数を入力します。Border Radiusピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。 -
（オプション）スライドに適用する現在のスタイルシートの CSS classes の名前を指定します。
複数のクラス名はスペースで区切ります。
-
スライドの外側の余白と内側のパディングを指定する Margins and Padding の値をピクセル単位で入力します。
スライド図に対応する値を入力します。
コンテナ領域説明Marginsスライドのすべての辺の外側の端に適用される空白の領域の量です。Paddingスライドのすべての辺の内側の端に適用される空白の領域の量です。
スライダータイトルを追加
スライダーの上にタイトルを表示する場合は、スライダーの上に [ テキストコンテンツタイプ ] を追加するだけです。 次に、必要に応じてテキストの書式を設定します。
-
Page Builder パネルで「Elements」を展開し、テキスト プレースホルダーをステージ上の行、列、タブセットにドラッグします。
ドラッグすると、スライダーの上の挿入点に赤いガイドラインが表示されます。
-
エディターを使用して、必要に応じてテキストを書式設定します。
スライダー設定の変更
-
スライダーコンテナにカーソルを合わせて主なツールボックスを表示し、設定 （
-
スライドの Minimum Height を入力します。
最小の高さは、有効な CSS 単位（
100px、50%、50em、100vhなど）または計算（100vh - 237pxなど）を含む数値です。例えば、スライダーの最小の高さを設定して、ページの完全な高さを伸ばすことができ、完全なページの背景画像やビデオに魅力的なオプションを提供できます。
-
ページの読み込み時にスライダーを開始する場合は、Autoplay を
Yesに設定し、Autoplay Speed をスライド間の遅延のミリ秒数に設定します。デフォルトでは、速度は 4,000 ミリ秒に設定されています。これは 4 秒です。 自動再生を
Noに設定した場合は、デフォルトで最初のスライドが表示され、ユーザーはスライドナビゲーション（ドットまたは矢印）をクリックして次のスライドを順番に表示する必要があります。
-
スライド間の切り替えをスムーズにするには、Fade を
Yesに設定します。フェードを適用すると、スライドは元の位置に表示されますが、コンテンツはスムーズに切り替わります。 フェードを使用しない場合は、スライド間の水平方向の移動が表示されます。
-
ページが開いている間にスライドショーを無限に繰り返すには、Infinite Loop を
Yesに設定します。 -
スライダーのナビゲーション コントロールの種類を選択するには、次の操作を行います。
-
各スライドの左側と右側にある 次へ 矢印と 前へ 矢印を含めるには、「Show Arrows」を「
Yes」に設定します。 -
スライダーの下に一連のナビゲーションドットを含めるには、「Show Dots」を「
Yes」に設定します。
-
-
必要に応じて 詳細スライダー設定を行います。
-
完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。
詳細 – スライダー
-
親スライダーコンテナ内のスライドの位置を制御するには、Alignment のオプションを選択します。
オプション説明Default現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。Leftスライダーコンテナの左境界線に沿ってスライドを配置します。指定したパディングに対する許容値を使用します。Centerスライダーコンテナの中央にスライドを揃えます。指定したパディングに対する許容値を使用します。Rightスライダーコンテナの右端に沿ってスライドを配置します。指定したパディングに対する許容値を使用します。 -
スライダーコンテナの 4 つの側面すべてに適用される Border スタイルを設定します。
オプション説明Default関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。Noneコンテナの境界線の表示はしません。Dottedコンテナの境界線は点線で表示されます。Dashedコンテナの境界線は破線で表示されます。Solidコンテナの境界線は実線で表示されます。Doubleコンテナの境界線は二重線で表示されます。Grooveコンテナの境界線は溝付き線で表示されます。Ridgeコンテナの境界線は、境界線として表示されます。Insetコンテナの境界線は、インセットされた線として表示されます。Outsetコンテナの境界線は、先頭行として表示されます。 -
None以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。オプション説明Border Color見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。Border Width境界線の幅のピクセル数を入力します。Border Radiusピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。 -
（オプション）スライダーコンテナに適用する現在のスタイルシートの CSS classes の名前を指定します。
複数のクラス名はスペースで区切ります。
-
Margins and Padding の値をピクセル単位で入力して、スライダーコンテナの外側の余白と内側のパディングを決定します。
対応する値を図に入力します。
コンテナ領域説明Marginsコンテナのすべての側面の外側の端に適用される空白スペースの量。Paddingコンテナのすべての側面の内側の端に適用される空白のスペースの量です。
スライダーのテスト
-
スライダーを含めたページを開き、Enable Page を
Yesに設定します。 -
右上隅の Save 矢印をクリックし、「Save & Close」を選択します。
-
ページ グリッドでページを見つけ、Action 列で View を選択します。
スライダーをプレビューする場合は、モバイルデバイスでの表示を確認できるように、ウィンドウのサイズを変更します。
