トップページに「スライドショー」があるサイトを見かけたことありませんか。WordPressプラグイン【Smart Slider 3】を使うことで全て解決できます。しかも簡単にスライド(スライドショー)を作成することができます。
実際にスライドを作成しながら基本的な使い方を紹介していきたいと思います。
目次
完成スライド
まず、完成目標となるスライドのサンプルをお見せしたいと思います。
こちらのスライドに使用している画像は見ていただければ分かりますが３枚使用しています。また、基本的には設定をほとんど変更していません。
これだけです。すごく簡単ですね。
Smart Slider 3 のインストール・有効化
では、プラグインの新規追加から「Smart Slider 3」を検索して、インストール・有効化をおこないます。
WordPress管理画面のSmart Slider 3の「ダッシュボード」を選択します。
Smart Slider 3 スライドの新規作成
次に、Smart Slider内の「ダッシュボード」を選択してプロジェクトページに移動します。
プロジェクトページ内で、「NEW PROJECT」を選択します。
選択後、作成方法について聞かれます。簡単に説明すると
この中から今回は、「Create a New Project」を選択します。次に簡単な設定項目が表示されるので次のように選択してください。
スライドを作成するため「Project Type」はスライダーになります。「Slider Type」について無料版はシンプルしか選べません。「設定」は、今回は変更しなくても問題ありません。
Smart Slider 3 スライド追加と編集
では、画像の追加をおこないます。追加方法は2通りあります。
画像以外にも「Blank」アイコンを選択すると空のスライドを挿入したり「投稿」アイコンを選択すると自身が投稿した記事をスライドに挿入することができます。
目のアイコンを選択すると作成したスライドをプレビューすることができます。
追加した画像について
追加した画像はドラック&ドロップで順番の入れ替えが可能です。例えば、「s-cats05」と「s-cats06」の順番を変える場合、ドラック&ドロップで可能です。
画像は編集することが可能です。フォーカスの変更・ラベルの追加などあります。また、無料版にはいくつか制限があります。
追加した画像などを削除するには、削除したいスライドを右クリックして「削除」を選択すると削除できます。
Smart Slider 3 スライドの設定
ここでは、完成目標にあった設定項目を紹介していきたいと思います。
一般設定
まず、スライドが完成した時の公開方法、プロジェクト名の変更などは「一般設定」からとなります。
ショートコードは投稿記事内に使用可能です。PHPコードはテーマ内に使用するコードになります。一般設定にある「名前」を変更することで、プロジェクト名を変更することができます。
スライダーサイズ
次に、スライド全般の設定箇所になります。
「全幅」にするとサイドバーを無視して画像が表示されるので、レイアウトは「Boxed」を選択します。
操作
では、タイトルの通りスライドの操作に関する設定箇所になります。
矢印ですが、初期設定は「オン」になっているため「オフ」に変更しましょう。矢印の形は、2種類用意されています。また、色や位置設定など変更可能になっています。
ページコントロールの初期設定は「オフ」になっているため「オン」に変更します。こちらも、点の色や位置などの変更が可能です。
アニメーション
スライドとスライドの間に、アニメーションを設定して視覚的な効果を付けることができます。
初期設定では、「アニメーションなし」なっているため「フェード」を選択して保存します。その他にも色々とアニメーションが用意されています。
「Duration」はアニメーションの表示する速度設定になります。速度設定を選択するか、キーボードから直接入力の設定も可能です。
自動再生
最後に、スライドの再生に関する設定項目になります。ここでは次のスライドが表示されまでの間隔設定ができます。
自動再生を「オン」にします。Slide Durationは次のスライドが表示されるまでの間隔設定です。Slide Durationの設定は今回そのままで問題ありません。変更する場合はキーボードなどで手入力になります。
お疲れ様です。以上でスライド完成です。投稿記事やテーマに公開してみましょう。
まとめ
今回、完成目標のスライドを基に使い方を説明していきました。スライドしたい画像や記事を挿入するだけでスライドが簡単に作成できるのがメリットですね。また、無料版でも十分すぎる機能ですが有料版もあります。
もし、スライドを導入してみたいと思っている方がいたら、WordPressプラグイン【Smart Slider 3】を一度検討していみてはいかがでしょうか。
コメント