スマートスライダーテスト

今回は、Webサイトに欠かせないスライダーのプラグインを紹介します。スライダーとは、トップや製品などで見かけるバナーや写真が横にスライドしていくものです。キャンペーンや、新商品情報などの新着情報をバナーでアイキャッチで見せて、そのままページに移動できるので、伝えたいことをダイレクトに見せることができる有効な手法です。WordPressのプラグインでもスライダーは多いですが、その中でも有効ダウンロード数900000(!)のSmartSlider3というプラグインを紹介します。

簡単にバナー・写真の入れ替えやリンク設定ができ、しかも無料です。今回は、トップページに置くようなバナーを想定して作成いたします。有料版もありますが、無料版の機能のみで作成いたします(スライダー作成だけであれば、無料版で十分です)。

まずは、プラグインを検索しダウンロード、有効化してください。「Smart Slider」で検索すると一番最初に表示されます。

ダッシュボードの上に「Smart Slider」が表示されるので、クリックします。「New Project」ボタンをクリックし、次のページに移動したら、「Create a New Project」をクリックします。「Slider」「Simple」を選択し、プロジェクト名、サイズを入力し、全幅を選択します。サイズは、PCで見れるサイズにしましょう。

スライドを追加、画像をクリックし、メディアライブラリーから表示させたいバナーを選択します。バナーのサイズは、設定したサイズに合わせます。

色々設定項目がありますが、大きな設定の一つは、Sizeの「強制的に全幅」のチェックを外すことです。コンテナごと広がり、その他のオブジェクトにも影響を与えるので、cssでしっかりレイアウトしている場合は外しましょう。これによってスマホからPCまで、スライダーの入っている枠の全幅で表示されます。

次に、スライダー周りのデザインができる「操作」とスライダーの動きを変更できる「アニメーション」の設定を行います。「操作」では矢印や、ホイール、サムネイルといったパーツの有無や、色、大きさ、位置の設定がここで行えます。「アニメーション」では、横スライドの他に、縦スライドやフェードのアニメーションを選ぶことができ、スライド時間も設定できます。スライダーのプラグインで、コードを使わずに細かな設定が出来るのがすごく便利です!

注意点がいくつかあります。トップページの上に置く場合、遅延読み込みすると、ページが読み込んでるのに見えないということになるので、オープニングアニメーションの設定を考慮して、入れるか、「insitant」にするか決めましょう。サムネイルは、レスポンシブデザインに対応しておりません。Smart Sliderのスライダー自体は、画面の幅に合わせて大きさが変更しますが、サムネイルが多くなり、画面幅から出ると、レイアウトが崩れます。その場合、サムネイルの大きさをデバイスごとに調整し、最小サイズが決まっていないスマホで表示しないようにすれば、対応できます。

リンクは、バナー画像をクリックし、編集画面に移動してから行います。画像をクリックし、設定の「リンク」から移動したいページを選ぶか、urlを指定します。

では、いくつかデモとして、SmartSliderで作成したスライダーを簡単な設定とともに紹介いたします。

シンプルなバナースライダー。スマホ版は矢印が見えなくなります。設定もほぼデフォルトのままです。

項目	説明	設定
矢印	次ページに移動	左右内側
スライド方向	画像切り替わり	横
ページコントロール	ドット	チェック有

サムネイル付きの縦スライダーです。矢印はカーソルを合わせたら表示されます。サムネイルが多くなると左右に矢印が出て、移動できるように設定してあります。

項目	説明	設定
矢印	次ページ移動	左右内側
スライド方向	画像切り替わり	縦
サムネイル	バナー下のサムネイル	チェック有

サムネイルが、ページコントロール風になっています。切り替わりがフェードになっています。サムネイルは選択時に縁がつきます。イメージをCSSで角丸設定にしています。

項目	説明	設定
矢印	次ページ移動	左右外側
スライド方向	画像切り替わり	クロスフェード
サムネイル	バナー下のサムネイル	チェック有

以前は、PCのみの横長スライダーが主流でしたが、マルチデバイス対応により、全面スライダー、SP、PCで画像変更など、変化しています。今回紹介したSmartSliderはデバイスによる画像変更はできないので、背景やスライダーの高さ、レイアウトなどで、マルチデバイス対策をする必要があります。

今回は、無料版のシンプルなスライダーについて紹介しました。筆者は有料版を使っていませんが、設定、更新が簡単なプラグインなので、前後のスライドも表示できるカルーセルも気になります。機会があれば紹介したいです。

CXG DESIGNでは、WordPressサイトの更新が簡単にできるよう設定いたします。詳細は、コンタクトフォームよりお問い合わせください。