refirio.org

Smart Slider 3

※動画も扱える有償のPro版で検証。 ■導入 wp-content\plugins 内に nextend-smart-slider3-pro を配置。 プラグインページで Smart Slider 3 Pro を有効化。 左メニューの「Smart Slider」から専用ページへ遷移。 「Welcome to Smart Slider 3」が表示されるので「Don't show again」としておく。 それでも再度アクセスすると「Activate Smart Slider 3 Pro」と表示されるので、「Go to dashboard」としておく。 左メニューから「Dashboard」を選択。 ここで操作を行う。 ■シンプルなスライダーを作成 「NEW PROJECT → Create a New Project」からテスト用にスライダーを作成する Project Type: Slider Slider Type: Simple を選択して「CREATE」をクリック。 その後「ADD SLIDE」から「IMAGE」を追加。 画面下「Publish」部分にショートコードなどが記載されているので、 それらをもとにスライダーを表示する。 自動でスライドさせたければ、「Autoplay」から設定する。 ■スライダーにテキストのアニメーションを追加 追加した画像で「EDIT」をクリックすれば、テキストのアニメーションなどを追加できる。 左メニューから「Heading」をクリックしてテキストを追加できる。 挿入されたテキストの「Content → Text」を「これはテキストです」としてみる。スライドの上にテキストが表示された。 さらに「ANIMATION → IN → Fade」を選択し、下の「Fade」から「ADD KEYFRAME」 「Duration」を「3000」などにすると、アニメーションで表示されていることが判りやすい。 ■スライダーに画像のアニメーションを追加 追加した画像で「EDIT」をクリックすれば、画像のアニメーションなどを追加できる。 左メニューから「Image」をクリックして画像を追加できる。 挿入されたテキストの「Content → Image」の「＋」から画像を選択してみる。スライドの上に画像が表示された。 さらに「ANIMATION → IN → Fade」を選択し、下の「Fade」から「ADD KEYFRAME」 「Duration」を「3000」などにすると、アニメーションで表示されていることが判りやすい。 メインビジュアルの上に画像テキストなどをフェードで表示する場合、すべて同じサイズの画像で作って上に重ねていくと位置合わせしやすい。 複数の要素を重ねた場合、テキストや画像を操作するサブウインドウで、左上のアイコンからレイヤーを切り替えられる。