シリウスでスライドショーを設置|実践編|WOW Slider

WOW Sliderでスライドショーを作成する

スライドショー作成手順

登録キーの入力

WOW Sliderをインストール・起動したら「ヘルプ」→「登録」で登録キーの入力画面が出てきます。
WOW Slider起動画面
購入後「WOW Slider - Unlimited Websites」(※無制限ライセンス購入時)という件名のメールが来ています、そのメール本文に「Activation key」なるものがありますのでそれをコピペして登録します。

登録しないとスライドショー画面に無料版と同じく「WOW Slider」のロゴが表示されます。

画像をぶっこむ

スライドショーで使いたい画像を投入していきます。
画像をぶっこんでいる画像
複数枚画像を投入すると画面中央部でスライドショーが始まります。こんな感じになるよってことです。
WOW Slider画面
画面右側ではテンプレートやエフェクトを選ぶことができ、画面中央で見た目や動きを確認することができます。

設定

下図の赤丸をクリックすると設定画面です。
WOW Slider画面2
↓設定画面(一般)
WOW Slider設定画面
↓図1-実際のスライドショー画面その1
WOW Sliderで作成したスライドショー画像
↓図2-実際のスライドショー画面その2
WOW Sliderで作成したスライドショー画像

①自動プレイスライドショー

そのまんまです。ページを開いたときに繰り返しスライドショーが動き続けるか、一通りループしたら止まるか、それとも閲覧者がアクションを起こすまで止まっているか。好みの問題ですね。

②ポーズ、プレイボタン

上の図1を参照の事。ここにチェックが入っていると常時画像の真ん中にポーズ、プレイボタンが表示されます。チェックを入れてもスマホでは自動的に表示されません。

③フルスクリーンボタン

YouTube等にあるようなフルスクリーンボタンが表示されます。チェックを入れてもスマホでは自動的に表示されません。

④スワイプサポート

スマホやタブレットで表示する際にスワイプで反応するようになります。スマホサイトを作る場合やレスポンシブデザインテンプレートでサイトを作る時は必須です。

⑤戻る、次へボタン

上の図1を参照の事。ここにチェックが入っていると常時画像の左右に戻る、次へボタンが表示されます。チェックを入れてもスマホでは自動的に表示されません。

⑥説明を表示

上の図2を参照の事。そのまんまですね。チェックを外せば説明文は表示されません。
「説明を表示」の下にあるDescription Effectというのはこの説明文が表示される際の動き方の指定です。

⑦・⑧・⑨ナビゲーション表示の有無

図1、図2を参照の事。図1の⑧がバレットナビゲーション、図2の⑨がフィルムストリップとなります。
表示位置は上下左右設定できます。
⑦のチェックを外すとどちらも表示されなくなります。チェックを入れてもスマホでは自動的に表示されません。

デザインの設定

↓設定画面(Design)
WOW Slider設定画面Design

①テンプレート選択

56種類(WOW Slider7.2使用。最新版はもっと増えているかも?)のテンプレートから使用するテンプレートを選択します。

②スライドショーサイズ

シリウスの本文中(2カラム)では横幅は約600pxとなります。
デフォルトのヘッダー画像は横幅900px、高さ200pxです。

③エフェクト選択

28種類(WOW Slider7.2使用。最新版はもっと増えているかも?)のエフェクトから使用するエフェクトを選択します。
画像を表示している時間、エフェクトのにかかる時間を設定できます。

透かし

透かしにチェックを入れるとスライドショー画像にテキスト、又は画像を表示させることが出来ます。(無料版ではWOW Sliderのロゴが表示されます。変更不可)

リンクボタン・Next→実装編