【無料プラグイン】10分で簡単!レスポンシブ対応の高機能スライダー「Smart Slider 3」の設置方法!
こんにちは!
サイバーブリッジweb担当のリクです・:*+.\(( °ω° ))/.:+
今回は「Smart Slider 3」を使って、簡単にレスポンシブ対応のスライダー(スライドショー)を設置する方法をご紹介します!
「Smart Slider 3」は、webサイトの固定ページや投稿記事にレスポンシブ対応のスライドショーを簡単に作成することができる無料なのに高機能なとってもおすすめのプラグインです。
WordPressのスライダー系プラグインはたくさんありすぎて、どれがいいか分からない!と迷っている方は、是非「Smart Slider 3」を使ってみてください♪
\ 完 成 形 が こ ち ら/
「Smart Slider 3」のインストール方法
ワードプレスの管理画面から「プラグイン」→「新規追加」を選択し、検索窓に「Smart Slider 3」と入力します。

インストールが完了したらプラグインを有効化させます。

これでSmart Sliderのインストールは完了です。
それでは早速スライダーを作ってみましょう!
スライダーの作成方法
管理画面のサイドバーにある「Smart Slider」からダッシュボードに移動します。

Smart Sliderのダッシュボードには4つの項目があるの簡単に説明します。
①新規スライダー作成
②テンプレートライブラリーに移動
③サンプルスライダーを編集
④PRO版にアップグレード
無料で問題なければ、①〜③のみを使用します。
新規スライダー作成
ダッシュボードにある①の「NEW SLIDER」を選択します。

するとこのようなポップアップが表示されるので、「Slider name」「Width」「Height」を入力し、「Preset」を選択します。

今回はサンプルとしてSlider nameを「テスト」とし、Presetを「Default」を選択。初期設定が完了したら「CREATE」をクリックします。
ダッシュボードにある「ADD SLIDE」→「Image」と順にクリックし、好きな画像を選択して「SAVE」しましょう。

とりあえずテストなので、メディアライブラリにあった良さげな画像を5枚選択しました。

これでスライダーは完成です。
下にスクロールすると「PUBLISH」の中に「Shortcode」があるので、コピーして記事に貼ればスライダーが表示されます。
画像の並び替えと消去
画像は左から順にスライドされて行きますが、画像をドラッグ&ドロップで順番を変えることもできます。
また、不要な画像を消去したい場合は、画像ホバーで出てくる右上「•••」マークをクリックして「Delete」で消去できます。

「Smart Slider 3」のカスタム方法は長くなってしまうので、後日まとめて記事にします!お楽しみに♪