デザインテンプレート販売中 >>

MetaSliderの使い方|レスポンシブのカルーセルをWordPressに実装しよう

他人のブログを見た際、自動で画像が切り替わっていくカルーセルを見たことはありませんか?

一定のリズムで画像が切り替わって表示されるカルーセルがあるだけで、ブログのクオリティもぐんっと高くなりますよね。

このページでは、そんなカルーセルが簡単に実装できるWordPressプラグイン、MetaSlider(メタスライダー)の使い方をご紹介していきます。

ブログをオシャレにしよう!

MetaSliderプラグインでできること

MetaSliderプラグインでは、複数の画像をスライドショーのようにアニメーション表示させるカルーセルが簡単に作成できます。

実際に作成したものをご覧ください。

GIFで貼り付けているので画質が小さいですが、実際には通常通り高画質&大画面で表示されます。

 

この他にも、以下のような機能が備わっています。

  • スライド(画像)にリンクを付ける
  • スライドにアニメーションを付ける
  • スライドにキャプション(文字)を入れる
  • 動画スライダーも作れる※有料版のみ

MetaSliderの使い方

アフィ
アフィ

ここからは実際にMetaSliderプラグインを使っていきましょう。

プラグインのインストール&有効化

まずは、MetaSliderプラグインをインストール&有効化させます。

WordPressのプラグインのインストール方法|手動&FTPのやり方も解説
このページでは、WordPressのプラグインのインストール方法を紹介しています。 プラグインのインストールはWordPressを使っていく上で必須のスキルですので、是非この機会に色々なプラグインのインストール方法があることを覚えてお...

画像の選択

プラグインの有効化が完了したらダッシュボードのMetaSliderをクリックします。

 

スライドを追加をクリックします。

 

カルーセルに表示させたい画像を選択し、Add to slideshowをクリックします。

複数の画像を一度に選択するにはShiftキーまたはCtrlキーを押しながら画像をクリックします。

 

画像の追加が完了したら、New Slideshowの項目にいま選択した画像が表示されるはずです。

スライドの設定

一般

一般のタブでは、スライドに表示させる文字(キャプション)や、スライド画像のリンク先設定が行なえます。

 

キャプションについてはデフォルトだとメディアからしか編集できないようになっていますが、Enter manuallyにチェックを付けることでこのページ内で編集できるようになります。

SEO

SEOのタブでは、画像タイトルおよび画像の代替文字列(alt属性)の設定が行なえます。

画像タイトルはなんでもいいですが、画像の代替文字はalt属性と言ってSEO効果がありますので、なるべく適切なalt属性を付与するのが望ましいです。

 

画像タイトルおよび画像の代替文字列についてはデフォルトだとメディアからしか編集できないようになっていますが、Use the image titleUse the image alt textにチェックを付けることでこのページ内で編集できるようになります。

切り抜き

切り抜きのタブでは、画像サイズがカルーセル表示のサイズを超過していた場合の切り抜き範囲を選択できます。

 

切り抜きの位置は、以下の9つから選択が可能です。

  • 左上
  • 上中央
  • 右上
  • 中央左
  • 中央/中央
  • 中央右
  • 左下
  • 下中央
  • 右下

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キーを同時押しして、スーパーリロードを行ってみましょう。

アフィ

2017年8月にブログをスタート。
1つの特化型ブログで月間75万PVを達成し、現在では複数の特化型ブログから安定的に月収50万円以上の収入を確保しています。
詳しく

アフィをフォローする

当ブログのデザインをあなたのブログにも実装してみませんか?

  • 3月15日ついにリリース
  • デザイン2種を展開
  • 今すぐあなたのブログをオシャレに
プラグインの使い方
アフィをフォローする
アフィブログ

コメント