他人のブログを見た際、自動で画像が切り替わっていくカルーセルを見たことはありませんか？
一定のリズムで画像が切り替わって表示されるカルーセルがあるだけで、ブログのクオリティもぐんっと高くなりますよね。
このページでは、そんなカルーセルが簡単に実装できるWordPressプラグイン、MetaSlider（メタスライダー）の使い方をご紹介していきます。
MetaSliderプラグインでできること
MetaSliderプラグインでは、複数の画像をスライドショーのようにアニメーション表示させるカルーセルが簡単に作成できます。
実際に作成したものをご覧ください。
この他にも、以下のような機能が備わっています。
- スライド（画像）にリンクを付ける
- スライドにアニメーションを付ける
- スライドにキャプション（文字）を入れる
- 動画スライダーも作れる※有料版のみ
MetaSliderの使い方
ここからは実際にMetaSliderプラグインを使っていきましょう。
プラグインのインストール＆有効化
まずは、MetaSliderプラグインをインストール＆有効化させます。
画像の選択
プラグインの有効化が完了したらダッシュボードのMetaSliderをクリックします。
スライドを追加をクリックします。
カルーセルに表示させたい画像を選択し、Add to slideshowをクリックします。
複数の画像を一度に選択するにはShiftキーまたはCtrlキーを押しながら画像をクリックします。
画像の追加が完了したら、New Slideshowの項目にいま選択した画像が表示されるはずです。
スライドの設定
一般
一般のタブでは、スライドに表示させる文字（キャプション）や、スライド画像のリンク先設定が行なえます。
キャプションについてはデフォルトだとメディアからしか編集できないようになっていますが、Enter manuallyにチェックを付けることでこのページ内で編集できるようになります。
SEO
SEOのタブでは、画像タイトルおよび画像の代替文字列（alt属性）の設定が行なえます。
画像タイトルはなんでもいいですが、画像の代替文字はalt属性と言ってSEO効果がありますので、なるべく適切なalt属性を付与するのが望ましいです。
画像タイトルおよび画像の代替文字列についてはデフォルトだとメディアからしか編集できないようになっていますが、Use the image titleとUse the image alt textにチェックを付けることでこのページ内で編集できるようになります。
切り抜き
切り抜きのタブでは、画像サイズがカルーセル表示のサイズを超過していた場合の切り抜き範囲を選択できます。
切り抜きの位置は、以下の９つから選択が可能です。
- 左上
- 上中央
- 右上
- 中央左
- 中央/中央
- 中央右
- 左下
- 下中央
- 右下
Schedule
Scheduleのタブは有料のPro版のみで使える機能ですので、今回は説明を割愛させていただきます。
基本設定
基本設定では、表示するカルーセルのタイトルや幅、高さなどのビジュアル面のカスタマイズが行なえます。
デフォルト設定で問題ありませんが、お好みに合わせてカスタマイズしてみてください。
Slideshow Theme
Slideshow Themeでは、MetaSliderプラグインに元から収録されているデザインを使用することができます。
Select a custom themeをクリックしましょう。
様々なデザインのカルーセルが一覧表示されますので、この中から気に入ったデザインのものを使うことも可能です。
高度な設定
高度な設定では、スタイルやアニメーションの設定を行うことが可能です。
デフォルト設定で問題ありませんが、お好みに合わせてカスタマイズしてみてください。
スライダーの挿入
ここまでの設定が完了したら、How to Useの項目に記載されている[metaslider id=”○○”]という文字列をコピーしましょう。
こちらの文字列がショートコードとなり、このコードを貼り付けたところに今回作成したカルーセルが表示される仕組みです。
ショートコードの前後にも別のコードがありますが、そちらはコピー不要です。
設置したい場所を開き（今回は記事内を例に進めます）、先程コピーしたショートコードをペーストします。
記事内にペーストする際には、ビジュアルエディターでもテキストエディターでもどちらでも大丈夫です。
その状態でプレビュー表示してみると、このようにカルーセルが実装されているはずです。
カルーセルのレスポンシブデザイン
MetaSliderプラグインで作成したカルーセルがどんな表示になっているのか、PC・スマホ別に見てみましょう。
PC表示の場合
スマホ表示の場合
MetaSliderが表示されないときは
MetaSliderが表示されないと言う人は、コピー・アンド・ペーストするショートコードが誤っている可能性があります。
もう一度MetaSliderプラグインの設定画面に戻り、コピーするコードが誤っていないか確認しましょう。
また、過去のキャッシュが残っている可能性も考えられます。
表示されないページでCtrlキー＋F5キーを同時押しして、スーパーリロードを行ってみましょう。
コメント