Responsive Slider by MetaSliderは、スライドショーを設置できるプラグインです。
無料版ではいくつか機能が制限されていますが（この手のプラグインは無料版だと大抵機能が制限されている）、設定が簡単で、ショートコード及びPHPで好きな場所に設置できるのが特徴です。
Contents
設定と使い方
スライドショーの作成は、管理画面一覧に追加された「MetaSlider」から行って下さい。
スライドショーの作成
Meta Sliderの設定画面を開くと、「データを共有して改善に協力してもらえないか」を問われるので、お好みで「はい（Agree and Continue）」or「いいえ（No Thanks）」を選択して下さい（この設定は後から「Settings & Help」の「Global Settings」で変更可能）。
データを共有して改善に協力するかを問われる
「空のスライドショーを作成する」をクリックして最初のスライドショーを作成します。
「空のスライドショーを作成する」をクリック
スライドショーのタイトルを任意で変更します（複数作成した時の識別用）。
スライドショーのタイトルを変更
画面上部の「スライドを追加」をクリックします。
「スライドを追加」をクリック
スライドショーに表示させたい画像を選択して、「スライドショーを追加」をクリックします。
この際、1枚ずつ画像を追加しても構いませんが、「Ctrl」を押しながら複数選択してまとめて追加することも可能です。また、この画面で新規に画像をアップロードすることもできます。
画像を選択して「スライドショーを追加」をクリック
必要なら、それぞれの画像に詳細情報を入力及び編集することができます（任意）。
また、画像はドラッグ＆ドロップで順番の入れ替えが可能です。
スライドショーに表示する画像の詳細情報
| キャプション | 画像の上に重ねて表示されるテキスト文字 Media library caption（画像のキャプションを使用） Media library description（画像の説明を使用） Enter manually（任意の文字列を入力） |
|---|---|
| URL | 画像にリンクを貼りたい時はURLを入力 |
| Open in a new window | リンクを新しいタブで開く「target="_blank"」の追加 |
| 画像タイトルテキスト | 画像のtitle属性「title=""」 |
| 画像の代替文字列 | 画像のalt属性「alt=""」 |
| 切り抜きの位置 | 画像がスライダーのサイズよりも大きい時に表示する位置 |
画面上部の「Preview」をクリックして、実際に表示されるスライドショーを確認します。
「Preview」をクリック
問題がなければ、画面上部の「保存」をクリックしてスライドショーを保存します。
「保存」をクリック
スライドショーは複数作成することもできます（画面上部の「New」から）。
記事にスライドショーを設置（ブロックエディター）
ブロックエディターの場合は、「MetaSlider」のブロックを追加します。
「MetaSlider」のブロックを追加
表示させるスライドショーを選択します。
表示させるスライドショーを選択
記事にスライドショーを設置（クラシックエディター）
クラシックエディターの場合は、「スライドショーを追加」からショートコードを挿入します。
スライドショーのショートコードを挿入
ウィジェットにスライドショーを設置
ウィジェットに設置する場合は、管理画面の外観「ウィジェット」に「MetaSlider」を追加します（タイトルの入力とスライドショーの選択が可能）。
ウィジェットにスライドショーを設置
テーマファイルにスライドショーを設置
テーマファイルにスライドショーを設置する場合は、表示させたいスライドショーの管理画面を開いて、「使い方」に表示されている「PHPコード」をコピーして任意の場所に貼り付けます。
「PHPコード」をコピーしてテーマファイルに貼り付ける
トップページ等の任意の場所に設置したい時に使いますが、編集ミスでレイアウトが崩れる可能性もあるので、必ずバックアップを取ってから作業して下さい（分からない方にはおすすめしない）。
スライドショーのカスタマイズ
既に記事やテーマファイルに挿入済みスライドショーにも設定の変更は反映されます。
初期設定ではレイアウトが崩れている及び綺麗に表示されない時は任意でカスタマイズして下さい。
基本設定
デザインや機能の異なる4つのタイプから選択することができます。
また、スライドショーの「サイズ（寸法）」「効果」「矢印」「ナビゲーション」を選択できます。
スライドショーの基本設定
| 幅 | スライドショーの横幅（px） |
|---|---|
| 高さ | スライドショーの高さ（px） |
| 効果 | 画像が切り替わる時のアニメーション |
| 矢印 | 画像の左右に切り替え用の矢印を表示 |
| ナビゲーション | 画像の下にナビゲーション用の点を表示 |
幅はスライドショーを設置するコンテンツの横幅に合わせておくことをおすすめします。同様に、挿入する画像の比率に合わせて高さも設定して下さい（ここで設定した大きさの画像が生成される）。
他は全て任意ですが、「Coin Slider」だけはレスポンシブに対応していないのでおすすめしません。
Slideshow Theme
カスタムテーマ（デザイン）を使用することができます。
カスタムテーマを使いたい時は、「Select a custom theme」をクリックします。
テーマを変更したい時は「Select a custom theme」をクリック
テーマを選択して「Select」をクリックします。
テーマを選択して「Select」をクリック
但し、スライドショーのタイプによってはレイアウトが崩れるので注意して下さい。
高度な設定
画面右下の「高度な設定」を開くと、更に細かい設定ができます。
スライドショーの高度な設定
| 100%幅 | 親コンテナいっぱいに伸縮 |
|---|---|
| 中央揃え | スライドショーを中央揃え |
| 自動再生 | 自動トラジション |
| 画像の切り抜き | 自動切り抜きの設定 |
| カルーセル・モード | 一度に複数の画像を表示 |
| カルーセルマージン | カルーセル表示させた時の余白 |
| Fade in | 最初の画像が読み込まれる時のアニメーション |
| ランダム | スライドの順番をランダムにする |
| 停止ボタン表示 | カーソルを載せた時にスライドショーを停止 |
| スライドの遅延 | 各画像の表示時間（ミリ秒「1/1000秒」） |
| アニメーションの速度 | アニメーションの速度（ミリ秒「1/1000秒」） |
| スライドの方向 | 画像がスライドする方向 |
| イージング | アニメーションイージングの効果 |
| 前のテキスト | 「前へ」項目のテキスト |
| 次のテキスト | 「次へ」項目のテキスト |
| CSSクラス | 追加したいCSSのクラスがあれば入力 |
| CSSを出力 | 独自のCSSを含めたい場合はチェックを外す |
| JSを出力 | 独自のJavascriptを含めたい場合はチェックを外す |
| 競合モードなし | フレックススライダー化を遅延する |
スライドショーのタイプによって設定できる項目は異なりますし、上手く反映されない項目もあるので、画面上部の「Preview」で確認しながら設定を変更して下さい。
個人的には、「100%幅」「前のテキスト」「次のテキスト」を変更するだけで十分だと思います。
Settings & Help
管理画面のMetaSlider「Settings & Help」からは、スライドショーを追加した時の初期設定を変更できます（スライドショーを作成する時にも編集できるので入力は任意）。
Settings & Help
また、通知のON・OFF、データのインポートとエクスポートができます。
最後に
無料版ではいくつか機能が制限されていますが、それでも十分なカスタマイズが可能です。
また、設定項目が多くて少し複雑に見えるかもしれませんが、基本はスライドショーを作成して記事にショートコードを挿入するだけなので、使い方は思ったよりも簡単です。
気になる点があれば、後からカスタマイズして下さい。
最近のコメント