スライダーの設置
スライダー
スライダーモジュールを使用すると、jQueryを使用したスライダーを簡単にサイトに組み込むことができます。
【使用できるスライダー一覧】
| スライダー名 | Skitter | bxSlider | Destaque |
|---|---|---|---|
| 自動再生の切替 | ○ | ○ | × |
| 開始・停止ボタン | × ※マウスオーバーで停止設定あり | ○ | × |
| ナビゲーション表示 | ○ | ○ | × |
| ページャー表示 | ○ | ○ | × |
| ページャー形式 | ・ドット形式 ・ドット形式＋プレビュー ・数字形式 ・サムネイル形式 | ・全表示（ドット形式） ・簡易表示 | － |
| プログレスバー表示 | ○ | × | × |
| ラベル表示 | ○ | ○ | ○ |
| ラベルのサイズ、色指定 | × | × | ○ |
| エフェクト、 スライドの移動方向 | 35種類以上の中から スライドごとに設定 | 水平移動・垂直移動・ フェードの中から選択 | 左から右もしくは 右から左から選択 |
| ティッカー （停止せず流れる動作） | × | ○ | × |
| イージング （加速、減速などの動き） | × | ○ | ○ |
| レスポンシブ対応 | × | ○ | × |
| モバイル対応 | PC用とモバイル用を分けて設定できないため、スライド用の画像が大きいまま表示されます。 | レスポンシブに対応しているため、モバイルで閲覧した場合もきちんと表示されます。 | PC用とモバイル用を分けて設定できないため、スライド用の画像が大きいまま表示されます。 |
| 設定内容・サンプル | 詳しくはこちら | 詳しくはこちら | 詳しくはこちら |
※各種パーツのデザインは開発元より配布されているものになるため、スライダーごとに異なります。
スライダーの追加
1. 追加したい箇所の上にあるコンテンツパーツ上でマウスを長押しします。
2. “コンテンツパーツパネル”が表示されますので、[パーツの追加]ボタンをクリックします。
3. 【その他】タブを選択し、表示されるパーツの一覧から「新規スライダー - （スライダーの種類）」をクリックします。
※既存のスライダーパーツを使用する場合はそのスライダーをクリックしてください。
4. ページ内に新規のスライダーが作成されます。
5. 作成したスライダーの上で右クリックをして表示されたショートカットメニューから[スライダー] → [オプション]を選択します。
6. “オプションダイアログ”が表示されますので、必要項目を入力します。設定する内容はスライダーの種類により異なります。詳しくは各スライダーの設定内容をご確認ください。
→ Skitterの設定についてはこちら
→ bxSliderの設定についてはこちら
→ Destaqueの設定についてはこちら
7. スライダー上でダブルクリックを行い、スライドの設定を行います。スライドの設定内容はスライダーの種類により異なります。詳しくは各スライダーの設定内容をご確認ください。
→ Skitterの設定についてはこちら
→ bxSliderの設定についてはこちら
→ Destaqueの設定についてはこちら
スライダーの編集
1. 編集したいスライダーの上で右クリックをし、表示されるショートカットメニューから[スライダー] → [オプション]を選択します。
2. “オプションダイアログ”が表示されますので、設定を編集します。
→ Skitterの設定についてはこちら
→ bxSliderの設定についてはこちら
→ Destaqueの設定についてはこちら
スライダーの削除
通常のコンテンツパーツと同じように、スライダー上でマウスの長押し後、“コンテンツパーツパネル”から[パーツの削除]ボタンをクリックするか、右クリックのショートカットメニューより[コンテンツパーツ] → [パーツを削除]を選択します。
スライダー一覧
スライダーの一覧からスライダーオプションを編集したり、削除することができます。
1. コントロールパネルの[design] → [モジュール設定] → [スライダー]を選択します。
2. “スライダーダイアログ”が表示されます。登録されているスライダーのオプションを編集する場合は、
[編集]ボタン
を、削除する場合は[削除]ボタン
をクリックしてください。
スライドの追加・編集・移動・削除
スライドの追加
デフォルトの状態では設定されているスライドは2枚になりますが、このスライドを追加することができます。
1. スライドを追加したいスライダーの上でダブルクリックを行います。
2. スライドの下に表示される（＋）ボタンをクリックします。
3. 新しいスライドが追加されますので、スライドの設定を行い[保存する]ボタンをクリックして保存します。
スライドの編集
1. 編集したいスライドがあるスライダーの上でダブルクリックを行います。
2. 編集したいスライドの番号をクリックして、設定を編集します。
スライドの移動
スライドの並び順を変更することができます。
1. スライドの並び順を変更したいスライダーの上でダブルクリックを行います。
2. 移動したいスライドの番号をクリックし、その番号の下に表示された矢印ボタンで移動させます。
※矢印ボタンが表示されている番号のスライドが移動します。
※スライダーが自動再生になっている場合は、対象となるスライドも動く可能性がありますのでご注意ください。
3. 番号が移動したことを確認し、[保存する]ボタンをクリックして保存します。
スライドの削除
1. 削除したいスライドがあるスライダーの上でダブルクリックを行います。
2. 削除したいスライドの番号をクリックし、[削除]ボタンをクリックします。
3. 確認のメッセージが表示されますので、内容を確認し[OK]ボタンをクリックします。
